GA4をGTMで導入する手順とクリックイベントを計測する手順

Insurtechラボ3月アドベントカレンダー企画 6日目の記事です。)

みなさま、こんにちは。アオキです。
UA(ユニバーサルアナリティクス)は2023年7月で終了になるため、Google Analytics4(GA4)へ移行が必要です。
そこで今回はGA4へ移行するにあたってGoogleタグマネージャー(GTM)経由でGA4を設定する手順をご紹介します。

GA4をGTMで導入する手順

GA4の機能で事足りるのであればGTMを使う必要はありませんが、例えばウェブサイトに広告タグを埋め込んだり、リンクやボタンのクリック数を計測するなど、GA4単体ではできないことがGTMを導入するとブラウザから設定することができます。すぐにクローズするウェブサイトでなければ、運用するのにできる事が大幅に広がるGTMを導入するのがオススメです。

GA4でデータストリームの作成

1.GoogleアカウントにログインしてGoogleアナリティクスに移動し、メニュー左下の「管理」をクリック

2.プロパティ作成で「プロパティ名」「タイムゾーン設定」「通貨」「業種」「ビジネスの規模」「利用目的」を設定して「作成」ボタンを押下

3.引き続き、プラットフォーム選択画面に遷移するので「ウェブ」をクリック

4.ウェブストリームの設定で「ウェブサイトのURL」「ストリーム名」を入力して「ストリームを作成」ボタンを押下

5.ストリームを作成すると「測定ID」が発行されるのでGTMの設定に備えて保存

GTMでコンテナの作成

1.Googleタグマネージャーに移動し、「コンテナを作成」をクリック

2.コンテナの作成で「コンテナ名」を入力、ターゲットプラットフォームで「ウェブ」を選択、「作成」ボタンを押下

3.引き続き、GTMのスニペットが表示されるのでHTMLのhead、bodyタグ内にそれぞれに埋め込む

GTMにGA4で発行した測定IDを設定

1.メニューの「タグ」をクリック、「新規」ボタンを押下、「タグ設定」をクリック

2.タグタイプから「Googleアナリティクス: GA4設定」を選択

3.タグ設定の「測定ID」にGA4でデータストリーム作成時に発行された測定IDを入力

4.引き続き「トリガー」をクリック、「All Pages」を選択、「保存」ボタンを押下

5.タグ設定が保存された事を確認して「公開」ボタンを押下

6.「バージョン名」と「バージョンの説明」を必要に応じて入力、「公開」ボタンを押下

7.GTMのスニペットを埋め込んだページにアクセスし、GA4の「リアルタイム」にてデータが反映される事を確認

GTMとGA4でクリックイベントを計測する手順

GTMからGA4を設定できたら、続いてカスタムイベントのひとつ「クリックイベント」を計測する手順もご紹介します。
また関連して「スクロールイベント」の計測手順をコチラの記事に掲載しておりますので、あわせてご覧ください。

変数設定

メニューの「変数」をクリック、組み込み変数内右上の「設定」ボタンを押下、組み込み変数の設定のクリックの中から「Click Eelment」「Click URL」をチェック

トリガー設定

リンクのクリックとリンクではないクリック(ここではボタンとします)を計測したい場合は手順が異なるため、それぞれの手順は以下を参照ください。

リンクのクリック(Click URL)

「トリガーのタイプ」は「クリック – リンクのみ」を選択
「このトリガーの発生場所」は「一部のリンククリック」を選択
「イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します」は左のプルダウンは「Click URL」を選択、中央のプルダウンは「等しい」を選択、右のテキストボックスにはリンク先のURLを入力

ボタンのクリック(Click Element)

「トリガーのタイプ」は「クリック – すべての要素」を選択
「このトリガーの発生場所」は「一部のクリック」を選択
「イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します」は左のプルダウンは「Click Element」を選択、中央のプルダウンは「CSS セレクタに一致する」を選択、右のテキストボックスにはボタン箇所(DOM要素)を入力

タグ設定

計測するイベントごとにタグを設定します。リンククリックとボタンクリックでそれぞれで設定したトリガーをタグに紐づけます。手順は以下を参照ください。

リンクのクリック(Click URL)

「タグの種類」は「Google アナリティクス: GA4 イベント」を設定
「設定タグ」はGA4の測定IDを設定したGA4の設定を選択
「イベント名」にGA4で識別する任意のイベント名を入力
「配信トリガー」にリンククリックを取得するのに設定したトリガーを選択

ボタンのクリック(Click Element)

イベント名まではリンクのクリックイベントの手順と同じ
「配信トリガー」にボタンクリックを取得するのに設定したトリガーを選択

タグ発火確認

設定した内容が問題ないか公開前にGTMのプレビューで確認します。対象ページをプレビューでアクセスし、タグ発火の操作を行い、「Tags Fired」に設置したタグ名が表示されればOK

GA4でイベント計測を確認

GTMの設定を公開後、ウェブサイトのリンクやボタンをクリックして【GA4 > リアルタイム > イベント】にGTMで設定したイベント名が表示される事を確認

GA4で指定IPアドレスのアクセスを除外する手順

ここからはGTMの設定ではありませんが、GA4を導入する際にやっておくオススメの設定もご紹介しておきます。GA4を導入するとウェブサイトのアクセスが全て計測されるため、社内などの関係者からのアクセスとエンドユーザーのアクセスが混在してしまい、エンドユーザーの動向を分析するのにノイズになります。そこで以下ではGA4で関係者のアクセスをIPアドレスを指定して除外する手順を解説します。

1.Googleアナリティクスに移動し、メニュー左下の「管理」をクリックし、IPアドレスの除外設定したいプロパティの「データストリーム」をクリック

2.ウェブストリームの詳細より「Googleタグ > タグ設定を行う」をクリック

3.Googleタグの設定より「すべて表示」をクリックし、「内部トラフィックの定義」をクリック

4.内部トラフィックルールの「作成」ボタンをクリック、「ルール名」「マッチタイプ」「値」を設定して右上の「作成」ボタンを押下

5.プロパティの設定メニューより「データ設定 > データフィルタ」をクリック

6.フィルタの状態を「テスト」から「有効」に変更、「保存」ボタンを押下

まとめ

GA4単体で利用するのと同様にGTMのスニペットを各ページに埋め込む手間はかかるものの、ウェブサイトの公開時や今回のようなツール移行などで全体に手を加えるタイミングで導入しておくと、エンジニアへ依頼せずにタグを埋め込めたりと運用効率があがりますし、ユーザー動向の分析でもできることの幅が広がりますので、GTMを導入をされていなければこの機会にぜひご検討ください(^^)