jekyllのブログでgoogle analytics GA4導入する

on 開発

jekyllでgoogle analytics jekyllのブログを使う時にgoogle analyticsを導入する方法がわからない人が多いです。
｀_config.yml`のファイルを開いて下記の内容を確認します。

#google_analytics:      UA-XXXXXXX-X  #NG
#google_analytics:      G-XXXXXXX  #OK

UA-XXXXXXX-X書いてある場合はuniversal analyticsで古いバージョンです。
昔からjekyllでブログを作った時はGA4が出る前だったので、UAになっている可能性が高いです。
この場合は直で貼り付けます。下に記載しているので下を確認してください。
G-XXXXXXXはGA4のIDとなります。こちらの場合は注釈を削除してIDを貼り付けば起動できます。

jekyllの_configファイルにGoogle Analytics GA4が対応できない場合に対策方法

Google Analytics ScriptはHTMLの<html>内部に入れます。 それでブログルートの_includesに移動してヘッダー部分を担当しているファイルを探して該当するファイルにScriptを入れる流れになります。
下記の画像の通りに移動してください。

  1. 左下の設定マークをクリックします。
  2. データストリームをクリックします。
  3. アカウントを作った時に生成したストリームをクリックする。（ストリームがなかったらストリーム追加で作成すれば良いです。）

jekyllでgoogle analytics2

  1. タグ設定手順の下に新しいページ状のタグを追加するをクリックします。
  2. グローバル サイトタグ（gtag.js） ウェブサイト作成ツールや、CMS でホストされるサイトをご使用の場合、このタグを設定をクリックします。

jekyllでgoogle analytics3

  1. ブログフォルダの_includeに移動してヘッダーを担当するファイルを探して上記のGA Scriptを挿入します。jekyllのテーマによってファイルの構成が違いますが、私の場合はmy-head.htmlにGA Scriptを挿入しました。あるテーマの場合はanalytics.htmlヘッダーを担当しているのでそのファイルを修正する場合もあります。

Google Analytics4が導入できたのか確認する方法

ブラウザのコンソールを開いてgtagを叩いてみます。

GA4の導入が失敗した場合

jekyllでgoogle analytics4

GA4が成功的に導入した場合

jekyllでgoogle analytics5

失敗した場合はページのソースコードを見てGAストリームIDが正しいのか、head内にG-XXXXXXがあるのか確認する必要があります。大体誤字で対応できてない場合が多いので修正してやってみてください。