Adobe Experience Platform Integration for Ecommerce

このページでは、Adobe Experience Platform を使用して Rokt Ecommerce の Web SDK を実装し、チェックアウト時により関連性の高い顧客体験を提供する方法を説明します。SDK を使用すると、設定されたページで発火し、ユーザーとトランザクションデータを Rokt に戻してパーソナライズと測定を行うことで、これらの体験（確認ページでのオファー表示など）をトリガーおよび追跡できます。

Adobe でデータレイヤーに基づいてデータ要素を作成し、Rokt SDK を初期化して Rokt プレースメントを表示するルールを作成する方法を学びます。

Rokt 拡張機能を追加する

1. Adobe Experience Platform にサインインします。

2. 拡張機能タブに移動し、カタログで mParticle by Rokt を検索します。

3. mParticle by Rokt 拡張機能をクリックし、インストール をクリックします。

4. 拡張機能タブでインストールされた mParticle by Rokt 拡張機能に移動し、設定 をクリックします。

5. 設定 タブに設定を入力します：

   • API キー の下に、Rokt アカウントマネージャーから提供された API キーを入力します。
   • あなたのウェブサイトが複数のサブドメインを使用している場合（例: mysite.com と checkout.mysite.com）、クッキーストレージを使用 を有効にします。
   • 統合をテストしている場合は、開発モード フラグを有効にします。統合が本番データの準備ができたら、このフラグは無効にする必要があります。
   • mParticle by Rokt 拡張機能では、開発者が統合から直接警告、エラー、その他の情報を送信する ログレベル を指定できます。統合をテストする際には、ログレベルを 詳細 に設定することをお勧めします。
   • ファーストパーティドメイン統合 のためにカスタムドメインを設定した場合は、CNAME ドメイン の下に新しいドメイン名を入力します。ドメインは次の形式で入力してください rkt.yourcompany.com。
   • ターゲティング/機能クッキーを無効にするには、noTargeting と noFunctional を有効にします。これらは通常、パーソナライズと強化されたチェックアウト体験に使用されます。

詳細な説明については、Cookie 同意フラグ を参照してください。

6. ユーザー ID タブで ID を設定します：

   • 生のメールを統合する場合は、Email フィールドに作成したデータ要素を入力します。
   • ハッシュ化されたメール（SHA-256）を統合する場合は、Email SHA256 フィールドに作成したデータ要素を入力します。

7. 保存 をクリックします。

ルールを作成する

Rokt SDKを初期化する

1. ルールタブに移動し、ルールを追加を選択します。
2. ルールにRokt - Initializationのような説明的な名前を付け、ルールを発火させるイベントを作成します。

注記

サイトによって異なりますが、Roktは初期化アクションが可能な限り早く読み込まれるように、イベントタイプ**ライブラリ読み込み（ページトップ）**を使用することを推奨しています。

3. アクションを作成し、mParticle by Roktを拡張機能として選択し、Roktを初期化をアクションタイプとして選択します。 4. アクション設定で変更を保持をクリックし、ライブラリに保存をクリックします。

注記

サイトによって異なりますが、Roktはすべてのページで初期化アクションを発火させることを推奨しています。これにより、オファーの配信遅延が最小限に抑えられ、ユーザー識別の精度が最大化されます。

ユーザーを識別する

現在のユーザーをRoktに識別するルールを作成する必要があります。このルールをサイトに含め、メールアドレスが判明したらすぐに発火するようにしてください。

1. ルールタブに移動し、ルールを追加を選択します。
2. ルールにRokt - Identifyのような説明的な名前を付け、ルールを発火させるイベントを作成します。
3. アクションを作成し、mParticle by Roktを拡張機能として選択し、アイデンティティイベントをアクションタイプとして選択します。
4. 識別をアイデンティティメソッドとして選択します。
5. アクション設定で変更を保持をクリックし、ライブラリに保存をクリックします。

このアクションが実行されると、拡張機能設定からEmail/Email SHA256の値を使用してユーザーを識別します。

ページビューをログに記録する

ユーザーのトランザクションジャーニーの各ページが読み込まれるとすぐにページビューをログに記録する必要があります。ページビューを有効にするには:

1. ルールタブに移動し、ルールを追加を選択します。
2. ルールにRokt - Page Viewのような説明的な名前を付け、ルールを発火させるイベントを作成します。

注記

サイトによって異なりますが、Roktはページが読み込まれ、Roktの初期化アクションが発火したらすぐにページビューをログに記録することを推奨しています。詳細はルールの組み合わせをご覧ください。

3. アクションを作成し、mParticle by Roktを拡張機能として選択し、ページビューをログに記録をアクションタイプとして選択します。
4. ページ設定、カスタム属性、カスタムフラグのためにページビューのログ設定を追加します。

ページビューのログアクションは次のフィールドを受け入れます:

• イベント名: 読み込まれているページの名前を表す文字列
• カスタム属性: ページに関する情報を含むキー/値ペアのオブジェクト
• カスタムフラグ: 通常は特定の技術パートナーに特有のページに関する情報を含むキー/値ペアのオブジェクト; 例: SnapchatConversions.ClickId

ページ名フィールドは一般的なページ名に設定する必要があります。例えば、Eコマースサイトには何百もの商品詳細ページが存在する可能性があります。これらを正しくログに記録するには、一般的な名前（例: "商品詳細ページ"）を使用し、URLやページの他の属性を属性としてログに記録する必要があります。

以下の例では、ページビューのログアクション:

• イベント名の下で、値をpage viewに設定します。
• URLパスの最後のセグメントから派生したscreen_nameデータ要素を設定し（フォールバックは"home"）、
• 現在のページの完全なURLをキャプチャするurlデータ要素を設定し、
• document.referrerからキャプチャしたreferring-pageデータ要素を設定します。

これらのデータ要素の構築方法については、以下の推奨画面ビューイベント属性をご覧ください。

5. アクション設定で変更を保持をクリックし、ライブラリに保存をクリックします。

Roktプレースメントを表示する

Rokt SDKを初期化するアクションを有効にすることに加えて、Rokt Ecommerceの統合にはRoktプレースメントを表示するアクションも必要です。

1. ルールタブに移動し、ルールを追加を選択します。
2. ルールにRokt - Show Placementのような説明的な名前を付け、ルールを発火させるイベントを作成します。

正確なトリガー設定はサイトごとに異なります。以下は、サイトがマルチページアプリケーション（MPA）かシングルページアプリケーション（SPA）かによって異なるトリガー設定の例です：

• マルチページアプリケーションのトリガー設定

  1. イベントタイプをCore → DOM Ready、Core → Page Bottom、またはroktInitCompleteカスタムイベントを使用している場合はCore - Rokt Init Completeに設定します。
  2. 条件の下で、Core → Path Without Query String条件を追加します。
  3. タグを発火させるページを識別する一致ルールを入力します。例えば、確認ページがexample.com/cart/payment/confirmationの場合、識別パラメータは/cart、 /payment、または/confirmationのいずれかです。

• シングルページアプリケーションのトリガー設定

  1. イベントタイプをCore → History Changeに設定します。
  2. 条件の下で、Core → Path Without Query String条件を追加します。
  3. タグを発火させるページを識別する一致ルールを入力します。例えば、確認ページがexample.com/cart/payment/confirmationの場合、識別パラメータは/cart、 /payment、または/confirmationのいずれかです。

3. アクションを作成し、拡張機能としてmParticle by Rokt、アクションタイプとしてShow Placementsを選択します。

4. プレースメント設定で：

   • ページ識別子を設定するオプションがあります。ページ識別子は、Roktプレースメントが追加されるページを一意に識別し、同じURLを複数のページで使用するマルチステップのチェックアウトフローがある場合に便利です。ページ識別子には任意の値を使用できますが、例として以下のものがあります：
     • stg.rokt.conf - ステージング（またはテスト）環境の確認ページ。
     • prod.rokt.conf - 本番環境の確認ページ。
     • stg.rokt.payments - ステージング（またはテスト）環境の支払いページ。
     • prod.rokt.payments - 本番環境の支払いページ。
   • Hash raw email attribute (SHA256)を有効にすると、Email属性のハッシュバージョンをRoktに送信することができます。

5. コア属性タブで、Roktに送信するすべての利用可能な属性を記入します。少なくともemail、firstname、lastname、billingzipcode、およびconfirmationref属性を提供する必要があります。

6. カスタム属性タブで、コア属性に事前定義されていない他の属性を追加します。

7. アクション設定で変更を保持をクリックし、保存します。

セットアップの推奨事項

ルールの順序

Adobe Experience Platform は、異なるルール間での実行順序を保証しません。同じイベントを共有している場合でもです。これらのルールのシーケンスを間接的に制御するために、共有カスタムイベントを使用することができます。

アクションが期待される順序で実行されることは非常に重要です。例えば：

• マルチページアプリケーション (MPA) の場合、Initialize Rokt アクションは、ページロード時に他のアクションが実行される前に必ず実行されなければなりません。
• 同じページでユーザーを識別し、プレースメントを表示する場合、Show Placements アクションで Email 属性を設定すると、Identity Events アクションが自動的にトリガーされます。

Initialize Rokt アクションの後に後続のアクションが実行されることを保証するために、各ページでアクションが実行された後に発火するように以下のカスタムイベントを追加できます：

1. Initialize Rokt アクションの設定で、Advanced Options で Wait to run next action が有効になっていることを確認します。
2. Initialize Rokt ルールの設定で、Core を拡張機能として、Custom Code をアクションタイプとして新しいアクションを追加します。このアクションを Core - Rokt Init Complete と名付けます。
3. JavaScript を言語として選択し、エディタに以下の行を貼り付けます：

window.dispatchEvent(new CustomEvent("roktInitComplete"));

4. Log Event や Log Page View などの後続のルール設定で、Core 拡張機能と Custom Event イベントタイプを持つイベントからアクションをトリガーします。
5. Custom Event Type を roktInitComplete に設定し、any element を選択します。
6. 変更を保持 をクリックします。
7. 正しいページで発火することを確認するために、ルール設定に他の関連条件を追加します。

この設定により、各ページでアクションが正しい順序で実行されることが保証されます。

注記

同じ設定を繰り返して、roktIdentityComplete カスタムイベントを有効にし、Identity Action が Log Event Action の_前に_実行されたことを確認します。

ルールの組み合わせ

Rokt は、複数の mParticle by Rokt アクションを1つのルールに組み合わせることを推奨します。例えば、Initialize Rokt と Log Page View アクションを組み合わせることができます。これらはすべてのページで読み込まれます。

1. ルールの順序 のステップ1-3を繰り返します。
2. 新しいアクションを作成し、mParticle by Rokt を拡張機能として、Log Page View をアクションタイプとして選択します。

これにより、Initialize Rokt と Log Page View アクションがすべてのページで同じルールで実行されることが保証されます。

データ要素

データレイヤーの理解

データレイヤーは、開発者によってあなたのウェブページに実装されているはずです。

データレイヤーは、Adobe Experience Platform のデータ要素と共有したい情報をすべて含むオブジェクトです。イベントや変数などの情報はデータレイヤーを通じてAdobeに共有され、Adobe Experience Platformのデータ要素で変数の値や特定のイベントに基づいてトリガーを設定することができます。

Adobeは、新規または再構築された実装にはAdobe Client Data Layerの使用を推奨しています。他のデータレイヤー仕様を使用することも自由です。組織のニーズに合った一貫したデータレイヤーに合わせることが最も重要です。

データレイヤーの動作についての詳細は、Adobe Experience 開発者ガイドを参照してください。

データレイヤーの例

window.adobeDataLayer = window.adobeDataLayer || [];

window.adobeDataLayer.push({
  email: "jenny.smith@rokt.com",
  user: { firstname: "Jenny", lastname: "Smith" },
  ecommerce: { transaction: { amount: "12.36" } },
  event: "page loaded",
});

データ要素の特定

データ要素はAdobe Experience Platformに設定され、データレイヤーと一致します。データ要素についての詳細は、Adobe Experience 開発者ガイドを参照してください。

ページ上のデータレイヤーの構造は、Adobe Experience Platformのデータ要素名に影響を与えます。以下の例を参照してください。データレイヤーの一部としてデータコレクターオブジェクトを使用する場合、単にパス内でドット表記を使用して、データ要素に取り込みたいオブジェクトとプロパティを参照します。例えば、_myData.pageNameやadobeDataLayer.pageNameなどです。

データレイヤースクリプトの例 1:

window.adobeDataLayer.push({
  email: "jenny.smith@rokt.com",
});

データレイヤーパス名: adobeDataLayer.email

データレイヤースクリプトの例 2:

window.adobeDataLayer.push({
  user: {
    firstname: "Jenny",
  },
});

データレイヤーパス名: adobeDataLayer.user.firstname

データレイヤースクリプトの例 3:

window.adobeDataLayer.push({
  ecommerce: {
    transaction: {
      amount: "12.36",
    },
  },
});

データレイヤーパス名: adobeDataLayer.ecommerce.transaction.amount

注記

JavaScript 変数データ要素タイプは、配列の参照をブラケットではなくドットとして扱うため、adobeDataLayer.user[0].firstnameとしてfirstnameデータ要素を参照することはできません。

データ要素の追加

1. データ要素タブに移動し、データ要素の追加を選択します。

2. 変数に名前を付け、拡張機能としてCoreを選択します。

   • データ要素タイプには、開発者が値を保存した方法を使用します
   • メモリ内の値にはJavaScript 変数を使用します（例: adobeDataLayer.email）
   • 値がブラウザのlocalStorageに永続化されている場合のみローカルストレージを使用します

3. 開発者によって設定されたデータレイヤーの変数名と一致するパス名を入力します。

推奨されるスクリーンビューイベント属性

Roktがパートナーに送信を推奨する属性の例には、screen_name、url、およびreferring-pageがあります。これらの属性をデータ要素として追加するには:

1. データ要素タブに移動し、データ要素を追加を選択します。

2. 変数に名前を付け、拡張機能としてCoreを選択します。

   • screen_nameの場合:
     • データ要素タイプをカスタムコードに設定
     • エディタを開くをクリックし、次の行を貼り付けます:

     return location.pathname.split("/").filter(Boolean).pop() || "home";

   • urlの場合:
     • データ要素タイプをページ情報に設定
     • 属性のドロップダウンで、URLを選択
   • referring-pageの場合:
     • データ要素タイプをページ情報に設定
     • 属性のドロップダウンで、リファラーを選択

3. 保存をクリックし、ライブラリに保存 これで、これらのデータ要素をログページビューカスタム属性で参照できます。