eコマースのためのGoogle Tag Manager統合

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

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

データレイヤーの理解

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

データレイヤーは、Google Tag Manager (GTM)と共有したい情報をすべて含むオブジェクトです。イベントや変数などの情報をデータレイヤーを通じてGoogle Tag Managerに共有することができ、変数の値に基づいてGoogle Tag Managerでトリガーを設定することができます（例えば、purchase_totalが100ドルを超える場合にリマーケティングタグを発火する）。また、イベントに基づいて特定のトリガーを設定することもできます。変数の値は他のタグに引き継ぐこともできます（例えば、purchase_totalをタグのvalueフィールドに追加する）。

データレイヤーの動作に関する詳細は、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コンテナにログインします。
変数をクリックします。
ユーザー定義変数の下で、新規をクリックします。
変数に名前を入力します。
**設定の開始に変数タイプを選択...**をクリックします
ページ変数の下で、データレイヤ変数を選択します。
データレイヤ変数名を入力します。データレイヤ構造に基づいて変数名を特定するには、上記の例を参照してください。
保存をクリックします。

Roktは次の属性の変数を作成することをお勧めします:

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

タグを作成する

Rokt SDKの各コア機能を処理する個々のタグを作成する必要があります。これには次のものが含まれます:

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

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

Rokt SDK の初期化

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

Google Tag Manager コンテナにログインし、左側のナビゲーションで Tags をクリックします。
New をクリックし、Tag Configuration を選択します。
Tag Configuration を選択し、「Community Template Gallery でさらなるタグタイプを見つける」へ進みます。
検索バーで Rokt を検索します。
検索結果から mParticle by Rokt - Initialization Template を選択します。
設定を入力します:
- mParticle by Rokt API Key の下に、Rokt アカウントマネージャーから提供された API キーを入力します。
- ファーストパーティードメイン統合用のカスタムドメインを設定した場合は、First Party Domain Name の下に新しいドメイン名を入力します。
- タグを本番データに使用する準備ができている場合は、More Integration Options の下で Environment を Production に設定します。タグのテスト中の場合は、Development のままにします。
- クッキーを許可/許可しない場合、More Integrations ドロップダウンから適切なオプションを選択します。
- タグのカスタム発火スケジュールを設定したい場合は、Advanced Settings ドロップダウンを開き、Firing Priority、Firing Options、または Tag Sequencing などのオプションを設定します。
- Additional Tag Metadata ドロップダウンを使用して、タグの発火時にイベントデータに含める追加変数を指定します。
Triggering メニューで、+ ボタンをクリックしてトリガーを設定するか、利用可能なオプションから選択します。
初期化タグがすべてのページで発火するように All Pages を選択し、必要に応じて例外を追加します。
Save をクリックします。

ユーザーを識別する

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

Google Tag Manager コンテナの左側のナビゲーションでタグをクリックします。
新規をクリックし、タグ設定を選択します。
検索バーでRoktを検索します。
検索結果からmParticle by Rokt - IDSync Templateを選択します。
IDSync イベントタイプからIdentifyを選択します。
識別オプションセクションを展開し、ユーザーを識別するために使用したいフィールドを表すデータ変数を入力します。
- ユーザーの生のハッシュされていないメールアドレスを使用したい場合は、このフィールドのデータ変数をメールの下に入力します。
- ユーザーのSHA256でハッシュされたメールアドレスを使用したい場合は、このフィールドのデータ変数をOtherの下に入力します。
ユーザーがメールアドレスを提供したらすぐにこのタグを発火するためのトリガーを設定します。使用するトリガーは特定の統合に依存しますが（例として）、ユーザーがフォーム送信を通じてメールアドレスを提供したときにタグを発火するトリガーを作成できます：
- トリガー設定からフォーム送信メールを選択します。
- トリガーをクリックしてトリガー設定ページに移動し、編集アイコンをクリックします。
- このトリガーが発火する条件の下で、一部のフォームを選択します。
- ユーザーのメールアドレスを保存するために作成したデータレイヤ変数を選択します。
- 条件として、正規表現に一致を選択し、正規表現 .+@.+\..+ を入力します。

注意

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

ページビューを追跡する

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

Google Tag Manager コンテナの左側のナビゲーションからタグをクリックします。
新規をクリックし、タグの構成 を選択します。
検索バーで Rokt を検索します。
検索結果から、mParticle by Rokt - Event - Screen View Template を選択します。
タグに「ページビューの追跡」など、わかりやすい名前を入力します。
画面名 の下に「ページビュー」と入力します。
ページURL の下に、現在のページのURLのデータ変数を入力します。
カスタム属性 の下に、ページの追加の詳細を提供するための追加のデータ変数をキー/値ペアとして入力します。
トランザクションの旅の各ページで（初期化タグの後に）このタグが発火されるようにトリガーを設定します。

注記

画面名フィールドには常に「ページビュー」を入力してください。ページURLフィールドとカスタム属性は、ビューページに関連する特定の情報を提供するために使用できます。

注意

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

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

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

Google タグマネージャのコンテナの左側のナビゲーションからタグをクリックします。
新規作成 をクリックし、タグの設定 を選択します。
検索バーで Rokt を検索します。
検索結果から "mParticle by Rokt - selectPlacement" を選択します。
タグに「プレースメントを挿入」などの説明的な名前を入力します。
コア属性 および カスタム属性 の下で、サイトのデータレイヤに基づいて作成した変数を使用して、Rokt に転送する各属性を設定します。
タグがトリガーされるタイミングを設定するには、トリガー を選択します。
新しいトリガーを追加するには、+ ボタンをクリックします。
トリガー設定 をクリックします。次のステップは、サイトがマルチページアプリケーション (MPA) かシングルページアプリケーション (SPA) かに応じて異なります：
- マルチページアプリケーションのトリガー設定
  1. リストから ページビュー を選択します。
  2. トリガー発火ルールを 一部のページビュー に変更します。
  3. タグを発火させる各ユニークページを識別するためのURLパラメータを入力します。たとえば、確認ページが example.com/cart/payment/shipping の場合、識別パラメータは cart、payment、または shipping のいずれかになります。
- シングルページアプリケーションのトリガー設定
  1. リストから 履歴の変更 を選択します。
  2. トリガー発火ルールを 一部の履歴の変更 に変更します。
  3. タグを発火させるページを識別するURLパラメータを入力します。たとえば、確認ページが example.com/cart/payment/shipping の場合、識別パラメータは cart、payment、または shipping のいずれかになります。
保存をクリックします。

データレイヤーの理解​

変数名を特定する​

Google Tag Managerで変数を作成する​

タグを作成する​

Rokt SDK の初期化​

ユーザーを識別する​

ページビューを追跡する​

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

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

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