広告主向けAdobe Experience Platform統合

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

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

ルールの作成

Rokt SDKの初期化

Adobe Experience Platformにサインインします。
プロパティの概要ページから、Rules タブを開き、Add Rule を選択します。
ルールに Rokt Initialization のような説明的な名前を付け、ルールを発火させるイベントを作成します。
- 各サイトは異なりますが、RoktではすべてのページにSDKスクリプトを含めることを推奨しています。これにより、オファーの配信遅延を最小限に抑え、ユーザー識別の精度を最大化します。
アクションを作成し、Core を拡張機能として選択し、Custom Code をアクションタイプとして選択します。
言語として 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を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') を使用してデータ要素にアクセスできます。
アクション設定で Keep Changes をクリックし、Save をクリックします。

ユーザーを識別

現行のユーザーをRoktに識別するためのルールも作成するべきです。このルールは、ユーザーがメールアドレスを提供するとすぐに発火されるようにサイトに組み込むことを確認してください。

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

注意

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

アクションを作成し、Core を拡張機能として選択し、Custom Code をアクションタイプとして選択します。
言語として 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アカウントマネージャーに相談してください。

アクションを作成し、拡張としてコアを選択し、アクションタイプとしてカスタムコードを選択します。
言語として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 developer guideを参照してください。

ページ上のデータレイヤーの構造は、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 データ要素を参照することは できません。

データ要素の追加

Data Elements タブに移動し、Add Data Element を選択します。
変数に名前を付け、拡張機能として Core を選択します。
- 開発者が Data Element Type 用に値をどのように保存したかを使用
- インメモリ値には JavaScript Variable を使用 (例: adobeDataLayer.email)
- 値がブラウザの localStorage に永続化されている場合のみ Local Storage を使用
開発者が設定したデータ層における変数名と一致するパス名を入力します。

Rokt は次の属性のために変数を作成することを推奨します:

email
firstname
lastname
zipcode
mobile
conversiontype
confirmationref
amount
currency

ルールの作成​

Rokt SDKの初期化​

ユーザーを識別​

ページビューの追跡​

プレースメントの挿入​

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

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

ルールの順序設定​

Adobe Experience Platformでの変数の設定​

データレイヤーの理解​

データ要素の特定​

データ要素の追加​