https://developers.google.com/tag-platform/devguides/datalayer?hl=ja
データレイヤーは、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 キーを使用してイベントの送信を開始します。