ウェブトラッキングのすべて - Google Tag (gtag.js)とGoogle Tag Managerによるウェブトラッキング：データの流れと技術的仕組み

Google Tag (gtag.js)とGoogle Tag Managerによるウェブトラッキング：データの流れと技術的仕組み

Tags: Google Tag, gtag.js, Google Tag Manager, GTM, データレイヤー, ウェブトラッキング, HTTPリクエスト, イベントトラッキング, GA4, タグ管理

はじめに

現代のウェブサイト運用において、ユーザー行動の分析や広告効果の測定は不可欠です。その中心的な役割を担うのが、ウェブトラッキング技術です。特にGoogleが提供する「Google Tag」と「Google Tag Manager (GTM)」は、多くのウェブサイトで利用されています。これらのツールは便利である一方、その裏側でデータがどのように収集され、どこへ送信されているのか、その技術的な仕組みについて深く理解している方は少ないかもしれません。

この記事では、Google Tag (gtag.js) と Google Tag Manager を組み合わせたウェブトラッキングの基本的なデータの流れと、その技術的な仕組みについて解説します。この理解は、より正確なデータ収集設計、トラブルシューティング、そしてプライバシー規制への適切な対応に役立ちます。

Google Tag (gtag.js)とは

Google Tag (gtag.js) は、Googleの各種測定プロダクト（Google Analytics 4, Google Ads, Floodlightなど）の機能を統一的に利用するためのJavaScriptライブラリです。かつては Universal Analytics 用の analytics.js や Google Ads 用の ads.js など、プロダクトごとに異なるタグが存在しましたが、gtag.js はこれらの機能を統合し、よりシンプルに記述できるよう設計されています。

ウェブサイトに gtag.js を直接設置する場合、HTMLの <head> タグ内に以下のようなスクリプトコードを記述します。

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

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

このコードは、gtag.js ライブラリを非同期で読み込み、dataLayer というJavaScript配列を定義し、gtag 関数を初期化します。gtag('config', 'GA_MEASUREMENT_ID') は、特定の測定ID（GA4のプロパティIDなど）に対して基本的なトラッキング（ページビューなど）を開始するためのコマンドです。

gtag.js を用いることで、個別のプロダクトタグを直接管理するよりも、コード量を減らし、複数のプロダクト間で設定を共有しやすくなります。

Google Tag Manager (GTM)とは

Google Tag Manager (GTM) は、ウェブサイトやモバイルアプリのタグ（トラッキングコード、広告タグなど）を、コードを直接編集することなく管理・配信できるツールです。GTMを利用することで、マーケターはエンジニアの助けを借りずに、必要なタグの追加、変更、削除を行うことが可能になります。

GTMは以下の主要な要素で構成されます。

コンテナ: ウェブサイトやアプリと紐づく、タグ管理の単位です。
タグ: 実際にウェブサイト上で実行されるトラッキングコードやスクリプトです（例: Google Analyticsタグ, Google Adsコンバージョントラッキングタグ, カスタムHTMLタグなど）。
トリガー: タグがいつ、どのような条件下で実行されるかを定義します（例: ページロード時, クリック時, フォーム送信時など）。
変数: タグやトリガーで使用される動的な値を保持します（例: URL, クリックされた要素のID, データレイヤーの値など）。

ウェブサイトにGTMを導入するには、GTMコンテナごとに発行される専用のコードスニペットを、ウェブサイトのHTMLの <head> と <body> の先頭にそれぞれ設置します。

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

このGTMコンテナースニペットが読み込まれると、GTMサーバーから最新の設定情報（どのタグを、どのトリガーで発火させるかなど）を取得し、定義されたルールに従ってタグを実行します。

gtag.jsとGTMの連携におけるデータの流れ

gtag.jsとGTMを組み合わせて利用する場合、通常は gtag.js ライブラリそのものを直接ウェブサイトに設置するのではなく、GTM上で「Google Tag」タイプのタグを設定します。

GTMコンテナの読み込み: ユーザーがウェブサイトを訪問すると、まずGTMコンテナースニペットが読み込まれ、GTMサーバーから最新のコンテナ設定が取得されます。
Google Tag (gtag.js) ライブラリのロード: GTM設定内に「Google Tag」タグが存在する場合、GTM自身が gtag.js ライブラリ（https://www.googletagmanager.com/gtag/js?id=GT-XXXXXX または測定IDを含むURL）をロードします。つまり、gtag.jsのロード自体もGTMが管理します。
dataLayerの初期化: GTMコンテナースニペットによって、window.dataLayer オブジェクトが初期化されます。これは、ウェブサイトからGTMへデータを渡すための主要な手段です。
イベントデータのプッシュ: ウェブサイト上でユーザーが特定のアクション（ボタンクリック、フォーム送信など）を行った際、ウェブサイトのJavaScriptコードやCMSの機能によって、関連するデータが dataLayer にプッシュされます。例えば、商品購入完了時に購入情報（金額、商品リストなど）をデータレイヤーに渡すコードは以下のようになります。

javascript window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'purchase', 'ecommerce': { 'transaction_id': 'T_12345', 'value': 100.00, 'tax': 5.00, 'shipping': 10.00, 'items': [ { 'item_id': 'SKU_12345', 'item_name': 'Example Item', 'price': 50.00, 'quantity': 2 } ] } }); 5. GTMによるdataLayerの監視とトリガーの発火: GTMは dataLayer を常に監視しており、push されたデータに含まれる event キーの値などを認識します。GTMの設定において、この event の値や他のdataLayer変数などを条件としてトリガーが設定されている場合、そのトリガーが発火します。 6. タグの実行: 発火したトリガーに関連付けられている「Google Tag」タグが実行されます。この際、GTMはデータレイヤーから必要な情報を取得し、gtag.js ライブラリの関数を呼び出します。例えば、データレイヤーにプッシュされた purchase イベントと ecommerce データは、GTMによってGA4の購入イベントとして認識され、gtag.js を通じて送信されます。 7. データの送信: gtag.js ライブラリは、受け取った情報（イベント名、パラメータ、Cookie情報、ブラウザ情報など）を整理し、Googleの収集サーバー（例: www.google-analytics.com や www.googletagmanager.com）に対してHTTPリクエストとして送信します。これは通常、非表示の1x1ピクセル画像をリクエストする、あるいはNavigator.sendBeacon APIを使用するなどの方法で行われます。このリクエストのURLには、測定IDやイベント名、各種パラメータがクエリパラメータとして含まれています。

例えば、GA4への購入イベント送信時には、以下のような形式のHTTPリクエストが裏側で発生しています。（実際のパラメータ名はより複雑です）

GET https://www.google-analytics.com/g/collect?v=2&tid=GA_MEASUREMENT_ID&cid=CLIENT_ID&en=purchase&pr[0].id=SKU_12345&pr[0].nm=Example%20Item&pr[0].pr=50.00&pr[0].qt=2&epn.transaction_id=T_12345&epn.value=100.00&epn.tax=5.00&epn.shipping=10.00&_p=PAGE_ID&sid=SESSION_ID&sct=SESSION_COUNT&seg=1&_fv=1&_slc=1&_gaz=1&_et=EVENT_TIME&_s=EVENT_SEQUENCE ...

このリクエストに含まれる情報（クライアントID、セッション情報、イベントの詳細パラメータなど）が、Google Analyticsなどのプロダクト側で処理され、レポートに反映されます。

技術的なポイント

非同期ロード: gtag.js および GTM スニペットは非同期で読み込まれるため、ウェブサイトの表示パフォーマンスへの影響を最小限に抑えられます。
dataLayer: ウェブサイトとGTM間のデータ連携における中心的な役割を担います。JavaScriptオブジェクトであり、そこにデータをプッシュすることでGTMに情報が渡されます。
HTTPリクエスト: 実際のトラッキングデータは、ブラウザからGoogleのサーバーへのHTTPリクエストという形で送信されます。開発者ツールのNetworkタブでこれらのリクエストを確認することで、どのようなデータが送信されているかをデバッグできます。
ファーストパーティCookie: Google TagやGTMによって設定されるCookieは、通常、ウェブサイトのドメイン（ファーストパーティ）で設定されます。これにより、クロスサイトトラッキング防止機能の影響を受けにくくなっています。

まとめ

Google Tag (gtag.js) と Google Tag Manager を利用したウェブトラッキングは、ウェブサイト側で dataLayer.push によってイベントデータをトリガーし、GTMがそれを検知して gtag.js を通じてGoogleのサーバーへHTTPリクエストとして送信するという流れで実行されます。

この仕組みを理解することは、単にタグを設置するだけでなく、

データレイヤーを適切に設計し、必要な情報をGTMに渡すこと
GTMのプレビューモードやブラウザの開発者ツールを活用し、正しくデータが収集・送信されているか検証すること
同意管理プラットフォーム (CMP) と連携し、ユーザー同意に基づいてタグの発火を制御すること

など、より高度で正確なウェブトラッキング実装を行う上で非常に重要です。

ウェブトラッキングの技術は常に進化しており、プライバシー規制やブラウザの機能によってその仕組みも変化し続けています。こうした変化に対応するためにも、基盤となるデータ収集・送信の技術的な仕組みを正確に把握しておくことが、Webマーケターにとって益々重要になっています。