Roktのインストール
Rokt Web SDKをページに追加する
Payments Marketplaceプレースメントを実装するために、Rokt Web SDKをプレースメントを表示したいページに統合することをお勧めします。この統合は、ページに直接またはタグマネージャーソリューションを介して行うことができます。
Payments Marketplaceプレースメントは、最新バージョンのRokt Web SDKとしか互換性がありません。ページが最新バージョンに更新されていることを確認するために、アカウントマネージャーと協力してください。
Roktタグの発火方法とPayment Marketplaceプレースメントの読み込み方法は、チェックアウトフローによって異なることに注意してください。
- 折りたたみ式チェックアウト: 支払いセクションが表示されるまで、selectPlacementsメソッドを呼び出さないでください。そうしないと、ユーザーが実際にプレースメントを見たかどうかを知らずにRoktがプレースメントインプレッションをカウントしてしまい、長期的なパフォーマンスに悪影響を与える可能性があります。
- シングルページアプリケーション: 推奨される方法は、顧客がサイトに最初 に到着したときにWeb SDKを事前に初期化し、顧客がプレースメントがレンダリングされる場所に到達したときにプレースメントをトリガーすることです。詳細はこちらをご覧ください。
イベントリスナー
イベントベースの統合により、読み込まれたプレースメントを取得し、それらが発するイベントをリッスンすることができます。
選択プロセスは、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がサイト上で迅速に読み込まれ、顧客に最適な体験を提供するために、当社の統合ベストプラクティスに従ってください。