Eコマース向けGoogleタグマネージャー統合

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

Googleタグマネージャーでデータレイヤーに基づいた変数を作成し、Rokt SDKを初期化してプレースメントを挿入するタグを作成する方法を学びます。

データレイヤーの理解

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

データレイヤーは、Googleタグマネージャー（GTM）と共有したい情報をすべて含むオブジェクトです。イベントや変数などの情報はデータレイヤーを介してGoogleタグマネージャーに共有でき、変数の値に基づいてGoogleタグマネージャーでトリガーを設定できます（例：purchase_total > $100の場合にリマーケティングタグを発火）。変数の値は他のタグにも共有できます（例：purchase_totalをタグの値フィールドに追加）。

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

データレイヤーの例：

window.dataLayer = window.dataLayer || []

window.dataLayer.push({
    'email':'jenny.smith@rokt.com',
    'user': {
        'firstname' : 'Jenny',
        'lastname' : 'Smith'
    },
    'ecommerce': {
        'transaction': {
            'amount' : '12.36'
        }
    },
    'event':'gtm.transactionComplete'
});

変数名の特定

変数はGTMアカウントで設定され、データレイヤーに一致します。変数に関する詳細は、GTM開発者ガイドを参照してください。

ページ上のデータレイヤーの構造は、GTMでのデータレイヤー変数名に影響します。

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

window.dataLayer.push({
    'email':'jenny.smith@rokt.com'
});

データレイヤー変数名: email

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

window.dataLayer.push({
    'user': {
        'firstname' : 'Jenny'
    }
});

データレイヤー変数名: user.firstname

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

window.dataLayer.push({
    'ecommerce': {
        'transaction': {
            'amount' : '12.36'
        }
    }
});

データレイヤー変数名: ecommerce.transaction.amount

Google タグマネージャーで変数を作成する

Google タグマネージャーコンテナにログインします。
変数をクリックします。
ユーザー定義変数 の下で、新規をクリックします。
変数の名前を入力します。
変数タイプを選択して設定を開始... をクリックします。
ページ変数 の下で データレイヤ変数 を選択します。
データレイヤ変数名 を入力します。データレイヤ構造に基づいて変数名を特定するには、上記の例を参照してください。
保存をクリックします。

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

email
firstname
lastname
mobile
age
gender
billingaddress1
billingaddress2
confirmationref
billingzipcode
amount
paymenttype
ccbin
country
language
currency

タグを作成する

Rokt SDK の各コア機能を処理するために個別のタグを作成する必要があります。これには以下が含まれます:

Rokt SDK の初期化
ユーザーの識別
ページビューのログ記録
プレースメントの挿入

これらのタグが実行されるタイミングを定義する特定のトリガーも設定する必要があります。各タグの指示に従ってください。

:::注意識別、ページビュー、およびプレースメント挿入タグには、初期化後に発生する異なるトリガーを使用してください。同じトリガーを複数の Rokt タグに割り当てることを避け、同時に実行されないようにします。初期化スクリプトは、初期化が完了するとカスタムイベント roktInitComplete をデータレイヤにプッシュします。このイベントを後続の Rokt タグのトリガーに使用してください。 :::

Rokt SDK を初期化する

SDK を初期化するためのタグを作成するには:

Google タグマネージャーコンテナにログインし、左側のナビゲーションでタグをクリックします。
新規をクリックし、タグ設定 を選択します。
タグ設定 を選択し、カスタムの下で カスタム HTML タグ を選択します。
タグの説明的な名前を入力します。例: "Initialize Rokt"。
HTML 入力フィールドに以下のスニペットを貼り付けます:

<script type="text/javascript">

// Rokt API キーを入力してください
var API_KEY = "YOUR_API_KEY";

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


// isDevelopmentMode でデータ環境を指定します:
// 統合をテスト中の場合は isDevelopmentMode を true に設定します。
// 統合が本番データの準備ができている場合は isDevelopmentMode を false に設定します。
var isDevelopmentMode = true;

// SDK 設定を設定します
window.mParticle = {
    config: {
    	isDevelopmentMode: isDevelopmentMode,
    	logLevel: isDevelopmentMode ? 'verbose' : 'warning',
        // サイトが複数のサブドメインを使用している場合（例: mysite.com & checkout.mysite.com）、useCookieStorage を true に設定します。デフォルト値は 'false' です。
        useCookieStorage: 'false',
        // 現在のユーザーを識別します:
        // 初期化時にユーザーのメールアドレスがある場合は、以下に示すように `identifyRequest` 内の `userIdentities` というオブジェクトに含めます。ない場合は、identityRequest オブジェクトを削除できます。
        identifyRequest: {
            userIdentities: {
                // サンプル変数 {email} をユーザーのメールを保存するために作成した変数に置き換えてください
                email: {{email}},
                // ハッシュ化されたメールアドレスは `other` フィールドに渡す必要があります
                other: {{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.6; 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"].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);

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'roktInitComplete' });
</script>

注記

初期化スクリプトは、初期化が完了したときにカスタムイベント roktInitComplete をデータレイヤーにプッシュします。このイベントを使用して、後続のRoktカスタムタグのトリガーを設定してください。

設定を入力します:
- YOUR_API_KEY を、Roktアカウントマネージャーから提供されたAPIキーに置き換えます。
- タグを本番データで使用する準備ができたら、isDevelopmentMode を false に設定します。まだタグをテストしている場合は、true のままにしておいてください。
- email が、ユーザーのハッシュ化されていないメールアドレスを保存するために作成した変数に設定されていることを確認してください。上記のスニペットでは、変数名は {email} です。
Triggering メニューで、+ ボタンをクリックしてトリガーを設定するか、利用可能なオプションから選択します。
All Pages を選択して、初期化タグがすべてのページで発火するようにし、必要に応じて例外を追加します。
Save をクリックします。

ユーザーの識別

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

Google Tag Managerコンテナの左側のナビゲーションで Tags をクリックします。
New をクリックし、Tag Configuration を選択します。カスタムの下で、Custom HTML Tag を選択します。
タグに「Identify User」のような説明的な名前を入力します。
HTML入力フィールドに、以下のスニペットを貼り付けます:

<script type="text/javascript">

window.mParticle.ready(
    function() {
        var identifyRequest = {
            userIdentities: {
            // 生のハッシュ化されていないメールを使用している場合は、それを `email` フィールドに渡します
            email: {{email}},

            // ハッシュ化されたメールを統合している場合は、それを `other` フィールドに渡します
            other: {{hashed-email}}
            }
        };
        mParticle.Identity.identify(identifyRequest);
    }
);

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'roktIdSyncComplete' });

</script>

ユーザーの生のハッシュ化されていないメールアドレスをRoktに送信する場合は、キーを email に設定します。ハッシュ化されたメールアドレスを送信する場合は、キーを other に設定します。例の変数名（{{user.email}} および {{user.hashed-email}}）を、ユーザーのメールアドレスを保存するために作成したデータレイヤー変数に置き換えることを確認してください。
ユーザーがメールアドレスを提供したらすぐにこのタグを発火するトリガーを設定します。使用するトリガーは特定の統合に依存しますが、（例として）ユーザーがフォーム送信を通じてメールアドレスを提供したときにタグを発火するトリガーを作成することができます:
- Trigger Configuration から、Form Submission Email を選択します。
- トリガーに入り、トリガー設定ページに到達したら、編集アイコンをクリックします。
- This trigger fires on の下で、Some Forms を選択します。
- ユーザーのメールアドレスを保存するために作成したデータレイヤー変数を選択します。
- 条件として、matches RegEx を選択し、正規表現 .+@.+\..+ を入力します。

注意

ユーザー識別タグの正確なトリガー設定は、統合に依存します。さらに、識別タグの前に初期化タグが発火することを確認してください。ユーザーがイベントをログに記録する前に正常に識別されるように、このタグをどのように実装するのが最適かについて質問がある場合は、Roktアカウントマネージャーに相談してください。

注記

識別スクリプトは、識別呼び出しが成功した後に roktIdSyncComplete というカスタムイベントをデータレイヤーにプッシュします。このイベントを使用して後続のタグをトリガーできます。

ページビューのログ記録

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

Google Tag Manager コンテナの左側のナビゲーションで Tags をクリックします。
New をクリックし、Tag Configuration を選択します。カスタムの下で、Custom HTML Tag を選択します。
タグに「Log Page View」などの説明的な名前を入力します。
HTML エントリーフィールドに、以下のスニペットを貼り付けます:

<script type="text/javascript">

// SDKが完全に読み込まれるのを待ってからイベントをログに記録
window.mParticle.ready(function() {
   mParticle.logPageView(
           // イベント名: "page view" はログに記録されるイベントの種類を識別
           "page view",
           {
              // URLパスの最後のセグメントをスクリーン名としてキャプチャ
              // 例: "/products/shoes" → "shoes"。パスが空の場合はデフォルトで "home"。
              "screen_name": location.pathname.split("/").filter(Boolean).pop() || "home",

              // 現在のページの完全なURLを記録（プロトコル、パス、クエリ、ハッシュを含む）
              "url": window.location.toString(),

              // ユーザーをこのページに紹介したページのURLをキャプチャ
              // 利用可能な場合。これにより、ページ間またはサイト間のユーザーのナビゲーションを追跡できます。
              "referring-page": document.referrer
           }
   );
});

</script>

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

ページ名: 読み込まれているページの名前を示す文字列

カスタム属性: ページに関する情報を含むキー/値ペアのオブジェクト

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

コンバージョンファネル内のすべてのページでこのタグが発火するようにトリガーを設定します（初期化タグの後）。

注記

初期化とページビューのログをすべてのページで発火する1つのタグにまとめるか、すべてのページで roktInitComplete カスタムイベントトリガーを使用することをお勧めします。

注意

ページビューのログタグの正確なトリガー設定は、統合によって異なります。さらに、初期化タグがページビューのログタグの前に発火することを確認してください。このタグをどのように実装するのが最適かについて質問がある場合は、Roktアカウントマネージャーに相談してください。

プレースメントを挿入する

ROKT SDK を初期化するタグを作成することに加えて、Rokt の e コマース統合にはプレースメントを挿入するタグも必要です。

Google タグマネージャーコンテナの左側のナビゲーションからタグをクリックします。
新規をクリックし、タグ設定 を選択します。カスタムの下で、カスタム HTML タグ を選択します。
タグの説明的な名前を入力します。例: "Insert Placement"。
HTML エントリフィールドに、以下のスニペットを貼り付けます:

<script type="text/javascript">

window.mParticle.ready(
    function() {
        var selection = window.mParticle.Rokt.selectPlacements({
            identifier: "yourPageIdentifier",
            attributes: {
                "email": {email},
                "firstname": {user.firstname},
                "lastname": {user.lastname},
                "mobile": {user.mobile},
                "age": {user.age},
                "gender": {user.gender},
                "billingaddress1": {user.billingaddress1},
                "billingaddress2": {user.billingaddress2},
                "confirmationref": {ecommerce.transaction.confirmationref},
                "billingzipcode": {ecommerce.transaction.billingzipcode},
                "amount": {ecommerce.transaction.amount}, // 例: 300.5 のような10進数の取引金額
                "paymenttype": {ecommerce.transaction.paymenttype}, // 例: ギフトカード | チェース、ビザ
                "ccbin": {ecommerce.transaction.ccbin}, // 例: 372888 のようなクレジットカード BIN
                "country": {ecommerce.transaction.country}, // ISO Alpha-2 国コード
                "language": {ecommerce.transaction.language}, // ISO 639-1 2 文字の言語コード
                "currency": {ecommerce.transaction.currency}, // 例: USD のような取引通貨
                // ここに取引に関連する追加属性を渡すこともできます
                // 属性の完全なリストについては、https://docs.rokt.com/developers/integration-guides/rokt-ads/web-sdk/attributes#core-attributes を参照してください
                shippingtype: {ecommerce.transaction.shippingtype}
            }
        });
    }
);

</script>

selectPlacements 呼び出しで Rokt に転送したい各属性を、サイトのデータレイヤーに基づいて作成した変数で設定します。
タグがトリガーされるタイミングを設定するには、トリガー を選択します。
新しいトリガーを追加するには、+ ボタンをクリックします。
トリガー設定 をクリックします。次の手順は、サイトがマルチページアプリケーション (MPA) かシングルページアプリケーション (SPA) かによって異なります:
- マルチページアプリケーションのトリガー設定
  1. リストから カスタムイベント を選択します。
  2. イベント名として roktInitComplete を入力します。ユーザーがプレースメントイベントの挿入まで不明な場合は、イベント名として roktInitComplete の代わりに roktIdSyncComplete を使用します。
  3. トリガー発火ルールを 一部のカスタムイベント に変更します。
  4. タグを発火させる各ユニークページを識別する URL パラメータを入力します。たとえば、確認ページが example.com/cart/payment/confirmation の場合、識別パラメータは cart、payment、または confirmation のいずれかになります。
  注記
  ユーザーがコンバージョンイベントまで不明な場合、イベントトリガーとして カスタムイベント roktIdSyncComplete を使用します。
- シングルページアプリケーションのトリガー設定
  1. リストから 履歴の変更 を選択します。
  2. トリガー発火ルールを 一部の履歴の変更 に変更します。
  3. タグを発火させるページを識別する URL パラメータを入力します。たとえば、確認ページが example.com/cart/payment/shipping の場合、識別パラメータは cart、payment、または shipping のいずれかになります。
保存をクリックします。

データレイヤーの理解​

変数名の特定​

Google タグマネージャーで変数を作成する​

タグを作成する​

Rokt SDK を初期化する​

ユーザーの識別​

ページビューのログ記録​

プレースメントを挿入する​

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

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