2023年7月1日に、古いタイプのGoogle アナリティクスでデータが取れなくなるので、新しいコードに切り替えた体験談です。
ユニバーサルアナリティクスの終了
『2023年7月1日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。それまでに Google アナリティクス 4 プロパティに切り替えて設定を進めておきましょう』
Google アナリティクスを開くと、上記のメッセージが表示されるようになって、結構な時間が経過しました。
来年の話だと、ゆっくり構えていましたが、切り替え直後はデータの比較がしづらくなるので、幾つかのサイトで変更を前倒した次第です。
ユニバーサル アナリティクスは、トラッキングコードに「UA-XXXX」といった表記があるもの。
Google アナリティクス 4では「G-XXXX」といった表記になります。
コードとしての違いは、そんなところ。
どの辺が変わるのかは、気が向いたら言及しようと思います。今回は、何をどう替えたのかという点だけ。
詳細は、公式のヘルプを見るのがベストなので、下記の通りリンクを用意しました。
サポートの終了
2023年7月1日でデータ収集は終わりますが、収集停止後も6ヶ月間はデータへのアクセスが可能らしいです。
今までのアクセス傾向が重要な人は、そのデータをエクスポートしておくべきでしょうね。
Google アナリティクス 4 の始め方
前項の警告メッセージで「開始」を押すと、上のような画面が出ます。
この流れに沿って行けば、Google アナリティクス 4 用のプロパティを作成できます。
プロパティは、下図のようなもの。
アナリティクスのアカウントの横に、各サイトの取得方法別のデータがある……。
そのデータ種別が、プロパティ。
当サイトのユニバーサル アナリティクス版が、上の「UA-XXXX」という文字が入っている方。
サイト名の後に「GA4」とあるのが、Google アナリティクス 4版。
こんな感じにプロパティ単位で分かれるので、従来のデータと、新しいデータが切り離され、それぞれで見られる仕様です。
そのことは、プロパティ作成の流れで説明されますが、おそらくは文章を読む気になれないでしょう。
コードの取得
プロパティ作成の流れを進んでいくと、ウェブストリームの詳細ページに誘導されます。
ここにあるグローバルサイトタグ云々のところに、アクセス解析のためのタグが表示されているので、これをコピーしてサイトに貼り付けます。
貼り付ける場所は、headタグ内の最上部。
最初に読み込むであろう箇所なので、読み込み途中で遷移した場合の計測もできるはず。
個人的には、この位置にタグを埋め込むのには抵抗がありました。
古い話になりますが、この手の埋め込みが検索アルゴリズム的にダメだという説があったからです。
ページ内容の上部にある要素が重要視されるのに、どのページも始まり方が同じで、長めのコードがある……。
そういうページ構成よりも、すぐに本題に入っている感じの構成が、SEO的に有利という説になります。
真意のほどは確かではありません。
上が、そのトラッキングコード。
「gtag.js」としての変更点は、「UA-XXXX」の箇所くらい。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());gtag('config', 'UA-XXXXXX');
</script>
「analytics.js」からの変更だと、貼り付け位置からして違いますね。
以前は「body」の閉じタグの前でよかったので。
下記が、そのコード。
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-XXXXXX', 'auto');
ga('send', 'pageview');</script>
既に「gtag.js」を使っているHTMLでは、「head」タグのコードの一部を書き換えるだけ。
「analytics.js」の場合は、「body」の閉じタグの前のコードを消し、「head」タグに加えることに……。
別に、古いタグを残しておいてもいいですが、来年の7月からは“無駄な記述”になり、読み込み速度を落とす要因になりそうなので、いずれは消すのがベスト。
HTMLでは、ページの数だけ変更するので、大変ですね。
その点、WordPress のようにPHPで管理しているサイトだと、一ヶ所の修正で作業が終わるので楽。
以下は、AFFINGER5の画面。
「AFFINGER5管理」⇒「その他」⇒「コードの出力」に、トラッキングコードを入れて「保存」するだけ。
「Google連携/連携」にも、「Google自動広告の設定」という「headに出力」できる箇所がありますが、あくまで広告用なので……。
気になるのは、こちらで広告用タグを使用している場合、どちらがソース的に上に来るのかということ。
一応、トラッキングコードは「head」内の最初に記述することになっています。
アクセス解析
トラッキングコードを替えたファイルをアップしても、しばらくは「ウェブサイトから受信したデータはまだありません」という表示を見ることになるでしょう。
とはいえ、きちんとコードが入っているのであれば、「リアルタイムを表示」というメニューの先で、上の画像のような解析状況が見られるはず。