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

Google Tag Manager 統合 for Ecommerce

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

以下のことを学びます:

  • サイトのデータレイヤーから値を読み取る GTM 変数を作成する
  • Rokt SDK を初期化し、ユーザーを識別し、Rokt プレースメントをレンダリングする GTM タグを作成する

始める前に始める前に への直接リンク

以下のことを確認してください:

  • サイトの正しい Google Tag Manager コンテナへのアクセス権がある
  • サイトにすでにデータレイヤーが実装されている（通常は開発者によって行われます）
  • Rokt API キーを持っている（Rokt アカウントマネージャーから提供されます）

データレイヤーの理解データレイヤーの理解 への直接リンク

開発者はサイトにデータレイヤーを実装する必要があります。

データレイヤーは、Google Tag Manager (GTM) と共有したいすべての情報を含むオブジェクトです。イベントや変数などの情報はデータレイヤーを介して Google Tag Manager に共有でき、変数の値に基づいて Google Tag Manager でトリガーを設定できます（例: 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 Tag Managerで変数を作成するGoogle Tag Managerで変数を作成する への直接リンク

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

Roktは、Roktに送信する予定の属性の変数を作成することを推奨します。例えば:

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

初期化とログページビュータグの設定初期化とログページビュータグの設定 への直接リンク

mParticle by Rokt - 初期化とログページビュータグは以下を行うことができます:

  • Rokt SDKの初期化
  • ページビューのログ記録

初期化とログページビュータグを作成するには、次の手順を使用します:

  1. コンテナの左側のナビゲーションでタグをクリックし、新規をクリックします。 Google Tag Manager
  2. タグ設定を選択します。
  3. コミュニティテンプレートギャラリーで他のタグタイプを発見するを選択します。 Google Tag Manager
  4. Roktを検索し、mParticle by Rokt - 初期化とログページビューを選択します。 Google Tag Manager
  5. タグの説明的な名前を入力します（例: [Rokt] 初期化とログページビュー）。
  6. 設定を入力します:
    • APIキー: Rokt APIキーを入力します（これはRoktアカウントマネージャーから提供されます）。
    • 開発モード: 統合をテストしている場合は、開発モードボックスをチェックします。タグを本番で使用する準備ができたら、このボックスのチェックを外します。
    • ページビューのログ: ページビューのログは、各ページが読み込まれるとすぐにページビューイベント（screen_name、url、参照ページなどの属性を含む）を記録します。
      • ページビューイベントの属性は、サイト上の属性に対応します（例: "payment"画面にいる場合、screen_nameはpaymentになります）。
      • ユーザーのトランザクションジャーニーの各ページが読み込まれるとすぐにページビューをログに記録する必要があります。
    • ログレベル: ドロップダウンから希望するログレベルを選択します（詳細、警告、なし）。
    • 機能的クッキーを許可しない: 機能的クッキーは、サイトやアプリの使いやすさとパフォーマンスを向上させるために使用されます。詳細については、クッキープリファレンスを参照してください。
    • ターゲティングクッキーを許可しない: ターゲティングクッキーは、広告、リターゲティング、マーケティングのパーソナライズを可能にするために使用されます。詳細については、クッキープリファレンスを参照してください。
    • クッキーストレージを使用する: SDK統合のためのクッキーストレージは、キー値（識別子や同意状態など）を保持するために使用され、SDKがページやセッションをまたいで継続性を維持できるようにします。

Google Tag Manager

  1. このGTMタグのトリガーを設定します。次のステップは、サイトがマルチページアプリケーション（MPA）かシングルページアプリケーション（SPA）かによって異なります:
  • マルチページアプリケーションのトリガー設定
    1. リストからすべてのページを選択します。
  • シングルページアプリケーションのトリガー設定
    1. リストからすべてのページと履歴変更を選択します。
注記

初期化とログページビュータグはすべてのページで読み込まれるべきです。正確なトリガー設定は実装によって異なる場合があります。実装戦略について質問がある場合は、Roktアカウントマネージャーにお問い合わせください。

  1. トリガーの説明的な名前を入力します（例: すべてのページまたは履歴変更）。
  2. 必要に応じて例外を追加します。
  3. 保存をクリックします。
注記

初期化とログページビュータグの実行の一環として、初期化が完了するとカスタムイベントroktInitCompleteがデータレイヤにプッシュされます。後続のmParticle by Rokt - イベントタグには、イベント名roktInitCompleteを持つGTMカスタムイベントトリガーを使用することを強く推奨します。

イベントタグの設定イベントタグの設定 への直接リンク

mParticle by Rokt - Events タグは以下を行うことができます:

  • ユーザーの識別
  • Rokt配置のレンダリング
  • ユーザーおよびイベント属性をRoktに送信

1つのイベントタグで複数のアクションを有効にすることができますが、いくつかの実装ではアクションごとに1つのGTMタグが必要です（例: Identity用のタグ1つとSelect Placements用のタグ1つ）。実装戦略について質問がある場合は、Roktのアカウントマネージャーにお問い合わせください。

注意

Initialization & Log Page Viewタグがすべてのイベントタグの前に実行されることを確認してください。トリガーでroktInitCompleteデータレイヤーイベントを使用して、イベントタグが初期化後にのみ発火するようにします。

新しいイベントタグを作成するたびに次の手順を使用します（例: Identity用の1つとSelect Placements用の1つ）：

  1. コンテナの左側のナビゲーションからTagsをクリックし、Newをクリックします。 Google Tag Manager
  2. Tag Configurationを選択します。
  3. Discover more tag types in the Community Template Galleryを選択します。 Google Tag Manager
  4. Roktを検索し、mParticle by Rokt - Eventsを選択します。 Google Tag Manager
  5. タグの説明的な名前を入力します（例: [Rokt] Identify user、[Rokt] Select placements）。
注記

1つのイベントタグで1つ以上のアクション（Identity、Select Placements、および/またはLog Event）を有効にできます。このタグインスタンスに必要なすべてのアクションを最初に設定し、完了したらSaveをクリックします。

タグを複数回発火させる必要がある場合（例: ユーザーを識別するために1回、後で配置をレンダリングするためにもう1回）、同じイベントテンプレートを使用して複数のGTMタグを作成します。

ユーザーの識別ユーザーの識別 への直接リンク

Roktは現在のユーザーを識別することを推奨しています（例: メールで）。これにより、オファーがより関連性の高いものになります。このタグを、ユーザーのメールがデータレイヤーで利用可能になったらすぐに発火するように設定します。

  1. mParticle by Rokt - Events タグで、Identity セクションに移動し、Enable Identity を選択します。
  2. IDSync Method ドロップダウンで、Identify を選択します。
  3. Identity Type で、Add Row をクリックし、希望するアイデンティティタイプを選択します:
    • 生のメールアドレスを送信する場合、Key ドロップダウンから Email を選択し、生のメール用のGTM変数を入力します。 Google Tag Manager
    • ハッシュ化されたメール値を送信する場合、Key ドロップダウンから Other を選択し、ハッシュ化されたメール用のGTM変数を入力します。 Google Tag Manager
  4. (オプション) 生のメール値をRoktに送信する前にハッシュ化したい場合は、Hash Raw Email? を選択します。 Google Tag Manager
  5. Triggering を設定し、タグが初期化後にのみ、かつメール値が利用可能なときにのみ発火するようにします。
    • 例 (メールがすでにチェックアウトページのロード時に存在する場合):
      1. Triggering で、+ をクリックして新しいトリガーを作成します。
      2. Trigger Configuration で、Custom Event を選択します。
      3. Event name を roktInitComplete に設定します。
      4. トリガーを Some Custom Events で発火するように設定します。
      5. 実装に一致する条件を追加します。例:
        • Page URL が checkout を含む
        • {{User Email}} が RegExに一致 .+@.+\..+
      6. Save をクリックしてトリガーを保存します。

Google Tag Manager 6. このイベントタグにアクションを追加し終えたら、Save をクリックします。

プレースメントの挿入プレースメントの挿入 への直接リンク

Rokt SDK の主な価値は、selectPlacements メソッドを通じて解放されます。このメソッドは、提供する属性に基づいて顧客に対して非常に関連性の高いプレースメントを提供します。このタグを、オファーを表示したいページ（例: 購入確認ページや「ありがとう」ページ）で発火するように設定します。

  1. mParticle by Rokt - Events タグで、Select Placements セクションに移動し、Enable Select Placements を選択します。
  2. Configuration の下で、必要なオプションを設定します:
    • 統合をテストする際は Sandbox を有効にします。本番環境に移行する準備ができたら無効にします。
    • (オプション) ページを一意に識別する必要がある場合は、Page Identifier を設定します（同じ URL を再利用するマルチステップのチェックアウトフローに便利です）。Page Identifier を統合することを決定した場合は、Rokt アカウントマネージャーにこれを開示してください。例:
      • stg.rokt.conf - ステージング（テスト）環境の確認ページ
      • prod.rokt.conf - 本番環境の確認ページ
      • stg.rokt.payments - ステージング（テスト）環境の支払いページ
      • prod.rokt.payments - 本番環境の支払いページ
    • (オプション) Events タグは、プレースメントイベントにサブスクライブすることも可能で、プレースメントがインタラクティブになったときや顧客がオファーに関与したときなどのイベントの通知を受け取ることができます。サブスクライブするには:
      1. トラッキングしたい各 Rokt イベントのために新しい GTM 変数を作成します。
      2. その GTM 変数を対応する Rokt イベントにマッピングします。
      3. Rokt イベントがトリガーされると、マッピングされた GTM 変数名で新しいデータレイヤーイベントがプッシュされます。
      4. さまざまなイベントタイプの例については、イベントベースのトラッキングを参照してください。 Google Tag Manager
  3. この GTM タグのトリガーを設定します。次の手順は、サイトがマルチページアプリケーション（MPA）かシングルページアプリケーション（SPA）かによって異なります:
  • マルチページアプリケーションのトリガー設定
    1. リストから Custom Event を選択します。
    2. イベント名として roktInitComplete を入力します。
    3. トリガー発火ルールを Some Custom Events に変更します。
    4. タグを発火させる各ユニークページを識別する URL パラメータを入力します。例えば、確認ページが example.com/cart/payment/confirmation の場合、識別パラメータは cart、payment、または confirmation のいずれかになります。

Google Tag Manager

  • シングルページアプリケーションのトリガー設定
    1. リストから History Change を選択します。
    2. トリガー発火ルールを Some History Changes に変更します。
    3. タグを発火させるページを識別する URL パラメータを入力します。例えば、確認ページが example.com/cart/payment/confirmation の場合、識別パラメータは cart、payment、または confirmation のいずれかになります。
  1. Save をクリックしてトリガーを保存します。
  2. この Events タグにアクションを追加し終えたら、Save をクリックします。

属性の追加属性の追加 への直接リンク

ユーザーを識別し、配置をレンダリングすることに加えて、Roktはユーザーに対するオファーの関連性を向上させるために追加の属性を送信することを推奨します。

  1. mParticle by Rokt - Events タグで、Attributes セクションに移動します。
  2. ユーザーまたはイベントに関連する利用可能な属性をできるだけ多く入力します。事前定義された属性については、Roktが自動的にそれらをユーザー属性またはイベント属性として分類します。以下に示します。

Google Tag Manager

事前定義された属性事前定義された属性 への直接リンク

属性キー例の値ユーザー属性備考
名John✓顧客の名。
姓Doe✓顧客の姓。
携帯電話3125551515✓電話番号は 1112345678 または +1 (222) 345-6789 の形式でフォーマットできます。
年齢33✓顧客の年齢。
生年月日19900717✓生年月日。yyyymmdd の形式でフォーマット。
性別M✓顧客の性別。例として、M、Male、F、Female。
支払いタイプクレジットカード取引に使用された支払い方法。例として、Credit Card、PayPal、Apple Pay。
確認参照/取引IDORD-123456購入のための一意の取引または確認参照ID。
金額52.25総取引金額。
コンバージョンタイプ購入コンバージョンイベントのタイプ。例として、Purchase、Signup、Lead。
パスバックコンバージョントラッキングIDTRACK-789RoktクリックID。
住所1行目123 Main Street✓顧客の主要な住所行。
住所2行目Apt 4B✓顧客の二次住所行（アパート、スイートなど）。
市Brooklyn✓顧客の市。
州NY✓顧客の州または省。
郵便番号11201✓顧客の郵便番号または郵便コード。
国US✓顧客の国。
称号Mr✓顧客の称号。例として、Mr、Mrs、Ms、Dr。
言語en✓顧客または購入に関連する言語。
注記

統合を完了する前に、Roktアカウントマネージャーと属性を確認してください。

  1. まだ定義されていない追加の属性を送信したい場合は、Custom Attributes の下の Add Row をクリックします。
  2. Attribute Name と Attribute Value の下に属性名と値を入力します。
  3. 属性がユーザーに関連している場合（Show Placement イベントではない場合）、User Attribute を選択します。 Google Tag Manager
  4. このイベントタグにアクションを追加し終えたら、Save をクリックします。
この記事は役に立ちましたか？
Last updated Feb 4, 2026