きり丸の技術日記

技術・エンジニアのイベント・資格等はこちらにまとめる予定です

新しいGoogle Analytics(GA4)をはてなブログに適用する

Google アナリティクス4プロパティ(以降、GA4)はユニバーサルアナリティクスプロパティ(UA)より、新しい分析方法です。ですが、UAのトラッキングIDからGA4の制御IDに変更しても、はてなブログに適用できません。なのでこの記事では、はてなブログにGA4を適用した方法を残します。

ターゲット

  • はてなブログ使用者
  • UAをGA4にアップグレードしたい人
  • Google タグマネージャを使用したことない人

書かないこと

概要

  • Google AnalyticsからGA用の測定IDを生成します
  • GA4の測定IDはGoogle タグマネージャ(GTM)ごしに設定します

GAをはてなブログに適用する

はてなブログへの「Google Analytics埋め込み」では設定できません。おそらく、UAのトラッキングID「UA-XXXXXXXXX-X」とGA4の測定ID「G-XXXXX」のプレフィックスが異なるので、はてなブログ側で設定しているバリデーションに引っかかっていると考えています。

なお、GA4がベータ版なのではてなブログが対応していませんが、リリースされたらはてなブログ側でも簡単に設定できるようになると思います。

f:id:nainaistar:20201102201455p:plain

  1. GA4の測定IDを生成します。

基本的にはデフォルトの分析方法がGA4になっているので、公式ページから生成してください。

analytics.google.com

GAの生成方法はUAの生成とほぼ同じなので、私のUAの生成記事も参考にできます。

  1. GTMの公式ページにログインします。

tagmanager.google.com

  1. GTMのアカウントを作成します。

「アカウントを作成」ボタンをクリックして、画面遷移します。

f:id:nainaistar:20201102201511p:plain

アカウント名や国名、コンテナ名を入力や選択します。アプリではないので、ターゲットプラットフォームに「ウェブ」を選択して、作成します。

f:id:nainaistar:20201102201528p:plain

  1. コンテナIDを記録します。

上部のメニューの「GTM-NRBRRSW」がコンテナIDとなりますので、後で使用します。

f:id:nainaistar:20201102201750p:plain

  1. タグを作成します。

左のメニューからタグを選択し、「新規」ボタンをクリックして、新規にタグを作成します。

f:id:nainaistar:20201102201750p:plain

画面左上にタグ名を入力できますので、タグ名を入力してください。次に、タグの設定をクリックしてください。

f:id:nainaistar:20201102201732p:plain

タグの種類に「Google アナリティクス:GA4設定」を選択してください。

f:id:nainaistar:20201102201716p:plain

最初に生成した測定IDを入力してください。また、トリガーを選択後、「All Pages」を選択します。

f:id:nainaistar:20201102201700p:plain

  1. GTMを公開する。

画面の右上にある公開ボタンをクリックします。

設定完了後、GTMを公開する必要があります。公開しなければ、分析できないので忘れないでください。

f:id:nainaistar:20201102201645p:plain

  1. はてなブログGoogle タグマネージャを設定する。

はてなブログにログインし、「設定」メニューを選択したのち、画面上部に「詳細設定」タブがあるので、選択してください。

その画面にて、「解析ツール」の「Google タグマネージャ」に対象のコンテナIDを入力してください。

f:id:nainaistar:20201102201626p:plain

以上で、設定完了しています。あとは、画面にアクセスして、GA4で分析されることを確認してください。

終わりに

GA4ではてなブログを適用する方法を調べたところ、全く見つからなかったのでかなり苦労しました。まだまだベータ版ということで、移行していない人が少ないんですかね?

それとも、ガッツリ分析する人は最初からGTMで分析しているんですかね…。

どちらにせよ、これでGA4で分析できるようになったので、これから分析をしたい人にとっては良い記事になっているのではないかと考えています。


この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

参考情報

2021/02/08 追加 
グローバルサイトタグ(gstag.js)でGA4を適用する方法 friendsnow.hatenablog.com

f:id:nainaistar:20201102154418p:plain