【GA4＋UA】Googleアナリティクスを両方導入したいときはどこにどう書く？

今日は、htmlファイルのheadタグ内にGoogleアナリティクスのコードをどのように記述するか問題についてです。

いつもWordpressを使っているので、ソースに直接書くという機会が少なく忘れがちなので、ここにメモです。

GoogleアナリティクスのGA4とUAって何？

GA4は2020年10月にリリースされた新しいGoogleアナリティクスのバージョンで、4番目のGoogleアナリティクスなので「Google Analytics 4（GA4）」という名前なんだそう。

その前の、いまだ多くの方が使っているGoogleアナリティクスは、「ユニバーサルアナリティクス（UA）」）という名前で、わたしもWebを習い始めた頃はこれだったので、このコードに親しみがあります。

でも、2020年にこれが発表されてから、アナリティクスのページもリニューアルされて、だいぶUAコードを探しづらくなりました。GA4に移行しようとしているので、GA4コードは取得しやすくなっていますね。

現状、まだ２つのバージョンが同時進行しているので、「どっちも入れたい」という場合はどうしたらいいのだろうか？？と思われる方のために、覚書を書きました。

アナリティクスタグ取得の流れ

ここでは、もうAnalyticsにプロパティを登録済みという前提で話を進めます。グローバルサイトタグ（gtag.js）というものをアナリティクスから見つけて、GA4、UA両方のトラッキングコードと呼ばれるコードを取得する流れです。

GA4タグ取得の手順

step
1GoogleアナリティクスのGA4のアカウントに行く

プロパティがGA4になっているのを確認し、左下の歯車マーク「設定」をクリックすると、設定画面が開きます。

step
2データストリームをクリック

アカウント→プロパティの中に「データストリーム」があるので、そこをクリックします。

step
3データストリームからURLをクリック

「すべて」「iOS」「Android」「ウェブ」と別れていますが、「すべて」のままで構いません。そのままURLをクリックします。

step
4ウェブストリームの詳細からタグ取得

ページ中ほどに、「タグの設定手順」というところがあります。その下に、

グローバルサイトタグ（gtag.js）ウェブサイト作成ツールや、CMS でホストされるサイトをご使用の場合、このタグを設定

と書かれているところがあるので。そこを開くと、GA4のコードが出てきます。

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

gtag(‘config’, ‘G-XXXXXXXXXX’);

</script>

同様に、UAのタグを取得していきます。

UAタグ取得の手順

step
1GoogleアナリティクスのUAのアカウントに行く

プロパティがUAになっているのを確認し、左下の歯車マーク「管理」をクリックすると、設定画面が開きます。

step
2データストリームをクリック

アカウント→プロパティの中に「トラッキング情報」があるので、そこをクリックすると、上の方に「トラッキングコード」という項目が出てきます。

step
3トラッキングコードの中からUAタグ取得

トラッキング ID

UA--XXXXXXXXXX

となっている部分が必要です。

これらを合わせていきます。

GA4とUAのタグを合体させる

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

gtag(‘config’, ‘G-XXXXXXXXXX’);
gtag(‘config’, ‘UA-XXXXXXXXXX-1’);

</script>

こんなふうに、GA4の1行をコピペして、gtag(‘config’, ‘ ’);の中にUAのコードを入れてしまえばいいということがわかりました！

どこに入れるのが正解？

生成したこれらのトラッキングコードは、計測したい全ページに貼り付けます。つまり、下層ページがる場合は、下層ページの全部のhead内に貼り付けるということになります。
貼り付ける場所はhtmlソースの</head>タグの直前と覚えておいてください。

GA4とUAを合体させる件について、まとめ

一瞬戸惑ってしまいますが、慣れてしまえばなんともない作業です。ちょっと作業量が増えてめんどくさいですが、より正確なデータをたくさん欲しい方は、両方の導入をおすすめします！