Kazue Igarashi 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コードが発行されます。
発行されたコードをウェブサイトの <head> 内, 開始タグ <body> の直後 に設置すると利用を開始できます。
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）
次にこのタグを実行するタイミングを設定するためトリガーの選択をクリックします。
こちらもよく使われるトリガーが用意されていますので「All pages」を選びます。
タグを作成した後はワークスペースの公開を行うことで、ウェブサイトに 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で計測しています。
計測したデータは GA4 のエンゲージメント→イベントで見ることができます。
例2 カスタムディメンション
カスタムディメンションはページビューといった標準以外のデータを計測したい場合に利用します。
WordPressを利用したサイトであれば例として
- 投稿のカテゴリー/タグ
- 投稿の作成者
があげられます。
ページ内にこれらの情報が表示されている場合、GTM 設定したGA4 のページビュー送信と同時に送信することができます。
- 変数: 作成者やカテゴリーを表示している DOM 要素を CSS クラスや id で指定
- タグ: GA4 設定で設定フィールドでフィールド名にディメンション名、値にそれぞれの変数を設定。
下記の例は特定のDOM要素を変数として利用し、ページビューとともに計測しています。
カスタムディメンションのデータは 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 のプラグインの調査・提案をいたします。最適なプラグインを見つけたいなどご相談があればお寄せください。
※ご契約内容により、サポート内容が変わる場合がございます。
当社へご興味をお持ちいただきありがとうございます。
「こんなことやってみたい！」と、ぜひ気軽にご相談ください。
担当者よりご連絡差し上げます。