Bloggerでアナリティクスのソースコードをブログに記載する方法

Bloggerは管理画面の「Google アナリティクスプロパティ ID」からアナリティクスで設定済みのIDだけ入力すれば対応するテンプレートでアナリティクスを使うことができる。便利だけど、ところが来年の7月1日からアナリティクスの従来のUAで始まるIDのユニバーサルアナリティクスのデータが止まってしまうので、次のGで始まるIDのGoogleアナリティクス4／GA4を新しく登録しなくてはならない。

参考サイト

ユニバーサルアナリティクスのサポートは終了します

Bloggerの管理画面の「Google アナリティクスプロパティ ID」から登録できなくて暫く様子を見ても変わらないので、カスタマイズでアナリティクスのソースコードをブログに記載する方法について取り上げることにする。後からGA4に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソースコードを自分で加工したものを使いたい場合などは同じような仕方使うことができる。テンプレートのソースコードを編集するので、Bloggerの管理画面のテーマの「HTMLを編集」か「バックアップ」と「元に戻す」から行わなくてはならない。アナリティクスの一般的な導入方法長短の色鉛筆が並んだ上に「ANALYTICS」の薄い黄色の文字があり、右下から人の人差し指で「S」が引かれて斜め下に少し離れている

長短の色鉛筆が並んだ上に「ANALYTICS」の薄い黄色の文字があり、右下から人の人差し指で「S」が引かれて斜め下に少し離れている

Analytics by Timur Saglambilek / Pexels

テンプレートのソースコードにアナリティクスを記載する場合は管理画面の「Google アナリティクスプロパティ ID」は不要なので、以前に使っていてもしも残っていれば念のために消しておいた方が良いと思う。どんなテンプレートでもエラーが起きないところにアナリティクスのソースコードを記載すれば大丈夫だ。

関連ページ

Bloggerブログのテーマのhtml編集／テンプレートのソースコードの基本構造と使用可能な独自タグについて

良く選ばれるのがHTMLのheadの閉じタグの直前になる。<head> （中略） <script async='async' src='https://www.googletagmanager.com/gtag/js?id=アナリティクスのプロパティID/> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'アナリティクスのプロパティID);</script> </head>帯文字の部分に自分のアナリティクスのプロパティのIDを入力して記載する。サンプルの二つのscriptタグが基本的なアナリティクスのソースコードで、従来のUAのIDも新発のGA4のIDもソースコード自体は同じだ。アナリティクスの管理画面で普通に取得したscriptタグと完全に置き換えて構わないし、自分で加工したものを使いたい場合は二つのscriptタグの両方か片方を置き換える。scriptタグにasync属性などが値なしで付いているとBloggerのソースコードはXMLファイルだからエラーになるかも知れない。その場合はサンプルのように「async='async'」と属性と同じ値を入れれば大丈夫だ。

関連：

BloggerのHTML編集でエラーを起こさないための注意点

アナリティクスの独自タグの削除Bloggerの管理画面の「Google アナリティクスプロパティ ID」を使わなければブログに何も影響しないけれどもブログのソースコードにはそのための独自タグが置かれている。アナリティクスのソースコードを記載したら全く必要なくなるので、削除しておいた方が動作上の間違いを避けられるし、ブログのソースコードの無駄も減らせる。公式テーマなどのアナリティクスの独自タグ<b:include data='blog' name='google-analytics'/>公式テーマや大半の非公式のテーマで使われていてheadの閉じタグの直前かその近くに記載されていることが多い。Imaginaryのアナリティクスの独自タグ<b:if cond='data:blog.analyticsAccountNumber'> <script async='async' expr:src='"https://www.googletagmanager.com/gtag/js?id=" + data:blog.analyticsAccountNumber'/> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '<data:blog.analyticsAccountNumber/>');</script> </b:if>僕の非公式テーマのImaginaryで使われていてheadの閉じタグの直前に記載されている。どちらもアナリティクスのソースコードを記載すると不要になるので、消してしまって構わないし、最初から置き換えるようにすると編集する手間は少ない。

コメント