GoogleアナリティクスのタグをGA4にそしてGoogleタグマネージャにしてみた

Google HTML

UA(ユニバーサルアナリティクス？）が2023/7/1で使えなくなるということで、GA4に移行。 さらにGoogleタグマネージャにしてみた。

Googleタグマネージャを使うにはGA4にしておかないと測定IDを取得できない。 つまり以下のフローで作業が必要。

  1. GoogleアナリティクスでGA4設定アシスタントを使用してGA4に移行。
  2. データストリームというメニューで参照すると測定IDを表示するのでメモっとく。
  3. Googleタグマネージャ(以下GTM)にアカウントを新規登録。「コンテナ」という単位で複数のタグを管理する。
  4. コンテナにタグを新規で登録する。タグタイプは「GoogleアナリティクスGA4設定」で測定IDを入力。イベントは「All Pages」を選択。
  5. GTMでプレビュー後、公開。バージョン管理してくれているようで公開ごとにそのバージョン名を入力する。リポジトリにチェックインするときのコメントみたいなものか。

今まではそれぞれのサイトにGoogleアナリティクスで生成したタグIDとともにjavascriptで埋め込んでいたが、 GTMでは同じjavascriptをそれぞれのサイトに埋め込んでおいて、測定IDはGTMで管理するという感じ。 しかも、GTMでは「プレビュー」という機能があり、GTMのタグを埋め込んだサイトで正常に動作するのかを確認できる。 その他もろもろ、以下のサイトが詳しい。

moltsinc.co.jp

なお、Bloggerに埋め込む場合、UAのときは設定にIDだけ入力するところがあるのだが、GTMの場合は現時点ではHTML編集しないといけないらしい。

www.ozu-log.com

しかし、保存しようとするとGTMのjavascriptが以下のエラーとなる。

org.xml.sax.SAXParseException; lineNumber: NNNN; columnNumber: NN; The reference to entity "l" must end with the ';' delimiter.

これは以下のサイトの記載通り、

geromazusoup.blogspot.com

「&」をエスケープ「&」してあげないといけないらしい。

<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','XXX-XXXXXX');</script>

<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'?'&amp;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','XXX-XXXXXX');</script>