dataLayerをGTMより先に記述すべき理由とは？

GA4計測における基本とベストプラクティスを解説

Google Tag Manager（以下、GTM）とGoogleアナリティクス4（以下、GA4）を組み合わせて利用する際に、しばしば議論になるのが「dataLayerをどのタイミングで読み込むのか？」という問題です。特に初心者の方にとっては、この順序の重要性がピンとこないことも多いのではないでしょうか。

本記事では、JavaScriptの基本的な仕組みやECサイト運用での実例を交えながら、なぜdataLayerはGTMよりも先に記述するのが望ましいのかをわかりやすく解説します。正しい実装によって、データの欠落やトラブルを未然に防ぎ、円滑なタグ運用を実現しましょう。

1. dataLayerとは？

1.1 dataLayerの役割

dataLayerは、ウェブページとGTM間でデータをやり取りするために使用される「一時的なデータ置き場」です。ECサイトの購入情報やユーザーの属性、ページのカテゴリなど、あらゆる情報をGTMに渡す“橋渡し”の役割を担います。

たとえば、商品購入のイベントを記録したい場合、以下のように配列形式でデータを定義・追加（push）します

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: '12345',
    value: 7500,
    items: [
      { item_name: 'Tシャツ', item_id: 'A001', price: 2500, quantity: 2 }
    ]
  }
});

GTM側では、このdataLayerに格納された情報をもとに、GA4やその他のツールへデータを送信します。

2. dataLayerをGTMより先に記述する理由

2.1 GTMが初期化される際、dataLayerの情報が必要になる

GTMのコード（GTMスニペット）が読み込まれるとき、GTMはページ上のdataLayerにすでに入っているデータを自動的に参照・処理します。GTMスニペットは通常、以下のようなコードになっています。

<!-- 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 -->

このスニペットが動き始めるタイミングで、既に定義されているdataLayerの内容があれば、それらをまとめて読み取り、タグの発火条件などに反映します。
しかし、もしdataLayerがまだ定義されていない状態（または空の配列）のままGTMが初期化されると、GTMは必要なデータを読み取ることができません。結果として、計測漏れやタグの発火ミスなどにつながるリスクが高まります。

2.2 初期イベントが取りこぼされるリスクがある

GTMは起動時にdataLayer内の情報を一括処理します。たとえば「購入完了イベント」などをpageviewと同時に送信したい場合、先にdataLayerが用意されていないと、初期時点のイベントが読み飛ばされてしまいます。
とくにECサイトでは、ユーザーが購入完了ページを表示した瞬間にイベントをキャプチャしたい場面が多いため、順番を誤ると重要なデータが計測されないという問題が起こりやすくなります。

2.3 トラブルシューティングが困難になる

初心者の方が最も苦労するポイントの一つが、「なぜタグが発火しないのか？」という原因調査です。

dataLayerの定義ミス
記述順序の不備
タイミングによる競合

など、複数の要因が絡むと原因の切り分けが難しくなります。
しかし、まずは「dataLayerをGTMスニペットより上に記述する」という基本を徹底するだけでも、初期イベントの取りこぼしやデータ欠落といったトラブルを大幅に減らすことができます。

3. 例外的にdataLayerを後から追記するケース

一方で、すべての情報をページロード時点でdataLayerに仕込めるわけではないという場面もあります。サイトの構築方法やデータの取得方法によっては、どうしても後からdataLayer.push()で情報を追加する必要が出てきます。以下では代表的な例を挙げます。

3.1 サーバーサイドで購入情報を事前に準備できる場合

ShopifyやWooCommerceなどのテンプレート型ECサイトの場合、サーバーサイドで生成された購入情報をHTML内に埋め込んでおけるケースが多いです。その際は、ページロード前にdataLayerを定義し、GTMスニペットより先に記述するのがベストです。
こうすることで、ユーザーが購入完了ページを開いた瞬間に必要なイベントを確実に渡せます。

3.2 クライアントサイドで購入情報を動的に取得する場合

SPA（シングルページアプリケーション）や独自開発サイトなどでは、購入情報やユーザーデータを非同期通信（AJAXやFetch APIなど）で取得することがあります。このように、ページロード時点で情報がない場合には、以下のように後からpushします。

fetch('/api/order-details')
  .then(response => response.json())
  .then(data => {
    window.dataLayer.push({
      event: 'purchase',
      ecommerce: data
    });
  });

この手法では、タイミングを管理しながらdataLayer.push()を行う必要があるため、イベントが正しく発火するかをしっかりテストすることが重要です。

4. dataLayer記述のベストプラクティス

では、どのようにdataLayerを扱うのが理想的でしょうか？以下のポイントを押さえておくと、トラブルを防ぎながら柔軟な運用を行えます。

GTMスニペットより上にdataLayerを定義する
- ページの<head>や<body>直下など、GTMより先に記述しておく。
- 初期データを確実にGTMに渡し、イベントを漏れなく計測する。
動的データはdataLayer.push()で適切に追記する
- 非同期で取得する情報や、ページロード後に変化するデータは、イベント発生タイミングでpushする。
- pushしたデータが確実にタグ発火条件を満たすよう、タグ設定やトリガーの設定を見直す。
事前データと動的データを分けて管理する
- ユーザーIDやページカテゴリなど、ページ読み込み時点で判明している情報はHTMLに仕込む。
- 購入金額や商品詳細など、ページ読み込み後に取得する情報はpushで追記する。
デバッグモードで動作確認を徹底する
- GTMのプレビューモードを使い、dataLayerに正しいデータが入っているか、タグ発火が適切かを確認する。
- できればテスト用のステージング環境を用意し、何度も検証を行う。

5. まとめ

dataLayerをGTMより先に記述するのは、GTMが正しく初期データを取得し、イベントを漏れなく処理するための重要な原則です。

先にdataLayerを定義しておけば、初期イベントを取りこぼすリスクが大幅に低下する
トラブルシューティングも容易になり、初心者の方でも原因を特定しやすい
場合によっては後からdataLayer.push()が必要になるが、基本的な考え方は「GTMより先にできるだけ多くの情報を用意しておく」こと

初心者の方は、まず「dataLayerはGTMへ渡すためのメモ帳」というイメージを持っていただくと良いでしょう。そのうえで、サーバーサイドで用意できる情報は先に仕込む、動的に生成される情報は後からpushする、といった使い分けをマスターしてください。正しい実装を心がけることで、ECサイト運営やデータ分析がスムーズに進み、ビジネス成果の最大化につながります。

最後まで読んでいただいて、ありがとうございました。

GTMやGA4、Looker Studioに関するご相談は、お気軽に下記までお願いいたします。

https://and-aaa.com/contact