Roktのインストール
あなたのページにRokt Web SDKを追加する
Payments Marketplace配置を実装するために、Rokt Web SDKを配置を表示させたいページに統合することをお願いしています。この統合は直接ページ上またはタグマネージャーソリューションを介して行うことができます。
Payments Marketplace配置は、最新バージョンのRokt Web SDKとしか互換性がありません。あなたのアカウントマネージャーと連携して、ページが最新バージョンに更新されていることを確認してください。
Roktタグを発火させる方法およびPayment Marketplace配置をロードする方法は、チェックアウトフローによって異なることに注意してください。
- 折りたたみ可能なチェックアウト: 支払いセクションが表示可能になるまでselectPlacementsメソッドを呼び出さないでください。そうでなければ、ユーザーが配置を実際に見たかどうかがわからないまま配置のインプレッションがカウントされ、長期的なパフォーマンスに悪影響を与える可能性があります。
- シングルページアプリケーション: 推奨されるアプローチは、顧客が初めてサイトに到着したときにWeb SDKを事前初期化し、顧客が配置がレンダリングされる場所に到達したときに配置をトリガーすることです。詳細はこちらを参照してください（here）。
イベントリスナー
イベントベースの統合により、ロードされたプレースメントを取得し、それらが発するイベントをリッスンすることができます。
選択プロセスは、選択内の任意のプレースメントが発するイベントを購読するための Selection.on と呼ばれるメソッドを公開しています。あるいは、Selection.getPlacements メソッドによって返されるプロミスからインスタンスを取得して、各プレースメントに別々に購読することもできます。これは、選択プロセスが終了した後、ページ上にロードされる前にプレースメントで解決します。
Rokt は、我々のPayments Marketplaceのプレースメントでユーザーが購読できる以下のイベントタイプをサポートしています。
| イベントタイトル | 定義 |
|---|---|
| POSITIVE_ENGAGEMENT | オファーまたはカタログアイテムに対してユーザーが積極的に関与することを示します。 |
| PLACEMENT_INTERACTIVE | プレースメントがレンダリングされ、対話可能になった瞬間を示します。 |
以下はイベントリスナー統合の例です:
//オプションのイベントリスナー
selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
selection.context.pageVariantName.then((val) => {
console.log(val)
});
});
selection.on('POSITIVE_ENGAGEMENT').subscribe(() => {
selection.context.pageVariantName.then((val) => {
console.log(val)
});
});
Roktを埋め込む
次は、あなたのウェブサイトにRoktのプレースメントを表示する時です。Roktのプレースメントを表示したいページのbodyに次のコードを挿入してプレースメントを初期化してください。オファーを最適に文脈化するために、チェックアウトページの支払いオプションの下にRoktプレースメントを配置することをお勧めします。
<div id="rokt-placeholder"></div>
複数のコンテナをページに追加する
Roktは、多くの場合、ページの複数の場所にプレースメントを表示する実験を行いたいと考えています。そのためには、プレースメントを表示するための追加のユニークなdiv要素を含めることをお願いしています。それぞれの命名は自由ですが、判別できる方法を含めることをお勧めします。
<div id="rokt-above-payment"></div>
<div id="rokt-below-payment"></div>
複数の場所でのテスト用には、プレースメントを表示すべき追加のdiv要素を含めることをお勧めします。
Rokt UXがあなたのサイトで迅速に読み込まれ、あなたの顧客に最適な体験を提供するために、当社の統合ベストプラクティスに従ってください。