データレイヤー

データレイヤーは、Google タグ マネージャーと gtag.js でタグに情報を渡すために使用するオブジェクトです。イベントまたは変数を、データレイヤーを介して渡したり、変数の値に基づいたトリガーを設定したりすることができます。

たとえば、purchase_total の値が 100 ドルを上回った際、またはボタンのクリックなどの特定のイベントが発生した際にリマーケティング タグを配信する場合は、そのデータをタグで使用できるようにデータレイヤーを設定することができます。データレイヤー オブジェクトは JSON として構成されています。次に例を示します。

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Google タグは、変数、トランザクション情報、ページカテゴリなどのページ全体に分散しているシグナルを分析するのではなく、データレイヤーに追加された情報を体系的かつ予測可能な方法で簡単に参照できるように設計されています。データレイヤーを実装して変数と関連する値を追加すると、タグで必要とされるときに、関連するデータを使用できるようになります。

インストール

タグ マネージャーをウェブページにインストールするには、データレイヤーを作成する必要があります。以下のハイライト表示されたコードは、タグ マネージャーが読み込まれる前にデータレイヤーが確立されている場所を示しています。

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

gtag.js の標準実装、つまりサービス内で生成したタグスニペットをコピーしてウェブページに追加する場合は、データレイヤーを作成するコードもあらかじめスニペット内に含まれています。Google タグをカスタム実装する場合は、スクリプトの先頭にデータレイヤーのコードを追記する必要があります。下の例の強調箇所を確認しましょう。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

データレイヤー情報の処理方法

コンテナが読み込まれると、タグ マネージャーでキューに追加されたデータレイヤーのすべてのプッシュ メッセージの処理が開始されます。タグ マネージャーでは、先入れ先出しでメッセージが処理されます。つまり、各メッセージは受信された順にひとつずつ処理されます。メッセージがイベントの場合は、次のメッセージに進む前に、トリガー条件が一致したタグが配信されます。

gtag() 呼び出しまたは dataLayer.push() 呼び出しがページ、カスタム テンプレート、またはカスタム HTML タグのコードによって行われた場合、他の保留中のメッセージが評価された後に、関連付けられたメッセージはキュー追加にされて処理されます。つまり、更新されたデータレイヤー値が次のイベントで使用できるとは限りません。こうしたケースに対応するには、メッセージがデータレイヤーにプッシュされたときにメッセージにイベント名を追加してから、カスタム イベント トリガーを使用して、そのイベント名をリッスンします。

重要: gtag.js ベースのコードをデプロイする際に、カスタム HTML タグを使用しないでください。代わりに、タグ マネージャーに用意されている Google 広告、アナリティクス、Floodlight 向けのネイティブタグ テンプレートを使用してください。

重要: カスタム HTML タグを使用して、タグ マネージャーの同意設定を行わないでください。同意設定をタグ マネージャー コンテナで関連するタグが配信される前に適用する必要があるため、Tag Manager Consent API を適用し、デフォルト動作と更新動作を設定してください。Tag Manager Consent API を使用すると、データレイヤー内のキューに追加したアイテムよりも先に同意内容が更新されるようにできるため、同じイベントで配信されたすべてのタグに、同一の同意ステータスを適用することが可能です。

キーポイント: Google Tag Assistant を使用すると、一連のイベントの時系列を任意に選択して、その時点のデータレイヤーのステータスを確認できます。

イベント ハンドラでデータレイヤーを使用する

dataLayer オブジェクトは、event キーを使用してイベントの送信を開始します。

Google タグとタグ マネージャーでは、event という特殊なデータレイヤー変数を使用します。ユーザーがウェブサイト要素を操作すると、JavaScript イベント リスナーがこのデータレイヤー変数をもとにタグを配信します。たとえば、ユーザーが購入確認ボタンをクリックしたときにコンバージョン トラッキング タグを配信することができます。イベントは、ユーザーがウェブサイト要素（リンク、ボタン、スクロールなど）を操作したときに呼び出すことができます。

この機能を実現するには、イベントの発生時に dataLayer.push() を呼び出します。dataLayer.push() でイベントを送信するための構文は次のとおりです。

dataLayer.push({'event': 'event_name'});

ここで、event_name には、'login'、purchase、search などのイベントを示す文字列を指定します。

測定するアクションが発生したときにイベントデータを送信するには、dataLayer.push() を使用します。たとえば、ユーザーがボタンをクリックしたときにイベントを送信するには、dataLayer.push() を呼び出すようにボタンの onclick ハンドラを変更します。

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

データレイヤー変数をデータレイヤーに動的にプッシュすると、フォーム内で入力または選択された値、訪問者が再生している動画に関連付けられたメタデータ、訪問者がカスタマイズした商品（車など）の色、クリックされたリンクのリンク先 URL などの情報を取得できます。

この機能を利用するには、イベントの場合と同様に、push() API を呼び出してデータレイヤーにデータレイヤー変数を追加するか置き換えます。動的データレイヤー変数を設定するための基本的な構文は次のとおりです。

dataLayer.push({'variable_name': 'variable_value'});

'variable_name' には設定するデータレイヤー変数の名前を示す文字列を、'variable_value' には設定または置換するデータレイヤー変数の値を示す文字列を指定します。

たとえば、訪問者が商品のカスタマイズ ツールを操作しているときに色の設定を含むデータレイヤー変数を設定するには、次の動的データレイヤー変数をプッシュします。

dataLayer.push({'color': 'red'});

複数の変数を一度にプッシュする

複数の変数とイベントをまとめてプッシュすることができます。

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

重要: 既存の変数と同じ名前の変数をデータレイヤーにプッシュすると、既存の値が新しい値で上書きされます。

データレイヤー変数を保持する

ウェブページ間でデータレイヤー変数を保持するには、各ページの読み込みでデータレイヤーがインスタンス化された後に dataLayer.push() を呼び出して、データレイヤーに変数をプッシュします。コンテナの読み込み時にこれらのデータレイヤー変数をタグ マネージャーで使用できるようにするには、以下に示すように、タグ マネージャーのコンテナコードの前に dataLayer.push() の呼び出しを追加します。

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

データレイヤー オブジェクト内で宣言された各変数は、ユーザーが現在のページに滞在している間に限り保持されます。複数のページに関連するデータレイヤー変数（visitorType など）は、ウェブサイトの各ページのデータレイヤーで宣言する必要があります。すべてのページのデータレイヤーに同じ変数セットを配置する必要はありませんが、一貫した命名規則を使用してください。たとえば、pageCategory という変数を使用して登録ページにページカテゴリを設定している場合は、商品ページと購入ページでも pageCategory 変数を使用する必要があります。

トラブルシューティング

データレイヤーに関するトラブルシューティングのヒントを、次にいくつかご紹介します。

window.dataLayer 変数を上書きしない: データレイヤーを直接使用すると（例: dataLayer = [{'item': 'value'}])）、dataLayer の既存の値が上書きされます。タグ マネージャーでは、ソースコードのできる限り最初の方の、コンテナ スニペットの前で、window.dataLayer = window.dataLayer || []; を使用してデータレイヤーをインスタンス化する必要があります。dataLayer を宣言した後に値を追加するには、dataLayer.push({'item': 'value'}) を使用します。ページの読み込み時にタグ マネージャーでそれらの値を使用できるようにする必要がある場合は、dataLayer.push() の呼び出しも、タグ マネージャーのコンテナコードの前に配置する必要があります。

dataLayer オブジェクト名では大文字と小文字を区別する: 大文字と小文字を適切に区別せずに変数やイベントをプッシュしようとしても、プッシュは機能しません。

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push は、有効な JavaScript オブジェクトを使用して呼び出す必要があります。データレイヤー変数名はすべて引用符で囲みます。

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

変数名はページ間で共通にする: 同じ概念に割り当てる変数名がページごとに異なっていると、意図したすべての場所でタグを整合的に配信することができません。

悪い例:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

良い例:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

データレイヤーの名前を変更する

Google タグまたはタグ マネージャーによって開始されるデータレイヤー オブジェクトのデフォルトの名前は dataLayer です。データレイヤーに別の名前を付けたい場合は、Google タグまたはタグ マネージャーのコンテナ スニペットで、データレイヤー パラメータ値をご希望の名前に編集することができます。

gtag.js

URL に「l」という名前のクエリ パラメータを追加し、新しいデータレイヤー名（l=myNewName など）を設定します。Google タグ スニペット内の dataLayer のすべてのインスタンスを新しい名前に更新します。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

タグ マネージャー

コンテナ スニペットのデータレイヤー パラメータ値（下記のハイライト表示部分）をご希望の名前に置き換えます。

重要: ハイライト表示されていないパラメータ値は置き換えないでください。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

名前を変更したら、データレイヤーへのすべての参照（スニペットの前にデータレイヤーを宣言する際や、.push() コマンドでデータレイヤーにイベントまたは動的データレイヤー変数をプッシュする際など）を、カスタム データレイヤー名を反映したものに変更する必要があります。

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

注: dataLayer オブジェクトは、1 ページにつき 1 個のみ使用できます。

カスタム データレイヤー メソッド

データレイヤーに関数をプッシュすると、この関数が抽象データモデルに設定されて呼び出されます。この抽象データモデルでは、Key-Value ストアに値を設定および取得できるほか、データレイヤーをリセットする方法も提供されます。

重要: カスタム データレイヤー メソッドを使用するには、.push を使用してデータを dataLayer 変数に直接送信する必要があります。gtag を使用した場合、関数は無効なコマンドとして解釈され、無視されます。

set

抽象データモデルで set 関数を使用すると、get で取得する値を設定できます。

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

抽象データモデルで get 関数を使用すると、設定された値を取得できます。

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

reset

抽象データモデルの reset 関数を使用することで、データレイヤーのデータをリセットできます。これは、オープン状態のままで、時間の経過とともにデータレイヤーのサイズが拡大し続けるページで最も役立ちます。データレイヤーをリセットするには、次のコードを使用します。

window.dataLayer.push(function() {
  this.reset();
})