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

Google Tag Manager 統合ガイド for Ecommerce

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

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

データレイヤーの理解​

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

データレイヤーは、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で変数を作成する​

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

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

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

タグを作成する​

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

  • Rokt SDKの初期化
  • ユーザーの識別
  • ページビューのトラッキング
  • プレースメントの挿入

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

Rokt SDKの初期化​

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

  1. Google Tag Managerコンテナにログインし、左側のナビゲーションでTagsをクリックします。

  2. Newをクリックし、Tag Configurationを選択します。 Google Tag Manager

  3. Tag Configurationを選択し、「Discover more tag types in the Community Template Gallery」に進みます。 Google Tag Manager

  4. 検索バーでRoktを検索します。 Google Tag Manager

  5. 検索結果からmParticle by Rokt - Initialization Templateを選択します。

  6. 設定を入力します:

    • mParticle by Rokt API Keyの下に、Roktアカウントマネージャーから提供されたAPIキーを入力します。
    • タグを本番データで使用する準備ができている場合は、More Integration Optionsの下でEnvironmentをProductionに設定します。タグをまだテスト中の場合は、Developmentのままにしておきます。
    • クッキーを許可/不許可にしたい場合は、More Integrationsドロップダウンから適切なオプションを選択します。
    • タグのカスタム発火スケジュールを設定したい場合は、Advanced Settingsドロップダウンを開き、Firing Priority、Firing Options、またはTag Sequencingなどのオプションを設定します。
    • Additional Tag Metadataドロップダウンを使用して、タグ発火時にイベントデータに含める追加の変数を指定します。

  7. Triggeringメニューで、**+**ボタンをクリックしてトリガーを設定するか、利用可能なオプションから選択します。

  8. All Pagesを選択して、初期化タグがすべてのページで発火するようにし、必要に応じて例外を追加します。

  9. Saveをクリックします。

ユーザーを識別する​

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

  1. Google Tag Managerコンテナの左側のナビゲーションからTagsをクリックします。

  2. Newをクリックし、Tag Configurationを選択します。

  3. 検索バーでRoktを検索します。

  4. 検索結果からmParticle by Rokt - IDSync Templateを選択します。

  5. IDSync Event TypeからIdentifyを選択します。 Google Tag Manager

  6. Identify Optionsセクションを展開し、ユーザーを識別するために使用したいフィールドを表すデータ変数を入力します。

    • ユーザーの生のハッシュされていないメールアドレスを使用したい場合は、このフィールドのデータ変数をEmailに入力します。
    • ユーザーのSHA256でハッシュされたメールアドレスを使用したい場合は、このフィールドのデータ変数をOtherに入力します。

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

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

    Google Tag Manager

注意

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

ページビューのトラッキング​

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

  1. Google Tag Manager コンテナの左側のナビゲーションから Tags をクリックします。
  2. New をクリックし、Tag Configuration を選択します。
  3. 検索バーで Rokt を検索します。
  4. 検索結果から mParticle by Rokt - Event - Screen View Template を選択します。
  5. タグに「Track Page View」のような説明的な名前を入力します。
  6. Screen Name の下に「page view」と入力します。
  7. Page URL の下に、現在のページのURLのデータ変数を入力します。
  8. Custom Attributes の下に、ページに関する追加の詳細を提供するためのキー/バリューペアとして追加のデータ変数を入力します。
  9. このタグがトランザクションジャーニーのすべてのページで（初期化タグの後に）発火するようにトリガーを設定します。
注記

Screen Name フィールドには常に「page view」を入力する必要があります。Page URL フィールドと Custom Attributes は、表示されている正確なページに関連する特定の情報を提供するために使用できます。

注意

トラックページビュータグの正確なトリガー設定は、統合によって異なります。ページが正しくトラッキングされるようにこのタグを最適に実装する方法について質問がある場合は、Rokt アカウントマネージャーに相談してください。

プレースメントの挿入​

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

  1. Google Tag Managerコンテナの左側のナビゲーションからTagsをクリックします。

  2. Newをクリックし、Tag Configurationを選択します。

  3. 検索バーでRoktを検索します。

  4. 検索結果から「mParticle by Rokt - selectPlacement」を選択します。

  5. タグに「Insert Placement」などの説明的な名前を入力します。

  6. Core AttributesおよびCustom Attributesの下で、サイトのデータレイヤーに基づいて作成した変数を使用して、Roktに転送したい各属性を設定します。

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

  8. **+**ボタンをクリックして新しいトリガーを追加します。

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

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

      1. リストからPage Viewを選択します。
      2. トリガー発火ルールをSome Page Viewsに変更します。
      3. タグを発火させるべき各ユニークなページを識別するURLパラメータを入力します。例えば、確認ページがexample.com/cart/payment/shippingの場合、識別パラメータはcart、payment、またはshippingのいずれかにすることができます。

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

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

  10. Saveをクリックします。

ファーストパーティドメイン名​

ファーストパーティドメイン統合のためにカスタムドメインを設定する場合、GTMテンプレートを更新してカスタムドメインを明示的に参照する必要があります。

:::注意 GTMテンプレートでファーストパーティドメインを使用するには、テンプレートのコードと権限を編集する必要があります。コミュニティテンプレートを変更すると、それはカスタムテンプレートとなり、Roktが維持するバージョンからの自動更新を受け取れなくなります。 :::

  1. Google Tag Managerコンテナの左側のナビゲーションからテンプレートをクリックします。
  2. mParticle by Rokt - Initialization Templateを選択します。
  3. コードタブで、const url = "https://apps.rokt-api.com"; の行をカスタムドメインを指すように更新します。例: const url = "https://rkt.yourcompany.com";。
  4. 権限タブで、スクリプトを注入のドロップダウンにあるURLのリストにあなたのドメイン https://rkt.yourcompany.com を追加します。

テンプレート更新

  1. 保存をクリックします。
この記事は役に立ちましたか？
Last updated Oct 29, 2025