広告主向けのAdobe Experience Platform統合

このページでは、Rokt AdsをAdobe Experience Platformを使用して実装し、コンバージョンをキャンペーンにリンクすることでループを閉じる方法を説明します。コンバージョンを広告のエンゲージメントにリンクすることで、より正確なアトリビューション、リアルタイムの最適化、キャンペーンの測定を可能にします。

データレイヤーに基づいてAdobeでデータ要素を作成する方法と、Rokt SDKを初期化しコンバージョンを記録するルールを作成する方法を学びます。

ルールを作成する

Rokt SDKを初期化する

Adobe Experience Platformにサインインします。
プロパティの概要ページから、ルールタブを開き、ルールを追加を選択します。
ルールに説明的な名前を付けます。例えば、Rokt Initialization などとし、ルールを発火させるイベントを作成します。
- サイトはそれぞれ異なりますが、RoktはすべてのページにSDKスクリプトを含めることを推奨しています。これにより、オファーの配信遅延が最小限に抑えられ、ユーザー識別の精度が最大化されます。
アクションを作成し、Coreを拡張機能として選択し、カスタムコードをアクションタイプとして選択します。
言語としてHTMLを選択し、以下のスニペットを貼り付けます:

<script>
// Rokt APIキーを入力
const API_KEY = "YOUR_API_KEY";

// ファーストパーティドメインを設定した場合、デフォルトのapps.rokt-apiドメインの代わりにDOMAINの値として設定
const ROKT_DOMAIN = "https://apps.rokt-api.com";

// SDKの設定を行う
window.mParticle = {
    config: {
        // isDevelopmentModeでデータ環境を指定:
        // 統合をテスト中の場合はisDevelopmentModeをtrueに設定。
        // 統合が本番データに対応している場合はisDevelopmentModeをfalseに設定。
        isDevelopmentMode: true,
        // 現在のユーザーを識別:
        // ユーザーのメールアドレスがある場合は、`identifyRequest`内の`userIdentities`オブジェクトに含めます。
        identifyRequest: {
            userIdentities: {
                // サンプル変数{email}をユーザーのメールを格納する変数に置き換えることを確認
                email: _satellite.getVar('email'),
                // ハッシュ化されたメールアドレスは`other`フィールドに渡す
                other: _satellite.getVar('hashed_email')
            },
        }
    },
};

// SDKを読み込む
(function(e) { window.mParticle = window.mParticle || {}; window.mParticle.EventType = { Unknown: 0, Navigation: 1, Location: 2, Search: 3, Transaction: 4, UserContent: 5, UserPreference: 6, Social: 7, Other: 8, Media: 9 }; window.mParticle.eCommerce = { Cart: {} }; window.mParticle.Identity = {}; window.mParticle.Rokt = {}; window.mParticle.config = window.mParticle.config || {}; window.mParticle.config.rq = []; window.mParticle.config.snippetVersion = 2.7; window.mParticle.ready = function(e) { window.mParticle.config.rq.push(e); }; ["endSession", "logError", "logBaseEvent", "logEvent", "logForm", "logLink", "logPageView", "setSessionAttribute", "setAppName", "setAppVersion", "setOptOut", "setPosition", "startNewSession", "startTrackingLocation", "stopTrackingLocation"].forEach(function(e) { window.mParticle[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift(e); window.mParticle.config.rq.push(t); }; }); ["setCurrencyCode", "logCheckout"].forEach(function(e) { window.mParticle.eCommerce[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("eCommerce." + e); window.mParticle.config.rq.push(t); }; }); ["identify", "login", "logout", "modify"].forEach(function(e) { window.mParticle.Identity[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Identity." + e); window.mParticle.config.rq.push(t); }; }); ["selectPlacements","hashAttributes","setExtensionData","use","getVersion","terminate"].forEach(function(e) { window.mParticle.Rokt[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Rokt." + e); window.mParticle.config.rq.push(t); }; }); var t = window.mParticle.config.isDevelopmentMode ? 1 : 0, n = "?env=" + t, a = window.mParticle.config.dataPlan; if (a) { var o = a.planId, r = a.planVersion; o && (r && (r < 1 || r > 1e3) && (r = null), n += "&plan_id=" + o + (r ? "&plan_version=" + r : "")); } var i = window.mParticle.config.versions, s = []; i && Object.keys(i).forEach(function(e) { s.push(e + "=" + i[e]); }); var c = document.createElement("script"); c.type = "text/javascript"; c.async = !0; window.ROKT_DOMAIN = ROKT_DOMAIN || 'https://apps.rokt-api.com'; mParticle.config.domain = ROKT_DOMAIN.split('//')[1]; c.src = ROKT_DOMAIN + "/js/v2/" + e + "/app.js" + n + "&" + s.join("&"); var l = document.getElementsByTagName("script")[0]; l.parentNode.insertBefore(c, l); })(API_KEY);
</script>

adobe-edit-html

設定を入力します:
- YOUR_API_KEY を、Rokt アカウントマネージャーから提供された API キーに置き換えます。
- ファーストパーティドメイン統合のためにカスタムドメインを設定した場合は、https://apps.rokt-api.com を新しいドメインに置き換えます。
- アクションを本番データで使用する準備ができたら、isDevelopmentMode を false に設定します。アクションをテスト中の場合は、true のままにしておきます。
- email が、ユーザーのハッシュされていないメールアドレスを保存するために作成したデータ要素に設定されていることを確認します。上記のスニペット例では、_satellite.getVar('email') を使用してデータ要素にアクセスできます。
アクション設定で 変更を保持 をクリックし、保存します。

ユーザーを識別する

現在のユーザーを Rokt に識別するルールも作成する必要があります。このルールをサイトに含め、ユーザーがメールアドレスを提供するとすぐに発火するようにします。

プロパティの概要ページから、ルール タブを開き、ルールを追加 を選択します。
ルールに Rokt Identify などの説明的な名前を付け、ルールを発火させるイベントを作成します。
- ユーザーがメールアドレスを提供するとすぐにこのルールが発火するようにイベントを設定します。使用するイベントは、特定の統合によって異なります。

:::注意ユーザー識別ルールの正確なイベント設定は、統合によって異なります。イベントをログに記録する前にユーザーが正常に識別されるようにこのルールを実装する最適な方法について質問がある場合は、Rokt アカウントマネージャーに相談してください。 :::

アクションを作成し、コアを拡張機能として選択し、カスタムコード をアクションタイプとして選択します。
言語として HTML を選択し、次のスニペットを貼り付けます:

<script>
const identifyRequest = {
    userIdentities: {
        // 生のハッシュされていないメールを使用している場合は、それを `email` フィールドに渡します
        email: _satellite.getVar('email'),
        // ハッシュされたメールを使用している場合は、それを `other` フィールドに渡します
        other: _satellite.getVar('hashed_email')
    }
};
window.mParticle.Identity.identify(identifyRequest);
</script>

ユーザーの生のハッシュされていないメールアドレスを Rokt に送信する場合は、それを email に設定します。ハッシュされたメールアドレスを送信する場合は、それを other に設定します。例の変数名 (email と hashed-email) を、ユーザーのメールアドレスを保存するために作成したデータ要素名に置き換えてください。
アクション設定で 変更を保持 をクリックし、保存します。

ページビューのトラッキング

広告主は、各ページが読み込まれるとすぐにページビューのルールを追加することで、コンバージョンファネルの各ページのビューをトラッキングする必要があります。

プロパティの概要ページから、ルール タブを開き、ルールを追加 を選択します。
ルールにわかりやすい名前を付けます。例えば、Rokt Page View などとし、ルールを発火させるイベントを作成します。
- 各ページが読み込まれるとすぐにこのルールが発火するようにイベントを設定します。使用するイベントは、特定の統合によって異なります。

注意

ページビュールールの正確なイベント設定は、統合によって異なります。ページがトラッキングされるようにこのルールを最適に実装する方法について質問がある場合は、Roktアカウントマネージャーに相談してください。

アクションを作成し、拡張機能として Core を選択し、アクションタイプとして Custom Code を選択します。
言語として HTML を選択し、次のスニペットを貼り付けます：

<script>
window.mParticle.ready(
  function() {
    mParticle.logPageView(
        // ページ名
        "page view",
        // ページを説明する属性を含むオブジェクト
        {
            "url": window.location.toString(),
            "product": "Example Product Name",
            // 他のページ固有の属性をキー/値ペアとして追加
            "custom-attribute-name": "custom-attribute-value"
        }
    );
  }
);
</script>

Web SDKの logPageView メソッドは2つの引数を取ります：

ページ名：読み込まれているページの名前の文字列
カスタム属性：ページに関する情報を含むキー/値ペアのオブジェクト

ページ名フィールドは一般的なページ名に設定する必要があります。例えば、eコマースのウェブサイトには数百の製品詳細ページがあるかもしれません。これらを正しくログに記録するには、一般的な名前（例："Product Detail Page"）を使用し、ページのURLや他の属性を属性としてログに記録する必要があります。

プレースメントの挿入

Rokt SDKを初期化するためのアクションを作成することに加えて、Rokt Ecommerceの統合にはプレースメントを挿入するためのアクションも必要です。

プロパティの概要ページから、ルール タブを開き、ルールを追加 を選択します。
ルールにわかりやすい名前を付けます。例えば、Rokt Add Placement などとし、ルールを発火させるイベントを作成します。
- 次のステップは、サイトがマルチページアプリケーション（MPA）かシングルページアプリケーション（SPA）かによって異なります：
- マルチページアプリケーションのトリガー設定
  1. イベントタイプを Core → DOM Ready または Core → Page Bottom に設定します。
  2. 条件の下で、Core → Path Without Query String または Page URL の条件を追加します。
  3. アクションを発火させるページを識別する一致ルールを入力します。例えば、確認ページが example.com/cart/payment/confirmation の場合、識別パラメータは cart、payment、または confirmation のいずれかにすることができます。
- シングルページアプリケーションのトリガー設定
  1. イベントタイプを Core → History Change に設定します。
  2. 条件の下で、Core → Page URL の条件を追加します。
  3. アクションを発火させるページを識別する一致ルールを入力します。例えば、確認ページが example.com/cart/payment/confirmation の場合、識別パラメータは cart、payment、または confirmation のいずれかにすることができます。
アクションを作成し、拡張機能として Core を選択し、アクションタイプとして Custom Code を選択します。
言語として HTML を選択し、次のスニペットを貼り付けます：

<script>

window.mParticle.ready(
  function() { 
    var selection = window.mParticle.Rokt.selectPlacements({
      attributes: {
        "email": _satellite.getVar('email'),
        "firstname": _satellite.getVar('firstname'),
        "lastname": _satellite.getVar('lastname'),
        "mobile": _satellite.getVar('mobile'),
        "age": _satellite.getVar('age'),
        "gender": _satellite.getVar('gender'),
        "billingaddress1": _satellite.getVar('billingaddress1'),
        "billingaddress2": _satellite.getVar('billingaddress2'),
        "confirmationref": _satellite.getVar('confirmationref'),
        "billingzipcode": _satellite.getVar('billingzipcode'),
        "amount": _satellite.getVar('amount'),
        "paymenttype": _satellite.getVar('paymenttype'),
        "ccbin": _satellite.getVar('ccbin'),
        "country": _satellite.getVar('country'),
        "language": _satellite.getVar('language'),
        "currency": _satellite.getVar('currency'),
        "shippingtype": _satellite.getVar('shippingtype')
      }
    });
  }
);

</script>

サイトのデータレイヤーに基づいて作成した変数で、Roktに転送したい各属性を設定します。

注意

スニペット内の例の属性を自分のデータ要素に置き換えることを忘れないでください。

アクション構成で変更を保持をクリックし、保存します。

ルールの順序

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

初期化スニペットに次のカスタムイベントを追加します：

window.dispatchEvent(new Event("roktReady"));

後続のルールで、カスタムイベントイベントタイプを持つイベントを追加します
イベントタイプを設定したイベント名に設定します。
ルールに関連する条件を追加します

Adobe Experience Platformでの変数の設定

データレイヤーの理解

データレイヤーは、開発者によってウェブページに実装されている必要があります。

データレイヤーは、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変数データ要素タイプは、配列参照をブラケットではなくドットとして扱うため、firstnameデータ要素をadobeDataLayer.user[0].firstnameとして参照することはできません。

データ要素の追加

データ要素 タブに移動し、データ要素の追加 を選択します。
変数に名前を付け、拡張機能として Core を選択します。
- データ要素タイプ には、開発者が値を保存した方法を使用します
- メモリ内の値には JavaScript 変数 を使用します（例: adobeDataLayer.email）
- 値がブラウザの localStorage に永続化されている場合のみ ローカルストレージ を使用します
開発者がデータレイヤー設定で使用した変数名に一致するパス名を入力します。

Rokt は、以下の属性の変数を作成することを推奨します:

email
firstname
lastname
zipcode
mobile
conversiontype
confirmationref
amount
currency

ルールを作成する​

Rokt SDKを初期化する​

ユーザーを識別する​

ページビューのトラッキング​

プレースメントの挿入​

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

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

ルールの順序​

Adobe Experience Platformでの変数の設定​

データレイヤーの理解​

データ要素の特定​

データ要素の追加​