注: このデベロッパーサイトは developers.google.com/tag-platform に移行中です。2021 年 9 月 30 日までに、リダイレクトが開始されます。

デベロッパーガイド

このドキュメントでは、Google タグマネージャーをサイトに実装する方法について詳しく説明します。

データレイヤーを使用する

Google タグマネージャーは、データレイヤーと一緒に導入することで簡単に設定でき、最大限の柔軟性とポータビリティを実現します。データレイヤーとは、Google タグマネージャーに渡したい情報をすべて格納するオブジェクトです。イベントや変数などの情報をデータレイヤーを介して Google タグマネージャーに渡したり、変数の値または特定のイベントに基づくトリガー（例: 「purchase_total > 100 円」の場合にリマーケティングタグを配信する）を Google タグマネージャーで設定したりできます。変数の値を他のタグに渡す（例: purchase_total をタグの値フィールドに渡す）こともできます。

Google タグマネージャーは、ページ全体に分散されている変数、トランザクション情報、ページカテゴリなどの情報を参照するのではなく、データレイヤーに格納されている情報のみを参照します。データレイヤーを明示的に宣言するかどうかは任意ですし、データレイヤーを実装しなくても、変数機能を使用してページの値にアクセスすることは可能です。ただし、この場合イベントを使用することはできません。変数とその関連する値がデータレイヤーに格納されていれば、タグの配信に必要なときにすぐに使用できます（ページ全体の変数が読み込まれるのを待つのとは対照的です）。

データレイヤー変数をページに追加する

データレイヤーを設定するには、コンテナスニペットより上の、ページの先頭部分に次のコードスニペットを追加します。

<script>
  dataLayer = [];
</script>

上記のスニペットは空のオブジェクトで、Google タグマネージャーに渡す情報を指定できます。たとえば、データレイヤー内にデータレイヤー変数を設定し、ページが登録ページであること、また訪問者を価値の高いユーザーであると識別していることを示す場合は、次のようにデータレイヤーを設定します。

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

たとえば、Google タグマネージャーは、signup とマークされたすべてのページで、または訪問者が high-value とマークされた場合にタグを配信するように設定できます。このデータレイヤースニペットは、クイックスタートガイドの説明を参照して、コンテナスニペットの上に配置する必要があります。

データレイヤーコードがコンテナスニペットより後で呼び出された場合、そのコード内で宣言された変数は、ページの読み込み時に Google タグマネージャーでタグを選択的に配信する際に使用できません。次に例を示します。

不適切な例

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

適切な例

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

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

データレイヤーは、必ずしも明示的に宣言する必要はありません。データレイヤーコードを実装せずに変数で設定する場合、Google タグマネージャーのコンテナスニペットが代わりにデータレイヤーオブジェクトを開始します。

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

Google タグマネージャーには、event と呼ばれる特別なデータレイヤー変数が用意されています。この変数は、ユーザーがボタンなどのウェブサイト要素を操作したときに、タグの配信を開始する目的で JavaScript イベントリスナー内で使用されます。たとえば、ユーザーがニュースレターの登録フォームで Submit ボタンをクリックしたときに、コンバージョントラッキングタグを配信するとします。イベントは、ウェブサイト要素（リンク、ボタン、Flash を使用したメニューシステムのコンポーネントなど）に対するユーザー操作、または他の JavaScript（時間遅延など）に基づいて呼び出すことができます。

この機能を実現するには、トラッキング対象の要素に関連するページなどで、データレイヤーのメソッドとして push API を呼び出します。イベントを設定するための基本的な構文は次のとおりです。

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

ここで、event_name は、指定されたイベントまたは要素を示す文字列です。

たとえば、ユーザーがボタンをクリックした場合のイベントを設定するには、ボタンのリンクを変更して push() API を次のように呼び出します。

<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>

場合によっては、特定のタグをトリガーするために収集または使用する必要のある情報が、ページでのユーザーの操作が完了するまで読み込まれないことがあります。データレイヤーの変数とイベントを組み合わせると、必要に応じてこの情報をデータレイヤーに動的にプッシュすることができます。

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

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

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

ここで、variable_name は設定するデータレイヤー変数の名前を示す文字列であり、variable_value は設定または置換するデータレイヤー変数の値を示す文字列です。

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

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

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

変数およびイベントごとに dataLayer.push() を使用する代わりに、複数の変数とイベントを一度にプッシュすることができます。以下はその方法の例です。

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

リンクのイベントハンドラ内でも同じ方法を使用できます。

<a href="#"
   name="color"
   onclick="dataLayer.push({
     'color': 'red',
     'conversionValue': 50,
     'event': 'customizeCar'});">Customize Color</a>

既存の変数と同じ名前の変数をデータレイヤーにプッシュすると、既存の値が新しい値で上書きされることに注意してください。たとえば、上記のリンクをクリックしたときに、値が blue の color という名前の変数がすでにデータレイヤー内で宣言されていた場合、その値は新しい値 red で上書きされます。

非同期構文の仕組み

Google タグマネージャーは非同期タグであり、実行時に他のページ要素の表示が妨げられることはありません。また、Google タグマネージャーで管理するその他のタグも非同期であるため、読み込みに時間がかかるタグがあっても、その他のトラッキングタグの妨げになることはありません。

非同期構文を可能にしているのは、dataLayer オブジェクトです。これは、先入れ先出しのデータ構造を持つキューとして機能し、API 呼び出しを収集します。タグは、その API 呼び出しに従って配信されます。キューに何かを追加するには、dataLayer.push メソッドを使用します。dataLayer.push メソッドを使用すると、変数を介して追加のメタデータを Google タグマネージャーに渡したり、イベントを指定したりすることができます。

dataLayer オブジェクトの生成は、Google タグマネージャースニペットの前に指定します。dataLayer オブジェクトが未定義の場合は Google タグマネージャーによって生成されます。

非同期構文について詳しくは、API リファレンスの dataLayer.push メソッドをご覧ください。

よくある問題の回避方法

Google タグマネージャーを実装する場合は、次の点に注意してください。

dataLayer を上書きしない

代入を使用して dataLayer に値を割り当てると（例: dataLayer = [{'item': 'value'}]）、既存の値が上書きされます。dataLayer は、ソースコード内のできるだけ上の方（コンテナスニペットまたはオプティマイズのページ非表示スニペットより上）で宣言することをおすすめします。dataLayer を宣言した後、スクリプトの後の方で dataLayer.push({'item': 'value'}) を使用して値を追加できます。

dataLayer オブジェクト名は大文字と小文字が区別される

大文字と小文字を正しく指定せずに変数またはイベントをプッシュしようとしても、プッシュは機能しません。次に例を示します。

datalayer.push({'pageTitle': 'Home'});    // Won't work

dataLayer.push({'pageTitle': 'Home'});    // Better

変数名は引用符で囲む

文字、数字、アンダースコアのみで構成されていて予約語ではない変数名（function、export、native など）については厳密には引用符は必要ありませんが、問題を避けるために、すべての変数名を引用符で囲むことが推奨されています。次に例を示します。

dataLayer.push({new-variable: 'value'});      // Won't work

dataLayer.push({'new-variable': 'value'});    // Better

ページ間で変数名の一貫性を保つ

別のページの同じ変数に異なる変数名を使用すると、必要なすべての場所で一貫性のあるタグ配信を行えません。次に例を示します。

動作しない例

// 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'});

ページの読み込み時にタグを配信するために必要な情報は、コンテナスニペットより上にあるデータレイヤーで宣言する

ある条件に一致するページ（たとえば、pageCategory が sports とマークされているページ）の読み込み時にタグを配信するには、コンテナスニペットより上にあるデータレイヤーで pageCategory を定義する必要があります（'pageCategory': 'sports' など）。条件が一致する場合であっても、コンテナスニペットより後ろにあるデータレイヤーにプッシュ（dataLayer.push()）される変数では、ページの読み込み時にタグを配信できません。

Google タグマネージャーで導入したタグは、ハードコードしたり別のツールで導入したりしない

Google タグマネージャーから配信するタグは、単に複製するのではなく、Google タグマネージャーに移行する必要があります（タグの移行について詳しくは、Google タグマネージャーにタグを移行するをご覧ください）。Google タグマネージャーと他のシステムの両方でタグを導入したり、サイトにタグをハードコードしたりすると、それらのタグが原因でデータの膨張（およびその他のデータ整合性の問題）が発生する場合があります。たとえば、Google アナリティクスのトラッキングコードを移行して Google タグマネージャーから配信する場合は、ハードコードされた Google アナリティクスのトラッキングコードをサイトから削除する必要があります。

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

デフォルトでは、Google タグマネージャーで開始され参照されるデータレイヤーは dataLayer と呼ばれます。データレイヤーに別の名前を使用する場合は、コンテナスニペットのデータレイヤーパラメータ値（下記のハイライト表示部分）をご希望の名前に置き換えます。

<!-- 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-XXXX');</script>
<!-- End Google Tag Manager -->

さらに、データレイヤーへのすべての参照（スニペットより上でデータレイヤーを宣言する際と、イベントまたは動的データレイヤー変数を push() API を使用してデータレイヤーにプッシュする際の参照）も、カスタムデータレイヤー名を反映するように調整する必要があります。

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

Google タグマネージャーにタグを移行する

Google タグマネージャーを最大限に活用するために、既存のタグのほとんどを Google タグマネージャーに移行することをおすすめします（サポートされていないタグは移行しないでください）。このセクションでは、おすすめの移行方法について説明します。このプロセスは主に次の 5 つのステップからなります。

サイトをマッピングする（省略可）

移行を開始するには、サイトに現在導入しているタグと収集しようとしているデータについて考える必要があります。データ収集では、どのアクションをトラッキングするか（イベント）と、ページのどの追加データを収集するか（変数）について考えます。タグ、そのタグで収集するデータ、そのタグに関連付けるイベントとページのマップを作成します。
標準の Google タグマネージャースニペットを実装する

サイトをマッピングしたら、サイト（空の状態）に Google タグマネージャースニペットを 1 つだけインストールして導入します。詳しくは、クイックスタートをご覧ください。
イベントと変数を追加する

HTML イベントハンドラでデータレイヤーを使用するに記載されている方法を使用して、Google タグマネージャーのインストールをカスタマイズします。
Google タグマネージャーの管理画面で関連するトリガーを含むタグを追加する

Google タグマネージャースニペットとデータ収集 API を使用してサイトの設定が完了したら、サイトのタグを管理画面に追加します。この時点では公開しないでください。ここでは単に、適切なテンプレートを使用して Google タグマネージャーの管理画面でサイトのタグの追加と設定を行い、トリガーを適切に設定します（詳しい方法については、ヘルプセンターのトリガーの記事をご覧ください）。
最後にタグを置き換える

最後のステップでは、古いタグを同時に置き換えて、Google タグマネージャーでタグを公開します。数分以内に以下を行う必要があります。
- 1 回のコードプッシュでサイトのタグを削除します。
- このプッシュが成功したことを確認したら、お使いのコンテナバージョンの [公開] ボタンを押します。
この方法では、データに小さなギャップが生じる場合がありますが、最初の置き換えが行われると、データのギャップはなくなります。または、順序を入れ替えて、サイトの変更を有効にする直前にタグを公開することもできます。この場合、データに小さいギャップは生じませんが、データの軽微な重複が 1 回だけ発生する可能性があります。

Google タグマネージャーへの最初の移行が完了したら、以降の必要なタグ付けは、サイトのコードを変更することなく Google タグマネージャーの管理画面を介して処理できます。

複数のドメイン

同じコンテナを複数のウェブサイトで使用することもできますが、管理する個別のウェブプロパティは独自のコンテナで導入することをおすすめします。このように分離することで、あるウェブサイトに固有の変更を行った場合に、同じコンテナを使用する他のウェブサイトに望ましくない影響が生じるのを防ぐことができます。ただし、複数のトップレベルドメインまたはサブドメインが同じウェブサイトのメンバーであると考えられる状況では、同じ Google タグマネージャーコンテナを使用してタグを管理すると便利です。

複数のドメインで 1 つのコンテナを使用する場合、Google タグマネージャーでタグとトリガーを慎重に設定することが重要です。Google タグマネージャーでデフォルトの「すべてのページ」トリガー（$url matches RegEx .*）を使用すると、コンテナスニペットが導入されているすべてのドメインのすべてのページでタグが配信されます。しかし、タグの中には、それぞれのドメインに固有の設定や目的を持っているものもあります。そのような場合は、カスタムトリガーを作成して（または「すべてのページ」トリガーも削除して）、特定のドメインのすべてのページでタグが配信されるようにする必要があります。

たとえば、複数のドメインまたはサブドメインにまたがる Google アナリティクストラッキングをサポートする設定を使用し、GTM を介して Google アナリティクスのトラッキングコードを導入する場合を考えます。

Google アナリティクスのトラッキングコードにコードを 1 行追加して、Google アナリティクスの Cookie を設定するファーストパーティドメインを手動で設定するとします。上の例の www.example-petstore.com と dogs.example-petstore.com では、Cookie を共通ドメインの .example-petstore.com に設定します。一方、セカンダリサイトの www.my-example-blogsite.com では、Cookie を .my-example-blogsite.com に設定します。この場合、Google アナリティクストラッキングコードの 2 つのタグ（.example-petstore.com に設定されたタグと .my-example-blogsite.com に設定されたタグ）はそれぞれ、2 つのドメインのうち適切なドメインで配信されなければなりません。しかし、2 つのドメインが共通の Google タグマネージャーコンテナを共有している場合、デフォルトの「すべてのページ」トリガーを使用すると、両方のドメインのすべてのページで両方のタグが配信されてしまいます。

1 つのページで複数のコンテナを使用する

ページのパフォーマンスを最大限に高めるには、ページ上の Google タグマネージャーコンテナの数を最小限に抑えます。

1 つのページで複数のコンテナを使用する場合は、共通のデータレイヤーオブジェクトを使用してコンテナスニペットを実装します。たとえば、次のように 2 つのコンテナスニペットを実装できます。

以下の JavaScript をコピーし、ページ上の <head> 開始タグのなるべく近くに貼り付けます。

<!-- 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-XXXX');</script>

<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-YYYY');</script>
<!-- End Google Tag Manager -->

以下のスニペットをコピーし、ページ上の <body> 開始タグの直後に貼り付けます。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

複数のデータレイヤーを使用すると、一部のトリガーが機能しなくなったり他の影響が生じたりする可能性があるため、データレイヤーはページ上のすべての Google タグマネージャーコンテナに対して共通のレイヤーを 1 つだけ使用します。そのため、データレイヤーの名前を変更する必要がある場合は、一部のコンテナでなく、ページ上のすべてのコンテナについて名前を変更してください。

Google タグマネージャーコンテナを実装するときに、別の Google タグマネージャーコンテナのカスタム HTML タグを使用することは避けてください。セカンダリコンテナによってタグにレイテンシが追加されたり、その他の影響が生じたりする可能性があるためです。

Flash と ActionScript

Flash ムービーのコンテンツまたは操作に基づいて Google タグマネージャーでタグを配信するには、ActionScript の ExternalInterface メソッドを使用して、コンテナページのデータレイヤーに SWF ムービーからイベントと動的データレイヤー変数をプッシュします。この機能を実現するには、クイックスタートガイドの説明に沿って、Google タグマネージャーのコンテナスニペットを SWF の親ページの HTML 内に実装する必要があります。

イベントと動的データレイヤー変数を Flash コンポーネントから Google タグマネージャーにプッシュするには、ExternalInterface を介して push メソッドを呼び出します。たとえば、ActionScript 3 を使用してボタン mybutton_btn のクリック時にイベントをトリガーするには、SWF 内に次のコードを実装します。

import flash.display.*;
import flash.events.*;
import flash.external.*;
mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);
function onButtonClick( Event:MouseEvent ):void {
  var name:String= "FLASH_EVENT";
  if (ExternalInterface.available) {
    ExternalInterface.call('dataLayer.push',{'event': name});
  }
}

ExternalInterface メソッドが正しく機能するように、SWF を埋め込む際には、allowscriptaccess 属性が always に設定されていることを確認してください。

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
        width='300' height='300' id='player1' name='player1'>
  <param name='movie' value='file.swf'>
  <param name='allowfullscreen' value='true'>
  <param name='allowscriptaccess' value='always'>
  <param name='flashvars' value='file=playlist.xml'>
  <embed id='player1' name='player1'
         src='file.swf'
         width='300' height='300'
         allowscriptaccess='always'
         allowfullscreen='true'
         flashvars="file=playlist.xml"/>
</object>

JavaScript をサポートしていないデバイス向けにデータレイヤー変数を追加する

JavaScript を無効にしている訪問者や JavaScript をサポートしていないデバイスからの訪問者に対応するため、Google タグマネージャーには、メインの GTM JavaScript を読み込めない場合でも JavaScript に依存しないタグを導入できる <noscript> スニペットが含まれています。

ただし、データレイヤー（ページ読み込み時に宣言されるデータレイヤー変数を含む）と、データレイヤーにプッシュされるイベントおよび動的データレイヤー変数は、すべて JavaScript に依存して機能することに注意してください。したがって、JavaScript に依存しないタグ（JavaScript を読み込めなくても配信する必要があるタグ）を配信するトリガーがデータレイヤー変数に依存している場合、そのデータレイヤー変数はクエリパラメータとして <noscript> iframe に渡す必要があります。たとえば、pageCategory が sports で visitorType が returning のときにタグを配信するには、対象のページのコンテナスニペットを次のように変更します。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX&pageCategory=sports&visitorType=returning" height="0"
                  width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

この場合、各データレイヤー変数は、アンパサンド（&）で区切られた書式なしテキストのクエリパラメータとして iframe のソース URL の末尾に追加されます。

セキュリティ

Google タグマネージャーには、ウェブサイトやアプリのセキュリティを確保するためのさまざまな機能が組み込まれています。以下のコードレベルのセキュリティ機能に加えて、タグマネージャーのアクセス制御、2 段階認証プロセス、不正なソフトウェアの検出についても理解することをおすすめします。

管理者はインストールのタグの導入を制限して、特定のタグのみを導入できるようにできます。また、実装されているコンテンツセキュリティポリシー（CSP）と連携するように Google タグマネージャーを設定することもできます。

プロトコル連動 URL を使用する

デフォルトでは、Google タグマネージャーのコンテナスニペットは常に https を使用してコンテナを読み込みます（https://www.googletagmanager.com）。これにより、悪意のある第三者や不正な情報収集からコンテナを保護できるほか、多くの場合、パフォーマンスも改善されます。

Google タグマネージャーのコンテナをプロトコルに連動して読み込む場合は、コンテナスニペットのソース URL プロトコル（下記のハイライト表示部分）に https:// ではなく // を使用します。

<!-- 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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

プロトコル連動 URL を使用すると、コンテナは http:// URL のページでは http を使用して読み込まれ、https:// URL のページでは https を使用して読み込まれます。

Google タグマネージャーの古いバージョンのコンテナスニペットでは、コンテナが必ずプロトコル連動 URL で読み込まれていました（//www.googletagmanager.com）。このようなプロトコル連動型の従来のコンテナスニペットは、更新しなくても引き続き機能します。

Google タグマネージャーのほとんどのタグテンプレートもプロトコル連動であるため、セキュリティで保護されているページでカスタムタグを配信する場合は、そうしたタグもプロトコル連動かセキュアである必要があります。

デベロッパー ガイド

データレイヤーを使用する

データレイヤー変数をページに追加する

不適切な例

適切な例

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

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

非同期構文の仕組み

よくある問題の回避方法

dataLayer を上書きしない

dataLayer オブジェクト名は大文字と小文字が区別される

変数名は引用符で囲む

ページ間で変数名の一貫性を保つ

動作しない例

適切な例

ページの読み込み時にタグを配信するために必要な情報は、コンテナ スニペットより上にあるデータレイヤーで宣言する

Google タグ マネージャーで導入したタグは、ハードコードしたり別のツールで導入したりしない

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

Google タグ マネージャーにタグを移行する

複数のドメイン

1 つのページで複数のコンテナを使用する

Flash と ActionScript

JavaScript をサポートしていないデバイス向けにデータレイヤー変数を追加する

セキュリティ

プロトコル連動 URL を使用する

デベロッパーガイド

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

ページの読み込み時にタグを配信するために必要な情報は、コンテナスニペットより上にあるデータレイヤーで宣言する

Google タグマネージャーで導入したタグは、ハードコードしたり別のツールで導入したりしない

Google タグマネージャーにタグを移行する