Google Analytics 4 (GA4) のGoogleタグについて調べてみた

Google Analytics 4 (GA4) 用のGoogleタグは何をしているのか不思議に思ったので書き留めておきます。
主に生成AIとやりとりをして得た情報ですので正確性は不明ですが、概ね正しいのではないかと思っています（間違っている点はご指摘いただければ幸いです）。

想定読者

基本的なプログラミングを身につけているGA4初心者

Googleタグとは

下記のようなスニペットで、サイトに埋め込むことでそのサイトからデータ収集ができるようになります。

Googleタグ部分
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

伏せ字にしている所は「G-」から始まる測定IDが入ります。それ以外の箇所はどのGoogleタグも同じ内容です。
測定IDの確認方法はこちら（公式ページ）

Googleタグのコード

ではGoogleタグを一行ずつ見ていきましょう。

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

Google Tag Managerのスクリプト(以下「gtagスクリプト」と表記します)を非同期で読み込みます（async属性により、ページの読み込みを遅らせることなくスクリプトを実行します）。

測定IDがURLに含まれていることからも想像できますが、このスクリプトはあなたがGA4で行った設定が反映されています。

window.dataLayer = window.dataLayer || [];

dataLayerオブジェクトを初期化します。
すでに存在する場合は既存のものを使用し、存在しない場合は新しい空の配列を作成します。

このdataLayerは「gtagスクリプト」によって監視されており、dataLayerにpushされたオブジェクトを元にGA4へデータが送信されます。

なお、gtagスクリプトは非同期で読み込まれますので、読み込みが終了するまではGA4へデータは送信されず、dataLayerはGA4へ送信するデータ置き場（キュー）として働きます。

次にdataLayerに引数をpushするだけのgtag関数を定義しています。

function gtag(){dataLayer.push(arguments);}

argumentsはJavascriptの予約語で、関数内で使用でき、その関数に渡されたすべての引数を含む配列風オブジェクトです。

配列風オブジェクトの説明はこちら(mdn)

gtag関数は表向き？は上に記載した定義の通りwindow.dataLayerに引数をpushするだけの関数なのですが、「gtagスクリプト」がdataLayerを監視しているため実質的にGA4にデータを送るための関数として機能します。

gtag関数はこちら（公式）に記載のように、下記のような関数と見なすことが出来ます。

gtag([command], [command parameters]);
[command] は次のいずれかのコマンドです。
config
get
set
event
consent
[command parameters] は、gtag() に渡すことができるパラメータです。コマンド パラメータはコマンドによって異なります。...以下略

話が横に逸れますが、このgtag関数を用いて下記のように独自のeventをGA4に伝えることが出来ます。
この場合、クリックされたボタンのIDとtextをGA4に伝えています。

<button id="buttonId">クリックしてください</button>

<script>
  // ボタン要素を取得
  var button = document.getElementById('buttonId');

  // クリックイベントリスナーを追加
  button.addEventListener('click', function() {
    // GA4にイベントを送信
    gtag('event', 'button_click', {
      'button_id': 'buttonId',
      'button_text': this.textContent
    });
  });
</script>

さて、話を元に戻してGoogleタグでは次に、下記のgtag関数を実行しています。

gtag('js', new Date());

ご覧の通り'js'というcommandは出てこないのですが、このコマンドはGA4トラッキングの初期化のために必要な特殊コマンド（ユーザーが独自に使用することのないコマンド）のようです。

dataLayerが空配列で初期化された場合、この関数の実行によってdataLayerには下記のような感じになります（雰囲気だけ）。

dataLayer = [
  {
    0: 'js',
    1: Dateオブジェクト // 実行日時
  }
];

"js"コマンドの場合はGA4にセッション開始のシグナルを送ります。
次に"config"を第一引数にしてgtag関数を実行します。

gtag('config', 'G-XXXXXXXXXX');

ご存じだと思いますがconfigはconfiguration(設定)の略で、この関数はGA4の基本設定を適用し、自動トラッキングを開始させます。

この時dataLayerは下記のようになっているはずです。

dataLayer = [
  {
    0: 'js',
    1: Dateオブジェクト // 実行日時
  },
  {
    0: 'config',
    1: 'G-XXXXXXXXXX'
  }
];

このことはconsoleで"dataLayer"の戻り値から下記のように確認できます。

すでに"js"と"config"以外に３つのeventが発生していることも分かります。

これらのeventが配列風オブジェクトではなく、普通のオブジェクトになっているのはgtag関数を介さずにdataLayer.push({...})として追加されているものと考えられます。

余談

初めに実行される下記の関数以外はすべてgtagスクリプトが実行する訳ですが、下記関数もgtagスクリプトが実行すれば良いのではないかと思いませんか？

  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');

本文でも少し触れた通り、gtagスクリプトは非同期読み込みのため、いつ読み込みが終了し関数が実行されるか分かりません。

一方下記のコードはインラインで実行されるため、正確なタイムスタンプを生成することが出来、それをdataLayerに保存しておくことで、gtagスクリプトがロードされた時にまとめて処理することが可能になります。

まとめ

まとめるとこんな感じになります。

// gtagスクリプトをasyncで読み込む
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];　// 送信するデータの置き場所を作る
  function gtag(){dataLayer.push(arguments);}　// 上のデータ置き場に情報を入れる関数を定義
  gtag('js', new Date());　// タイムスタンプを作成し、セッション開始
  gtag('config', 'G-XXXXXXXXXX');　// 初期設定を行う
</script>

以上、GA4のGoogleタグの基本的な仕組みについて解説しました。

初めての記事投稿で分かりにくい点も多かったと思いますが、最後まで読んでいただきありがとうございました！

反論、コメント、いいね等なんでもいただければとても嬉しいです！