Google Tag Manager と Google Analytics 4 の利用例

Google Tag Manager と Google Analytics 4 の利用例

この記事は デジタルキューブ & ヘプタゴン Advent Calendar 2022 の 12月12日分の記事として執筆しています。

ウェブサイトのアクセス解析ツールとして Google Analytics 4 を利用しているサイトは多いと思います。Google Analytics ではページビューの計測の他にコンバージョン率やクリック数といったイベントの計測もできます。

WordPress では Google Analytics とGoogle Tag Manager 導入/設置のために数多くのプラグインが公開されています。

本記事では Google Tag Manager を利用した Google Analytics 4の導入とWordPress プラグインを利用せずにできる Google Tag Manager と Google Analytics 4 を組み合わせた利用例をご紹介します。

1. Google Tag Manager の導入

Google Tag Manager は ウェブサイトのすべてのタグを、コード編集なしで管理するツールです。
サービス利用開始後、アカウントの作成でアカウント名とどのプラットフォームで利用するかを決めて作成すると、Google タグ マネージャーを利用するためのHTMLコードが発行されます。

Google Tag Manager

発行されたコードをウェブサイトの <head> 内, 開始タグ <body> の直後 に設置すると利用を開始できます。

GTMコード例
コード例

WordPress の場合はテーマを編集せずにコードを設置できるプラグインが多くありますので利用されることをおすすめします。

WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager
https://ja.wordpress.org/plugins/insert-headers-and-footers/

Head, Footer and Post Injections
https://ja.wordpress.org/plugins/header-footer/

2. Google Tag Manager を利用した Google Analytics 4 コードの設置

Google Analytics 4 コードを Google Tag Manager で設置する手順を紹介します。

Google Tag Manager(以下 GTM)にログイン後、タグ→新規作成でタグの設定をクリックします。
GTM ではよく使われるタグがあらかじめ用意されていますので「Google Analytics: GA4 設定」を選びます。
測定 ID欄はGA4の測定 IDを入れます。(例: G-xxxxxxxxx)

Google Analytics: GA4 設定の例
Google Analytics: GA4 設定 を選択
Google Analytics: GA4 設定の測定ID
Google Analytics: GA4 設定の測定ID

次にこのタグを実行するタイミングを設定するためトリガーの選択をクリックします。

こちらもよく使われるトリガーが用意されていますので「All pages」を選びます。

GTM トリガーのAll pages
トリガーで「All pages」を選択

タグを作成した後はワークスペースの公開を行うことで、ウェブサイトに GTM で設定した内容が反映・実行されます。

ワークスペースのプレビューを押下すると GTM を設置したサイトでどのように動作するのかテストを行うことができます。
GTM で設定したタグが実行されているかの確認ができますので、エラー無く実行できている場合はプレビューを終了し公開しましょう。

GTMワークスペースのプレビュー
ワークスペースのプレビュー
GTMワークスペースのプレビュー時のデバッグ画面
ワークスペースのプレビュー時のデバッグ画面

3. Google Tag Manager を利用したGoogle Analytics 4 イベントの計測例

Google Analytics 4(以下 GA4)でイベントといったページビュー以外の情報を計測したい場合、Google Tag Manager(以下 GTM)を活用することで、ウェブサイト上のHTMLコードを編集することなく計測を行うことができます。

例1 イベントトラッキング

イベントトラッキングは

  • お問い合わせフォームを送信した回数
  • 資料がダウンロードされた回数

といったサイト訪問者がページ遷移を伴わずに実行した内容を計測することを指します。

GTM で

  • トリガー: 特定のDOM(ボタンなどの要素で CSSク ラスや id で指定可能)をクリックしたとき
  • タグ: GA4 イベントに送信するパラメーターの設定

を設定することで、イベントトラッキングを設定/計測することができるようになります。

下記の例は特定のボタンをクリックしたことをクリックされたURLで計測しています。

GTM イベントタグ
イベントの計測例
イベントを実行するトリガー例
イベントを実行するトリガー例

計測したデータは GA4 のエンゲージメント→イベントで見ることができます。

例2 カスタムディメンション

カスタムディメンションはページビューといった標準以外のデータを計測したい場合に利用します。

WordPressを利用したサイトであれば例として

  • 投稿のカテゴリー/タグ
  • 投稿の作成者

があげられます。

ページ内にこれらの情報が表示されている場合、GTM 設定したGA4 のページビュー送信と同時に送信することができます。

  • 変数: 作成者やカテゴリーを表示している DOM 要素を CSS クラスや id で指定
  • タグ: GA4 設定で設定フィールドでフィールド名にディメンション名、値にそれぞれの変数を設定。

下記の例は特定のDOM要素を変数として利用し、ページビューとともに計測しています。

カスタムディメンション測定例
カスタムディメンションの計測例
変数例
CSSセレクタを参照した変数の例

カスタムディメンションのデータは GA4 のデータ探索でレポートを自作することもできます。
下記の例では指定期間内の記事投稿タグを計測したレポートになります。

GA4 レポートサンプル
GA4 レポートサンプル

ご紹介した例以外に Google Tag Manager と Google Optimize を組み合わせたA/BテストをWebサイトのソースコードを変更する事無く実施することできます。

今回は PHP/HTML といったソースコードの編集なしに Google Tag Manager だけで設定する方法をご紹介しましたが、WordPressのプラグインによってWordPressダッシュボードでの設定のみで計測を行えるプラグインも多数ありますのでご参照ください。


WordPress で Google Tag Manager の設定ができるプラグインの一例
https://ja.wordpress.org/plugins/tags/google-tag-manager/

LabWorks では お客様のご要望に合わせて WordPress のプラグインの調査・提案をいたします。最適なプラグインを見つけたいなどご相談があればお寄せください。
※ご契約内容により、サポート内容が変わる場合がございます。

横浜市立大学附属病院 次世代臨床研究センターリクルートダイレクトスカウト
JOLLY GOOD!エピックベース株式会社
有限会社ワグ株式会社デジタルガレージ
LegalOn Technologies日本協創投資
SmartHRSHARP
mikihouseInternet Society
INFOBAHN GROUPfreee
CanCam旭化成
横浜市立大学附属病院 次世代臨床研究センターリクルートダイレクトスカウト
JOLLY GOOD!エピックベース株式会社
有限会社ワグ株式会社デジタルガレージ
LegalOn Technologies日本協創投資
SmartHRSHARP
mikihouseInternet Society
INFOBAHN GROUPfreee
CanCam旭化成
Contact

当社へご興味をお持ちいただきありがとうございます。
「こんなことやってみたい!」と、ぜひ気軽にご相談ください。
担当者よりご連絡差し上げます。