メインコンテンツまでスキップ

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があなたのサイトで迅速に読み込まれ、顧客に最適な体験を提供するために、私たちの統合ベストプラクティスに従ってください。

この記事は役に立ちましたか？