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


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

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

## Googleタグとは
下記のようなスニペットで、サイトに埋め込むことでそのサイトからデータ収集ができるようになります。
![スクリーンショット 2024-06-30 9.05.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1194904/a79b8d6b-972b-c1dd-fce1-991cce04cdda.png)

```html
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の確認方法は[こちら](https://support.google.com/analytics/answer/9539598?hl=ja)（公式ページ）

## Googleタグのコード
ではGoogleタグを一行ずつ見ていきましょう。

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

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

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

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

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

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

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

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

```javascript
function gtag(){dataLayer.push(arguments);}
```
argumentsはJavascriptの予約語で、関数内で使用でき、その関数に渡されたすべての引数を含む配列風オブジェクトです。

配列風オブジェクトの説明は[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments)(mdn)

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


gtag関数は[こちら](https://developers.google.com/tag-platform/gtagjs/reference?hl=ja)（公式）に記載のように、下記のような関数と見なすことが出来ます。

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

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

```html
<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関数を実行しています。

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

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

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

```javascript
dataLayer = [
  {
    0: 'js',
    1: Dateオブジェクト // 実行日時
  }
];
```
"js"コマンドの場合はGA4にセッション開始のシグナルを送ります。
次に"config"を第一引数にしてgtag関数を実行します。

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

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

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

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

![スクリーンショット 2024-06-30 14.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1194904/a36949f8-43b1-767b-d718-d56c1cdbca72.png)

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

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


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

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

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

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




## まとめ
まとめるとこんな感じになります。
```html
// 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タグの基本的な仕組みについて解説しました。

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

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