SiteMonetization
Roktのプレースメントをサイトに追加することは、Rokt Ecommerceパートナーにとっての最初のステップです。プレースメントは、あらゆる種類のRoktキャンペーンを表示するために使用される柔軟なiframeです。
ウェブサイトにプレースメントを設定するには、Web SDKを使用することができます（以下の手順を参照）。Roktはまた、ネイティブのAndroid、iOS、React Native、およびFlutterアプリケーションにプレースメントを設定するためのさまざまなモバイルSDKも提供しています。
Shopifyストアは、Rokt Ecommerceアプリを使用して数秒でRoktプレースメントを設定できます—コーディングは不要です！
このガイドは、マルチページアプリケーションとして構築されたウェブサイトを対象としています。サイトがシングルページアプリケーションの場合は、これらの手順に従う必要があります。
1. ページにRoktを読み込む
アカウントマネージャーが統合コードを提供するか、my.rokt.comで見つけることができます。
統合コードには、顧客識別子（生のメール顧客アドレスを推奨）とデータ属性が含まれています。Roktが個人識別子とデータ属性を求める理由について詳しくはお読みください。
統合コードのサンプル
Roktと統合する最初のステップは、Web SDKをサイトに読み込むことです。最高のパフォーマンスを得るために、以下の構造を使用してRoktスクリプトを読み込むことをお勧めします。
Google Tag Managerを使用している場合は、document.writeフィールドがチェックされていることを確認し、推奨される実装手順を参照してください。
以下の例をコピーする場合は、rokt-account-idをアカウントのユニークIDに置き換えてください。Rokt IDはどこで見つけることができますか？の手順を参照してください。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<!-- Part #1 - Web SDKのロード -->
<script type="module">
window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
const target = document.head || document.body;
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
script.fetchPriority = "high";
script.crossOrigin = "anonymous";
script.async = true;
script.id = "rokt-launcher";
script.addEventListener('load', () => resolve());
script.addEventListener('error', (error) => reject(error));
target.appendChild(script);
});
</script>
<!-- 他のスクリプトやメタタグ -->
</head>
<body>
<!-- HTMLコンテンツをここに -->
<!-- Part #2 - データ属性が利用可能になったら、以下のスクリプトを実行してRoktプレースメントを表示 -->
<script type="module">
await window.RoktLauncherScriptPromise;
const launcher = await window.Rokt.createLauncher({
accountId: "rokt-account-id",
sandbox: true,
});
await launcher.selectPlacements({
attributes: {
email: "",
firstname: "",
lastname: "",
confirmationref: "",
billingzipcode: "",
amount: "",
paymenttype: "",
ccbin: "",
mobile: "",
country: "",
language: "",
currency: "",
billingaddress1: "",
billingaddress2: "",
age: "",
gender: "",
cartItems: JSON.stringify(cartItems),
},
});
</script>
<!-- HTMLコンテンツをここに -->
</body>
</html>
最適なパフォーマンスを得るためには、Web SDKを早期に統合し（例：<head></head>内）、データ属性が利用可能になったらすぐにselectPlacements呼び出しを有効にしてください。
上記の 例では、sandbox: trueを使用してサンドボックス環境で統合をテストしています。本番環境で使用する準備ができたら、sandbox: falseに設定するか、完全に削除してください。
ページにWeb SDKを追加する際は、データ属性を統合して、顧客に最も関連性の高いメッセージを提供できるようにしてください。これは通常、顧客データと取引データの両方を組み合わせたものです。ビジネスが運営されている業種に応じて、最適な属性の統合についてはアカウントマネージャーがガイドします。
Roktは、ベストプラクティスとして直接統合を推奨していますが、タグマネージャーを使用した統合のオプションも利用可能です。
2. ページとプレースメントの設定
Roktチームは、One Platformで関連するページとプレースメントを設定します。ブランドガイドラインとUXのニーズに合わせてプレースメントをカスタマイズすることができます。
埋め込みプレースメント
サイトに埋め込みプレースメントを追加する予定がある場合、プレースメントをアンカーするHTML要素を指定する必要があります。例: <div id="rokt-placeholder"></div>。どの要素をプレースメントがターゲットにするかをRoktチームに知らせてください。
3. 統合のテスト
Web SDKが正しいページでロードされ、正しい属性を含んでいることを確認してください。
統合のテストに関するガイドをお読みください。
ロード速度の問題がある場合、準備用iframeを使用してこれを解決することができます。準備用iframeの利点についてはこちらをご覧ください。
詳細情報
iOS、Android、React Native、またはFlutterのモバイルアプリケーションにRoktプレースメントを追加します。