【UA-GA4併用】設定方法＜gtag.js探求編＞[4/4]｜Googleアナリティクス

Webサイト立ち上げ＆自身のサイトにGoogleアナリティクスを導入した際に、「UA-GA4併用設定」に関してモヤモヤしたことを明瞭にするために、調べたことや解決したことなどをシリーズ化した記事です。

最終節となるここでは、「gtag.jsスニペット」「gtag.jsの記述を1つのスニペットで」など、gtag.jsの記述に関する基本的な疑問からUA-GA4併用設定に関わる事象について探求したことを解説します。

シリーズ記事

【UA-GA4併用】設定方法＜全般編＞[1/4]｜Googleアナリティクス
【UA-GA4併用】設定方法＜Cocoon設定編＞[2/4]｜Googleアナリティクス
【UA-GA4併用】設定方法＜gtag.js調査編＞[3/4]｜Googleアナリティクス
【UA-GA4併用】設定方法＜gtag.js探求編＞[4/4]｜Googleアナリティクス（本記事）

gtag.jsスニペットとは？
複数のプロパティに対するgtag.jsの記述
- 2つのプロパティに対するgtag.jsを2つのスニペットで記述
- 2つのプロパティに対するgtag.jsを1つのスニペットで記述
gtag.jsスニペットの前半部分の処理
gtag.jsスニペットの後半部分の処理

gtag.jsスニペットとは？

スニペット（snippet）は「小さなひとまとまりコード」の意味です。
では「gtag.jsスニペット」とは、何を指すのでしょうか？

まず、gtag.jsのコードを見てみます。
（例：プロパティID＝UA_XXX）

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXX');
</script>

このgtag.jsのコードに対するgtag.jsスニペットとはどの部分でしょうか？

前半部分

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

でしょうか？
それとも後半部分

<script>
  ...

  gtag('config', 'UA-XXX');
</script>

でしょうか？
いろんなサイトを見ていても、「そら自明やろ」ということらしく詳しく書かれていません。

正解は、前半部分と後半部分を合わせたもの（ようするに全部）

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

  gtag('config', 'UA-XXX');
</script>

を「gtag.jsスニペット」と呼ぶそうです。

これについては、概ね以下のGoogle公式サイトに書かれています。

[UA→GA4] UA の gtag.js が GA4 にマッピングされる仕組み - アナリティクスヘルプ

これは、gtag.js ライブラリを使用し、ユニバーサルアナリティクス（UA）の gtag.js が Google ア...

複数のプロパティに対するgtag.jsの記述

複数のプロパティに対するgtag.jsを記述するという状況はあるのでしょうか？
答えは「ある」です。

例えば、以下のような状況が考えられます。

GoogleアナリティクスとGoogle広告を同時に利用したい。
GoogleアナリティクスでUAプロパティとGA4プロパティを併用したい。

では、このようなときに、gtag.jsのコードはどうやって記述すればよいのでしょうか？

以下では、2つのプロパティに対するプロパティIDはそれぞれ次のものとし、「2つのプロパティに対するgtag.js」の記述方法について考えていきます。

GoogleアナリティクスのUAプロパティ：プロパティID（トラッキングID）＝UA_XXX
GoogleアナリティクスのGA4プロパティ：プロパティID（測定ID）＝G_YYY

2つのプロパティに対するgtag.jsを2つのスニペットで記述

ごくごく単純に考えると、2つのプロパティ各々に対するgtag.jsが必要なので、それらを並べて記述することを思いつきます。

これをコードに表すと、

<!-- UAプロパティに対するパート -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXX');
</script>

<!-- GA4プロパティに対するパート -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YYY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G_YYY');
</script>

になります。

これは、前述のスニペットという観点で表現すると「2つのスニペットで記述されている」状態になります。

2つのプロパティに対するgtag.jsを1つのスニペットで記述

Google公式見解

[UA→GA4] UA の gtag.js が GA4 にマッピングされる仕組み - アナリティクスヘルプ

これは、gtag.js ライブラリを使用し、ユニバーサルアナリティクス（UA）の gtag.js が Google ア...

では、

『01: <script async src="https://www.googletagmanager.com/gtag/js?id=<任意のプロパティ ID A>"></script>』というコードに対し、
『この行がすでに存在する場合、再度実装する必要はありません。「config」行を追加するだけで、Google アナリティクス 4 プロパティの測定 ID を指定できます。』
と書かれています。

原文（英語）からの引用も交えると、「必要ありません（doesn’t need）」ですので、2つのスニペットで記述しても正常動作すると思われますが、1つのスニペットで記述することが推奨？されていると言えます。

この公式見解に従って、「既存のUAプロパティのgtag.js実装を使用して、GA4プロパティの処理を追加する」方法で、2つのプロパティに対するgtag.jsを1つのスニペットで記述すると、

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXX');
  gtag('config', 'G_YYY');
</script>

のようになります。

このコードにおいて、
前半部分

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

は、「すでに存在するため再実装する必要はない」ということになり、GA4に対するコードは追記不要となります。

後半部分

<script>
  ...

  gtag('config', 'UA-XXX');
  gtag('config', 'G_YYY');
</script>

は、既存のUAプロパティのコードに対し、「GA4プロパティのプロパティIDを新しいconfigディレクティブに追加する」処理「gtag('config', 'G_YYY');」を1行追加したものになります。

これらのコードの記述については、上述と同じ以下のサイトに詳しく記載されています。

[UA→GA4] UA の gtag.js が GA4 にマッピングされる仕組み - アナリティクスヘルプ

これは、gtag.js ライブラリを使用し、ユニバーサルアナリティクス（UA）の gtag.js が Google ア...

gtag.jsスニペットの前半部分の処理

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

について考えます。

この処理は何をしている？

このコード「<script src="JSファイル名"></script>」は、srcに指定したファイル（今回はJavaScript）をロードする処理です。

具体的には、JSファイル”https://www.googletagmanager.com/gtag/js”^[1]興味がある方は、このURLを直接ブラウズしてみてください。JSファイルの内容が表示されます。をロードしています。

多くの方に「そんなことぐらいわかってるわ」とお叱りを受けそうですが、自身は理解が浅かったのでこの機会に少しだけ勉強してみました。

asyncって？

これはロードを非同期にするための指定です。
ただし、非同期にするだけでなく、いろいろ「よい塩梅」にやってくれるようです。

これらについては、以下のあたりのサイトが参考になりました。

レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google for Developers

JavaScript によるインタラクティビティの追加 | Articles | web.dev

JavaScript を使用すると、コンテンツ、スタイル、ユーザー操作に対する応答など、ページのほぼすべての要素を変更で...

Google Analytics トラッキングスニペット再考（2016） - MOL

最近、またGoogleアナリティクスの面倒を見ている。で、GAのドキュメントを見ていたら最近のイケてるトラッキングスニペ...

クエリパラメータidって？

srcには、ロードするファイルのファイル名の後ろに「id=プロパティID」というクエリパラメータが付いています。

少なくとも筆者は、以下の疑問や不安が起きました。

JSにどうインプットされているの？ダミー？
1つのスニペットで記述すると、id指定しているところはUA、GA4どちらか一方のプロパティIDのみになるし、後でgtag()にて両方設定して問題ないの？

これに対しては、今も完全に仕組みを理解できてませんし、裏付けにならないですが、以下サイトの情報が正しければ「idは気にしなくて問題なさそう」という見解に落ち着きました。

ちなみに、JSファイルの中身の解析にまでは至っていません。

Including Google's gtag analytics via a config variable

I'm trying to setup the new Google analytics, and I'd like t...

Googleアナリティクスのgtag.jsについてのQAで、以下のようなやりとりが書かれています。
- 質問者：『srcなんちゃらでクエリid=がハードコーディングされているけどgtag('config',xxx)できる？idのクエリなしでjsのロードできるん？』
- 回答者：『クエリなしでもロードできる。srcにクエリなしとして、後でgtag('config',xxx)すればよい。』
- 質問者：『テストしたらidのクエリはjsにスローされているだけだとわかったので確認取れた。最初にこれやるべきやったわ、サンクス。』

gtag.jsスニペットの後半部分の処理

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXX');
  gtag('config', 'G_YYY');
</script>

について考えます。

と言っても、これについては、あまり追及していません。