GoogleアナリティクスとGoogleTagManagerを改めて勉強してみた。

はじめに

昔から使っていたけど、あまり理解していなかったGoogleアナリティクスとGoogleタグマネージャ。
ちゃんと理解する機会が出てきたので、調べた結果を残します。

間違っている可能性が大いにあるので、あくまでも参考程度に見て頂けると幸いです。

勘違いしていたこと

GoogleアナリティクスとGoogleタグマネージャはセットで、ウェブページのページビューを集計する。くらいにしか考えていなかった。

けど、独立した機能のようでした。

Googleアナリティクスのデータの受信方法

Googleアナリティクスは、アカウント→プロパティ→データストリームの3段階構成になっている。

データストリームには、「測定ID」（G-XXXXXXXXXX）というものがある。

ウェブページでGoogleアナリティクスの計測を設定したページを見ると

「https://www.google-analytics.com/g/collect?」

にリクエストを送っている。これがGoogleアナリティクスで集計するデータっぽい。

で、このリクエストに、パラメータ名：「tid」として、測定ID「G-XXXXXXXXXX」が含まれる。

これを元にGoogleアナリティクス側が処理して、画面から表示確認ができる。

更に、Googleアナリティクスで設定すれば、BigQueryにデータ連携もできる。

と脱線はここまでで。

ウェブページへの仕込み方法

以下２パターンがある。

その１ Google tag (gtag.js)

<!-- Google tag (gtag.js) -->
<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-XXXXXXXXXX」（測定ID）というIDが指定されています。

おそらくJS内で「G-XXXXXXXXXX」（測定ID）を

「https://www.google-analytics.com/g/collect?」

に送信するようなスクリプトが組まれていると推測。

要するに、

「https://www.google-analytics.com/g/collect?」

を送るためのJSって感じかと。

その２ Google Tag Manager

<!-- 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-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

「GTM-XXXXXXXX」（GTMのコンテナID）というIDが指定されています。

前提知識として、Google Tag Manager の画面で、イベント設定する際には「測定ID」（「G-XXXXXXXXXX」）と「トリガー」を設定することになります。
例えば、ある特定のボタンがクリックされた際に、あるパラメータをGoogleアナリティクスに送信したい。と思ったら

１）ある特定のボタンがクリックされた際というイベントを作る
２）あるパラメータを設定して、「測定ID」（「G-XXXXXXXXXX」）を指定
３）ある特定のボタンがクリック というトリガーを設定

という感じ。

また、Google ChromeのDevToolのネットワークタブを見ると以下の順で実行されていて、イニシエータが1個前になります。

１）https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXXX
２）https://www.googletagmanager.com/gtag/destination?id=G-XXXXXXXXXX&cx=c&gtm=XXXXXX
→イニシエータ＝gtm.js?id=GTM-XXXXXXXX
３）https://www.google-analytics.com/g/collect?v=2&tid=G-XXXXXXXXXX
→イニシエータ＝gtag/destination?id=G-XXXXXXXXXX&cx=c&gtm=XXXXXX

イニシエータから読み取ると、

１）の 「gtm.js?id=GTM-XXXXXXXX」内で、「destination?id=G-XXXXXXXXXX&cx=c&gtm=XXXXXX」 を取得
２）の「gtag/destination?id=G-XXXXXXXXXX&cx=c&gtm=XXXXXX」内で、「collect?」を送信

していると推測。

２）の「gtag/destination?」は、「その１ Google tag (gtag.js)」と同じようなものな気がする。

話を戻すと、おそらく「GTM-XXXXXXXX」（GTMのコンテナID）で、Google Tag Manager にアクセスすると、画面で設定されたイベントを元にJavaScritpを生成。
この時点で、画面で設定されたイベントに「G-XXXXXXXXXX」（測定ID）があるので、設定されたイベントを元に

「https://www.google-analytics.com/g/collect?」

を送信しているという雰囲気。

まとめ

その１ Google tag (gtag.js) は、標準のイベント（collectを送るタイミングと送る情報）のみに対応。

その２ Google Tag Manager は、標準以外に、いろんなタイミング、いろんな情報を送りたい。って時は、GTMで設定を行い、

「https://www.google-analytics.com/g/collect?」

を送るって感じ。

ちなみに、GTMの設定を変えても、GTMのJavaScriptが動的に設定を読み込み、送るタイミング、情報を制御してくれるようなので楽ちん。というお話。

番外編

「その１ Google tag (gtag.js)」、「その２ Google Tag Manager」を使わないでcollectに送信する方法

２つとも、Googleさんが提供するJSを利用しているのですが、それを使わないで、collectに送信する方法ってあるのかな？
と思って調べてみました。

「Measurement Protocol」というものが用意されており、「measurementId」「apiSecret」をパラメータ指定して、JSONを送信すると、集計がされます。

「measurementId」は、測定IDになります。
「apiSecret」は、Googleアナリティクス側で発行します。

・Measurement Protocol イベントを Google アナリティクスに送信する

・Measurement Protocol のリファレンス（送信できる情報）

・サンプルソース（Geminiさんに作ってもらいました）
※ 「sendBeacon」で送信しているケースになります。

        window.addEventListener('beforeunload', function() {
            // ここにあなたのGA4測定IDを記述してください
            const measurementId = 'YYYYYYY'; 
            const apiSecret = 'XXXXXX'; // ここにAPI Secretを記述

            const getClientId = () => {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.startsWith('_ga=')) {
                        return cookie.substring(4).split('.').slice(2).join('.');
                    }
                }
                return '';
            };
            const clientId = getClientId();

            const payload = {
                'client_id': clientId,
                'events': [{
                    'name': 'page_exit', 
                    'params': {
                        'page_path': window.location.pathname,
                        'page_title': document.title
                    }
                }]
            };

            const endpoint = `https://www.google-analytics.com/mp/collect?measurement_id=${measurementId}&api_secret=${apiSecret}`;
            navigator.sendBeacon(endpoint, JSON.stringify(payload));
        });

datalayerについて

Google タグ マネージャーと gtag.js でタグに情報を渡すために使用するオブジェクトがあるらしいです。
この辺りはまだちゃんと把握できていないので、公式のリンクだけ載せておきます。
（もう少し理解したら、追記しようかと。）

・データレイヤー