Google Tag Managerを通じて、はてなブログの閲覧数などを計測できるようにしてみた

おはこんばんにちは!季節の変わり目か、日々寝ても常に眠たさを抱えているしおりんです。

最近、業務の方でGoogle Tag Managerを使う機会が生まれ、慣れないWebサイトの計測やGoogle Tag ManagerやGoogleアナリティクス4と日々格闘しています🥊

Webページを計測するというのはどういうことなのかについて、さらに学びを深めるために、このブログにも入れて色々計測してみようと思います💪

なのでまずは、はてなブログに設定するための方法について、このshiorinのアウトプットに実際に設定しながら、まとめていこうと思います〜


目次

概要

まず、今回の記事で紹介する内容をざっくりと箇条書きで並べていきます。

  • GoogleTagManager・Googleアナリティクス4がどういうものなのかを理解できるGoogleページの紹介
  • はてなブログとGoogleTagManagerを連携する方法
  • GoogleTagManagerを通じてGoogleアナリティクス4をはてなブログに設定する方法
  • Googleアナリティクス4で実際に計測されるとどういうものが見れるのか

なお、それぞれのツールの名前が長いので、ここから先は名前を以下のように省略します。

  • Google Tag Manager = GTM
  • Googleアナリティクス4 = GA4

GTM?GA4とは?

GTMに関しては、Googleが公開している資料が一番わかりやすいので、ここで詳細に説明するよりは、ぜひGoogleが公開している資料を見てください。

タグを仕込んで計測するとはどういうことなのか?そのタグを管理するタグマネージャーは何が便利なのか?というなかなか理解しづらい部分が、動画やイラストと共に理解できました! support.google.com

youtu.be

GA4は、Webページを訪れた人の数や、そもそもどこからそのWebページに訪れたのかなどを記録した結果を表示することができる計測ツールになります。

詳細に関しては、これもまたGoogleが説明しているページがあるので、より詳しく知りたい方はこちらをご覧ください。 support.google.com

はてなブログとGTMを連携する

まず、 https://tagmanager.google.com からアカウントを作成します。

登録完了後の画面がこちらです。

(コンテナID(GTM-xxxxx)については、念のため隠しています。)

アカウント登録が終わった後の画面
アカウントの登録が完了すると、GTM-xxxxxxx というコンテナIDが発行され、それが含まれたタグを計測したいページのコード内に入れることで、GTMを設定することができます。

GTMの説明通り、head内に入れることでも動かすことはできますが、はてなブログの場合は、 コンテナIDのみを入れるだけで連携することができるので、ここから設定します。

はてなブログの設定>詳細設定>解析ツール に入力欄があります

設定が完了した後、実際に連携しているかどうかを確認してみるためには、実際に簡易的なタグを設置してみるのがおすすめです。

動くかどうかだけを確認したいので、動いていたらコンソールに文字列が出るように設定します。

このタグが動いて欲しい場所を設定するトリガーについては、AllPageを選択します。

タグ>作成>カスタムHTMLで、GTMが動いていたら、コンソールに出力されるように設定したタグ

これらを設定した後に、「公開する」ボタンを押すことで確認することもできますが、その隣にある「プレビュー」の方が、動作確認としてはとてもわかりやすく行うことができるので、そのやり方や味方を紹介します!

プレビュー画面の見方

まず、「プレビュー」ボタンを押すと、「計測できるように設定したWebページのURLを入れてね」といった内容の案内が出るので、URLを入力します。 今回の場合は、私のはてなブログのページなので、

https://shiorin223.hatenablog.com/

を入れました。

すると、画像のようにGTMが認識できているページが左に、具体的にそこで動いているタグ(=Tags Fired)と動いていないタグ(=Tags Not Fired)を確認することができるページに切り替わります!

ページが認識できている場合、遷移するとその履歴もプレビュー画面の左側に記録され、その時に動いたタグについて確認することができますので、色々触ってみると結構楽しいです😆


Q. 同じような画面が出てこない 🧐

A. GTMがWebページと連携できていない可能性が高いです

もし、以下のような画面となり、連携したいコンテナID(GTM-xxxxxxx)がページ内にない場合、GTMと連携するためのタグがページ内に埋め込まれてない可能性が高いです。

GTMと連携できていない時の画面

具体的に埋め込まれているかを確認する方法としては、まず計測したWebページで、開発者ツールを開いた時に出るコードにて、コンテナID(GTM-xxxxxxx)を検索してみてください。

連携されていれば、必ずコード内にコンテナIDが入るので、ここで入っていない場合、連携することはまずありません。

ちゃんとコンテナIDを入力した際に保存をしたか・GTMのコンテナIDを入れるところではないところに入力してないかなどを確認してみてください。


さて...戻ります🐱

プレビュー時に一緒に開くWebページにて開発者ツールを開き、コンソール画面にてconsole.logに入れた文字列が出力されているかどうかを確認してみてください。

出力されていたら、それがタグが動いた(俗にいう発火した)ことになり、GTMと連携が完了している状態となります🎉

Tag Fireに設定したタグの名前が表示されていたら、動いている証拠です

開発者ツール>コンソールで出力されている様子

GA4を設定する

(実は、はてなブログにはGA4を設定するための枠もあるのですが、今回の記事ではそこからではなく、GTMを使って連携する方法を紹介します。)

まず、GA4のアカウントを下記から作成します。

https://analytics.google.com/

登録が完了すると、GTM同様に作成したGA4で計測するためのIDが「測定ID」という名前で発行されます。

これをGTMに設定することで、GTMとGA4を連携することができます!

さて、GTMにGA4を設定する方法について、要はGA4が計測できるようにするタグを設定すればいいので、ひとつ前に紹介した方法と同様に、タグ>作成から追加します。

なお、GA4の場合はGoogle側で連携しやすいようにあらかじめ準備されているので、GA4登録時に発行された測定IDを入力すれば、連携は完了します。

そして、このタグが動いて欲しい場所を設定できるトリガーに関してですが、All Pagesで設定することをお勧めします。

明確にこのページでしか計測してほしくない!!というのがあれば、トリガーを使いその条件を設定することが可能ですが、そうでない場合、「なぜかうまく動かない...計測されない...」などの問題が発生する可能性を避けるため、All Pagesをお勧めします。

タグ>作成>Google アナリティクス: GA4 設定を選択した時の画面

そしてGA4の場合はGTMとは別のツールなので、プレビューで把握できるのは追加したタグが動いているかの確認のみです!

「公開する」ボタンを押して公開しないと、GA4で実際に計測はされませんのでご注意を! (実際に、今回設定する中で私もこのミスを犯し、プレビューだけみて「あれ?計測されない...」となりました...😇)

計測できた!

以上の設定をした後、GA4を埋め込んだWebページを自分で適当に訪れて記事などをポチポチしてみました。

そして、しばらくしてGA4のページを見てみると...

計測されてました ーー🎉🎉🎉

GA4_リアルタイムの概要

イベント数の計測結果を見ると、GA4の方であらかじめ用意されているイベント、初めて訪れた人であったり、どのページを見たのかなどが計測されていました!

イベント数の計測結果

なお、このイベント部分をGTM上で自分の好きなように設定することができ、その条件に合った人がどれくらいいたか、という計測結果をGA4でこのように確認することができるのです。

おわりに

設定はうまく行ったことを確認できたので、次はGTMで任意のイベントを追加してみようと考えています 💪

どんなふうに細かく自分好みに設定できるのかなどを試してみて、その方法などもまた記事にする予定です!

また、ここまで読んでいただいた方へのお願いです 🙏

実際にこのshiorinのアウトプットの全体をGA4で計測されるようにしたのですが、まだ自分が検証のために訪れた記録しかないのが、少し寂しい状況です...😭

具体的にどのような感じで計測されるのかがとっても見たい!!ので、ここまで読んでいただいた方は、過去に私が書いた他の記事もクリックして訪れてくれると嬉しいですっっ🙇‍♀️🙇‍♀️🙇‍♀️

うまく計測されますように〜〜 🙏🙏