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で変数を作成する

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

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

• マルチページアプリケーションのトリガー設定
  1. リストからすべてのページを選択します。
• シングルページアプリケーションのトリガー設定
  1. リストからすべてのページと履歴の変更を選択します。

注記

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

8. トリガーの説明的な名前を入力します。例えば、すべてのページや履歴の変更などです。
9. 必要に応じて例外を追加します。
10. 保存をクリックします。

注記

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

イベントタグの設定

mParticle by Rokt - Events タグは以下のことができます：

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

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

注意

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

新しいイベントタグを作成するたびに、以下の手順を使用します（例えば、Identity用とSelect Placements用）：

1. コンテナの左側のナビゲーションでタグをクリックし、新規をクリックします。
2. タグ設定を選択します。
3. コミュニティテンプレートギャラリーで他のタグタイプを探すを選択します。
4. Roktを検索し、mParticle by Rokt - Eventsを選択します。
5. タグの説明的な名前を入力します（例えば、[Rokt] Identify user、[Rokt] Select placements）。

注記

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

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

ユーザーの識別

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

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

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

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

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タグは、placement eventsを購読することも可能で、プレースメントがインタラクティブになったときや顧客がオファーに関与したときなどのイベントの通知を受け取ることができます。購読するには：
     1. 追跡したい各Roktイベントに対して新しいGTM変数を作成します。
     2. そのGTM変数を対応するRoktイベントにマップします。
     3. Roktイベントがトリガーされると、マップされたGTM変数名で新しいデータレイヤーイベントがプッシュされます。
     4. 異なるイベントタイプの例については、event-based trackingを参照してください。
3. このGTMタグのトリガーを設定します。次のステップは、サイトがマルチページアプリケーション（MPA）かシングルページアプリケーション（SPA）かによって異なります：

• マルチページアプリケーションのトリガー設定
  1. リストからCustom Eventを選択します。
  2. イベント名としてroktInitCompleteを入力します。
  3. トリガー発火ルールをSome Custom Eventsに変更します。
  4. タグを発火させるべき各ユニークなページを識別するURLパラメータを入力します。例えば、確認ページがexample.com/cart/payment/confirmationの場合、識別パラメータはcart、payment、またはconfirmationのいずれかになります。

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

4. Saveをクリックしてトリガーを保存します。
5. このEventsタグにアクションを追加し終えたら、Saveをクリックします。

属性の追加

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

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

事前定義された属性

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

注記

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

3. まだ定義されていない追加の属性を送信したい場合は、Custom Attributes の下で Add Row をクリックします。
4. Attribute Name と Attribute Value の下に属性名と値を入力します。
5. 属性がユーザーに関連している場合（Show Placement イベントではない）、User Attribute を選択します。
6. このEventsタグにアクションを追加し終えたら、Save をクリックします。