広告主向けのAdobe Experience Platform統合

このページでは、Adobe Experience Platformを使用してRokt Adsを実装し、コンバージョンをキャンペーンにリンクさせてループを閉じる方法を説明します。コンバージョンを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で指定します:
        // 統合をまだテスト中の場合は、isDevelopmentModeをtrueに設定します。
        // 統合が本番データの準備ができている場合は、isDevelopmentModeをfalseに設定します。
        isDevelopmentMode: true,
        // 現在のユーザーを識別します:
        // ユーザーのメールアドレスを持っている場合、以下に示すように`identifyRequest`内の`userIdentities`というオブジェクトにそれを含めてください。
        identifyRequest: {
            userIdentities: {
                // サンプル変数{email}をユーザーのメールを保存するために作成した変数に置き換えてください
                email: _satellite.getVar('email'),
                // ハッシュ化されたメールアドレスは`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 Rule に使用する正確なイベント構成はあなたの統合に依存します。イベントのログを取る前にユーザーを正しく識別するための最適な方法について質問がある場合は、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のアカウントマネージャーにお問い合わせください。

アクションを作成し、拡張機能として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コマースウェブサイトには何百もの商品詳細ページがあるかもしれません。これらを正しく記録するには、一般的な名前（例：「商品詳細ページ」）を使用し、URLや他のページの属性を属性として記録する必要があります。

コンバージョンをログに記録する

Rokt広告主の統合では、Rokt SDKを初期化するためのルールを作成することに加え、コンバージョンをログに記録するルールも必要です。

プロパティの概要ページから、ルールタブを開き、ルールの追加を選択します。
Rokt Log Conversion などのわかりやすい名前をルールに付け、ルールを発火させるためのイベントを作成します。
- 次の手順は、サイトがマルチページアプリケーション (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 currentUser = mParticle.Identity.getCurrentUser();
        currentUser.setUserAttribute("firstname", _satellite.getVar('first_name'));
        currentUser.setUserAttribute("lastname", _satellite.getVar('last_name'));
        currentUser.setUserAttribute("zipcode", _satellite.getVar('zipcode'));
        currentUser.setUserAttribute("mobile", _satellite.getVar('mobile'));

        mParticle.logEvent(
        "conversion", // イベントの名前
        mParticle.EventType.Transaction, // イベントタイプ
        {
            "conversiontype": _satellite.getVar('conversiontype'), // コンバージョンのタイプ
            "confirmationref": _satellite.getVar('confirmationref'), // トランザクションID / 注文ID
            "amount": _satellite.getVar('amount'), // トランザクションの金額 例: 300.5
            "currency": _satellite.getVar('currency'), // 取引通貨 例: USD
        }
    );
  }
);
</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変数データ要素タイプは、配列参照をブラケットではなくドットとして扱うため、adobeDataLayer.user[0].firstnameとしてfirstnameデータ要素を参照することは_できません_。

データ要素の追加

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

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

email
firstname
lastname
zipcode
mobile
conversiontype
confirmationref
amount
currency

ルールを作成する​

Rokt SDKを初期化する​

ユーザーの識別​

ページビューの追跡​

コンバージョンをログに記録する​

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

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

ルールの順序​

Adobe Experience Platformでの変数の設定​

データレイヤーの理解​

データ要素の特定​

データ要素の追加​