メインコンテンツまでスキップ

広告主向けGoogleタグマネージャー統合

このページでは、Rokt AdsをGoogleタグマネージャーと共に実装し、コンバージョンをキャンペーンにリンクさせる方法を説明します。コンバージョンを広告エンゲージメントにリンクさせることで、より正確なアトリビューション、リアルタイムの最適化、キャンペーンの測定が可能になります。

データレイヤーに基づいてGoogleタグマネージャーで変数を作成し、Rokt SDKを初期化しコンバージョンを記録するためのタグを作成する方法を学びます。

データレイヤーの理解​

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

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

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

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

  • email
  • firstname
  • lastname
  • zipcode
  • mobile
  • conversiontype
  • confirmationref
  • amount
  • currency

タグを作成する​

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

  • Rokt SDK の初期化
  • ユーザーの識別
  • ページビューのログ記録
  • コンバージョンのログ記録

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

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

Rokt SDK を初期化する​

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

  1. Google タグ マネージャー コンテナにログインし、左側のナビゲーションで タグ をクリックします。
  2. 新規 をクリックし、タグ設定 を選択します。 Google タグ マネージャー
  3. タグ設定 を選択し、カスタムの下で カスタム HTML タグ を選択します。
  4. タグの説明的な名前を入力します。例: "Initialize Rokt"。
  5. 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カスタムタグのトリガーを設定します。

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

ユーザーの識別​

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

  1. Google Tag Managerコンテナの左側のナビゲーションから Tags をクリックします。
  2. New をクリックし、Tag Configuration を選択します。カスタムの下で、Custom HTML Tag を選択します。
  3. タグに「Identify User」のような説明的な名前を入力します。
  4. 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>

  1. ユーザーの生のハッシュ化されていないメールアドレスをRoktに送信する場合、キーを email に設定します。ハッシュ化されたメールアドレスを送信する場合、キーを other に設定します。例の変数名 ({{user.email}} と {{user.hashed-email}}) を、ユーザーのメールアドレスを保存するために作成したデータレイヤー変数に置き換えることを確認します。

  2. ユーザーがメールアドレスを提供するとすぐにこのタグが発火するようにトリガーを設定します。使用するトリガーは特定の統合に依存しますが、（例として）ユーザーがフォーム送信を通じてメールアドレスを提供したときにタグを発火させるトリガーを作成することができます：

    • Trigger Configuration から、Form Submission Email を選択します。
    • トリガーに入り、トリガー設定ページにアクセスし、編集アイコンをクリックします。
    • This trigger fires on の下で、Some Forms を選択します。
    • ユーザーのメールアドレスを保存するために作成したデータレイヤー変数を選択します。
    • 条件として、matches RegEx を選択し、正規表現 .+@.+\..+ を入力します。

    Google Tag Manager

注意

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

注記

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

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

ユーザーのトランザクションジャーニーの各ページが読み込まれるとすぐに、ページビューをログに記録する必要があります。ページビューをログに記録するタグを作成するには、以下の手順に従ってください。

  1. Google タグ マネージャー コンテナの左側のナビゲーションで タグ をクリックします。
  2. 新規 をクリックし、タグ設定 を選択します。カスタムの下で、カスタム HTML タグ を選択します。
  3. タグに「Log Page View」などの説明的な名前を入力します。
  4. 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. このタグがコンバージョンファネル内のすべてのページで（初期化タグの後に）発火するようにトリガーを設定します。
注記

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

注意

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

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

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

  1. Google タグ マネージャー コンテナの左側のナビゲーションで タグ をクリックします。
  2. 新規 をクリックし、タグ設定 を選択します。カスタムの下で、カスタム HTML タグ を選択します。
  3. カスタムの下で、カスタム HTML タグ を選択します。
  4. タグに「コンバージョン」のような説明的な名前を入力します。
  5. HTML 入力フィールドに次のスニペットを貼り付けます:

<script type="text/javascript">

window.mParticle.ready(
  function() {
        var currentUser = mParticle.Identity.getCurrentUser();
        currentUser.setUserAttribute("firstname", {user.firstname});
        currentUser.setUserAttribute("lastname", {user.lastname});
        currentUser.setUserAttribute("zipcode", {user.zipcode});
        currentUser.setUserAttribute("mobile", {user.mobile});

        mParticle.logEvent(
        "conversion", // イベントの名前
        mParticle.EventType.Transaction, // イベントのタイプ
        {
            "conversiontype": {ecommerce.transaction.conversiontype}, // コンバージョンの種類
            "confirmationref": {ecommerce.transaction.confirmationref}, // トランザクション ID / 注文 ID
            "amount": {ecommerce.transaction.amount}, // トランザクションの金額 例: 300.5
            "currency": {ecommerce.transaction.currency} // トランザクションの通貨 例: USD
        }
    );
  }
);

</script>

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

  2. タグがトリガーされるタイミングを設定するには、トリガー を選択します。

  3. 新しいトリガーを追加するには、+ ボタンをクリックします。

  4. トリガー設定 をクリックします。次のステップは、サイトがマルチページ アプリケーション (MPA) かシングルページ アプリケーション (SPA) かによって異なります:

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

      1. リストから カスタムイベント を選択します。
      2. イベント名として roktInitComplete を入力します。ユーザーが挿入配置イベントまで不明な場合は、イベント名として roktInitComplete の代わりに roktIdSyncComplete を使用します。
      3. トリガー発火ルールを 一部のカスタムイベント に変更します。
      4. タグを発火させる各ユニークページを識別する URL パラメータを入力します。たとえば、確認ページが example.com/cart/payment/confirmation の場合、識別パラメータは cart、payment、または confirmation のいずれかにできます。

      Google タグ マネージャー

      注記

      ユーザーがコンバージョンイベントまで不明な場合は、イベントトリガーとして カスタムイベント roktIdSyncComplete を使用します。

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

      1. リストから 履歴変更 を選択します。
      2. トリガー発火ルールを 一部の履歴変更 に変更します。
      3. タグを発火させるページを識別する URL パラメータを入力します。たとえば、確認ページが example.com/cart/payment/confirmation の場合、識別パラメータは cart、payment、または confirmation のいずれかにできます。

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

この記事は役に立ちましたか？
Last updated Nov 24, 2025