GA4移行の切り札、Google Analytics の gtag.js と「接続済みのサイトタグ」の仕組みを徹底解説
こんにちは、羽山です。
ユニバーサルアナリティクスの終了がアナウンスされましたね。というわけで本日はユニバーサルアナリティクスと Google アナリティクス 4 プロパティ（以降 GA4 と表記）の併用に使われることが多い「接続済みのサイトタグ」機能について解説します。
しかしその前に、まずは記録用のタグや Google Analytics のバージョンについても状況が複雑で理解が難しいのでその解説から始めましょう。
記録用タグ
Google Analytics にアクセスログを記録するために用いるタグは ga.js, dc.js, analytics.js, gtag.js など様々なバージョンがあります。
一方で2023年7月に終了することがアナウンスされたのは「ユニバーサルアナリティクス」と呼ばれるもので、それと前述の記録用タグは1対1で対応していません。
ユニバーサルアナリティクスとは Google Analytics 内部の記録先の仕組みのバージョンであり、そこにアクセスログを記録するには ga.js, dc.js, analytics.js, gtag.js のいずれの記録用タグでも可能です。
（※ただし「記録できる」というだけであり Google が古い記録用タグを公式サポートしているかどうかはまた別の話です）
今まで Google Analytics は長い歴史の間に少しずつ記録先の仕組みは変化していましたが、原則としてほぼ互換性を保っていたので記録用タグの違いはほとんどのケースでは目立たない違いでしかありませんでした。
互換性が失われた数少ない例としては ga.js ではカスタム変数として記録されていたものが、analytics.js では利用できなくなって代わりにカスタムディメンションとなった件が挙げられます。しかしこれも Google Analytics の画面ではカスタム変数・カスタムディメンションのどちらでも解析可能なので利用者がどちらに記録されているかを意識した上でほぼ同じように利用可能でした。
しかし今回移行先となった GA4 はユニバーサルアナリティクスの後継バージョンとして登場したもので、ユニバーサルアナリティクスとは完全に互換性を失っていて、画面UIも大きく一新されて利用者はまた一から慣れる必要があります。
gtag.js とは
GA4 の記録用タグとしては現時点で gtag.js のみがサポートされています。ユニバーサルアナリティクスは様々な記録用タグを用いてアクセスログの記録をしているので、この点では GA4 はシンプルです。
ただしgtag.js はグローバルサイトタグと呼ばれていて、Google のサービス全般で利用可能なものになっていて、前述のユニバーサルアナリティクスの記録や広告タグなどにも同じ gtag.js が使われている点は注意が必要です。
そして gtag.js を Google Analytics の記録に利用する場合は簡易的なタグマネージャのような機能を利用することができます。
これが当記事で解説する「接続済みのサイトタグ」ですが、その理解のためにはまず gtag.js 自体の仕組みを知る必要があります。
gtag.js の仕組み
まずは gtag.js の構造を見てみましょう。
グローバルサイトタグと呼ばれるだけあって1つのタグを複数の用途に流用しやすい作りになっています。
ユニバーサルアナリティクスのタグ
以下は代表的なユニバーサルアナリティクスの埋め込みコードです。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-000000000-1');
</script>
広告のタグ
gtag.js は1つのタグで複数の用途に利用できるので、例えば次のような AW-000000000 の広告タグを追加する場合は両方のタグをマージして追加します。
<!-- Global site tag (gtag.js) - Google Ads -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-000000000"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-000000000');
</script>
マージ後のタグ
具体的には以下のように gtag('config', ...) の部分を広告のタグから切り取って、ユニバーサルアナリティクス側の gtag.js のタグに1行追加することで別の用途のタグを追加できる仕組みになっています。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-000000000-1');
gtag('config', 'AW-000000000');
</script>
ちなみにこの例ではユニバーサルアナリティクスのタグに広告タグを追加しましたが、その逆に広告タグに対してユニバーサルアナリティクスのタグを追加しても問題なく動作します。
ただし後述しますが gtag.js にはコントローラという概念があり、その関係でユニバーサルアナリティクスのタグを主とした方がベターです。
接続済みサイトタグ
gtag.js を利用している場合、ユニバーサルアナリティクスおよび GA4 の管理画面で「接続済みサイトタグ」機能を利用可能です。
これが簡易的なタグマネージャ機能であり、タグを埋め込んだ後に Google Analyticsプロパティの記録先を動的に追加することができます。
該当のユニバーサルアナリティクスプロパティ（UA-000000000-1）の設定を開いて「接続済みのサイトタグ」（上図の赤線部分）を開きます。
ここで事前に作成しておいた別の Google AnalyticsプロパティのトラッキングIDを追加すると自動的にそのプロパティも読み込まれてアクセスログが記録されるようになります。
例えば GA4 のプロパティを作成して、そのトラッキングIDをユニバーサルアナリティクス側の「接続済みのサイトタグ」に設定すると、ユニバーサルアナリティクスを使いながらも GA4 にも同じアクセスログが記録されて両方を併用することができます。
ユニバーサルアナリティクスからだけでなく、GA4からも「接続済みのサイトタグ」を設定することができます。GA4 のデータストリームからストリームを選択した先に「接続済みのサイトタグ」（上図の赤線部分）があります。
しかしこの「接続済みのサイトタグ」機能には大きな注意点があります。
その理解のために次は gtag.js の「コントローラ」について解説します。
gtag.js のコントローラ
gtag.js は1つのタグで複数の用途に使えることが分かりましたが、そのタグ同士には主従関係があります。
主となるタグを「コントローラ」と呼びますが、そのコントローラになるのは以下のような埋め込みタグの2行目にある scriptタグの読み込み時に引数（この場合は id=UA-000000000-1）で指定される id に紐づくタグです。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-000000000-1');
gtag('config', 'AW-000000000');
</script>
実はユニバーサルアナリティクスまたは GA4 の「接続済みサイトタグ」機能を利用するためには該当プロパティがコントローラである必要があり、コントローラではないプロパティで「接続済みサイトタグ」の設定を入れても無視されてしまいます。
これだけでは分かりにくいので実際に試してみるために GA4 で以下の3つのプロパティを作成します。（※IDは仮です）
| プロパティ名 | ID |
|---|---|
| ga4_1 | G-XXXXXXX001 |
| ga4_2 | G-XXXXXXX002 |
| ga4_3 | G-XXXXXXX003 |
埋め込みコード
埋め込みコードは以下の ga4_1(G-XXXXXXX001) のコードを利用します。
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX001"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX001');
</script>
接続済みサイトタグの設定
次に Google Analytics の各プロパティから以下のように「接続済みサイトタグ」の設定を行います。
- ga4_1 → ga4_2 へ接続
- ga4_2 → ga4_3 へ接続
つまり 1 → 2 → 3 と数珠つなぎにしています。
この状態でサイトにアクセスすると以下のプロパティに対してアクセスログが記録されます。
| プロパティ | 記録有無 |
|---|---|
| ga4_1(G-XXXXXXX001) | ○ |
| ga4_2(G-XXXXXXX002) | ○ |
| ga4_3(G-XXXXXXX003) | × |
ga4_1 は gtag('config', 'G-XXXXXXX001'); によって読み込まれ、 ga4_2 は ga4_1 の接続済みサイトタグの設定によって読み込まれます。
しかし ga4_3 は ga4_2 の接続済みサイトタグに設定はされているものの、 ga4_2 がコントローラではないので設定が無視された結果として読み込まれません。
埋め込みコード
では埋め込みタグを次のようにあえてトリッキーな状態に変えたらどうなるでしょうか？
コントローラ（id=G-XXXXXXX002）を ga4_2(G-XXXXXXX002) にしつつも gtag('config', 'G-XXXXXXX001'); は手を加えず ga4_1(G-XXXXXXX001) のままにしています。
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX002"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX001');
</script>
この状態でサイトにアクセスすると以下のプロパティに対してアクセスログが記録されます。
| プロパティ | 記録有無 |
|---|---|
| ga4_1(G-XXXXXXX001) | ○ |
| ga4_2(G-XXXXXXX002) | × |
| ga4_3(G-XXXXXXX003) | ○ |
コントローラの役割は gtag.js 自体の仕組みのロードと、「接続済みのサイトタグ」で設定されたプロパティのロードです。そのため ga4_2 はコントローラとしては読み込まれるものの Google Analytics のタグとしては読み込まれないので記録されません。一方で gtag('config', 'G-XXXXXXX001'); で読み込まれた ga4_1 と「接続済みのサイトタグ」経由で読み込まれた ga4_3 には記録されます。
ちなみにユニバーサルアナリティクスとGA4で「接続済みのサイトタグ」の設定画面に多少の違いはありますが動作には差がありません。つまり前述の例の一部をユニバーサルアナリティクスに変えても結果は変わりません。
ユニバーサルアナリティクスから接続済みサイトタグで GA4 に記録している場合の対処方法
2023年7月に停止するのはユニバーサルアナリティクスへの記録なのでユニバーサルアナリティクスに設定した「接続済みのサイトタグ」の設定はその時点ではまだ生きる可能性が高そう（※注 未確認）です。しかし長期的にはユニバーサルアナリティクスの管理画面は利用できなくなるはずなのでいずれユニバーサルアナリティクスのプロパティに設定した「接続済みのサイトタグ」も動作しなくなると思われます。
そこでユニバーサルアナリティクスのプロパティから GA4 に接続している場合は、以下のような方法で GA4 プロパティ駆動に切り替えることをオススメします。
- GA4 プロパティ側の「接続済みのサイトタグ」にユニバーサルアナリティクスのプロパティを追加する
- ユニバーサルアナリティクスと GA4 でクロスに接続する状態になるものの、コントローラであるプロパティ以外の設定は動作しないので問題ない
gtag.js埋め込みタグを変更してコントローラを GA4 のプロパティに変更する- 切り替えた時点で GA4 の設定が生きるようになる、接続済みのサイトタグ設定で引き続きユニバーサルアナリティクス側にも記録される
ただし「接続済みのサイトタグ」を利用した読み込みはデフォルト設定になるので、埋め込みタグ上で特別な設定をしている場合は互換性を維持できない点はご注意ください。
またサイトの状況によっては上記の方法ではうまく行かない可能性もあるのでしっかりテストした上で実施してください。
応用例
次はさらに複雑な設定で動作を試してみます。
- ga4_1 から
- ga4_2 へ接続
- ga4_3 へ接続
- ga4_2 から
- ga4_1 へ接続
- ga4_3 へ接続
- ga4_3 から
- ga4_1 へ接続
- ga4_2 へ接続
上記のように設定するとどのプロパティの埋め込みコードに切り替えても等しく同じ状態での記録を維持できます。
例えば以下の ga4_1 の埋め込みコードを利用すると ga4_1 の接続済みサイトタグ設定から ga4_2, ga4_3 が読み込まれて、gtag('config', 'G-XXXXXXX001'); によって ga4_1 も読み込まれます。
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX001"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX001');
</script>
設定を間違えると？
参考までに設定を間違ったケースについても触れておきます。
接続済みのサイトタグの設定は先ほどの例のままで以下のような埋め込みコードにするとどうなるでしょうか？
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX001"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX001');
gtag('config', 'G-XXXXXXX002');
gtag('config', 'G-XXXXXXX003');
gtag('config', 'G-XXXXXXX003');
</script>
この状態でサイトにアクセスすると全てのプロパティにアクセスが記録されるのですが、設定を読み込んだ回数分だけ素直に重複してしまいます。
| プロパティ | 記録回数 |
|---|---|
| ga4_1(G-XXXXXXX001) | １回 |
| ga4_2(G-XXXXXXX002) | ２回 |
| ga4_3(G-XXXXXXX003) | ３回 |
ga4_1 がコントローラで gtag('config', 'G-XXXXXXX001'); によって読み込まれるので記録回数は１回です。
ga4_2 は ga4_1 のコントローラ経由で読み込まれた上に gtag('config', 'G-XXXXXXX002'); でも読み込まれるので同じアクセスが２回重複して記録されます。
ga4_3 は ga4_1 のコントローラ経由で読み込まれた上に gtag('config', 'G-XXXXXXX003'); が２回記述されているので合計で３回重複して記録されます。
まとめ
さて今回はユニバーサルアナリティクスが停止することとなったので急遽 gtag.js と「接続済みのサイトタグ」の解説を行いました。
ユニバーサルアナリティクスへのデータ記録は2023年7月1日に停止して、その後最低でも6ヶ月間は閲覧可能とのことなので最短では2024年1月からはユニバーサルアナリティクス側で記録したデータを閲覧できなくなってしまう可能性があります。GA4 は移行してからのアクセスログが記録されることになるので早ければ早いほど古いデータも閲覧できます。ぜひ皆さん早めの対応をオススメします。
さて、そんなラクーングループではエンジニア・デザイナーを募集中です。もしご興味を持っていただけましたら、こちらからエントリーお待ちしています！
![[GA4] Google Analytics 4 でサイト速度を計測する方法](https://techblog.raccoon.ne.jp/wp-content/uploads/2022/04/00.ga4_sitespeed-500x500.jpg)
