GTM（Googleタグマネージャー）とGA4を使ってクリック数の計測イベントを設定する方法

みなさんこんにちは！エンジニアの高澤です！

今回はGTM（Googleタグマネージャー）とGA4を使ってクリック数の計測イベントを設定する方法をについて解説していきたいと思います。

GTMはウェブサイトを公開している以上なくてはならない必須の分析ツールといっても過言ではありません。

当記事で解説する手順通りに問題なくスムーズに設定できるように、GTMの前提知識とクリック数の設定方法の2本立てでしっかり解説していきたい思います。

GTM（Googleタグマネージャー）とは

Googleタグマネージャー（GTM）とは、ウェブサイトにいろいろな「タグ」（小さなプログラムの一部）を簡単に追加・管理することができ、サイト上でのユーザーの行動などの情報を取得して分析するためのツールのことをいいます。

例えば、当記事で解説する特定のバナーをクリックした回数を計測したり、特定の動画の再生数や電話リンクのクリック数など、より詳細に細かくユーザーの行動をデータとして取得することができます。

基本的にGA4と組み合わせて使用し、GTMでユーザーの行動情報を取得するためのタグをGTM管理画面で設定し、その分析結果をGA4で確認するということになります。

使い方としては、GTMで生成されたスニペット（小さなコード）をウェブサイトのHTMLの特定の箇所に設置することで使用することができるようになります。

GA4（Googleアナリティクス 4）とは

GA4（Googleアナリティクス 4）とは、サイト上でのユーザーの行動などの情報を取得したデータを実際に分析・閲覧することができるツールのことをいいます。

厳密にはGTMと組み合わせずGA4単体でユーザー行動の情報を取得できますが機能が限られてしまいます。

GTMと組み合わせて使用することで、多方面のあらゆる角度からユーザーの行動の情報を取得して分析することができるので、GTMとGA4の組み合わせが定番でベクトプラクティスな使い方といえます。

GTMの前提知識

まずは設定を進める前にGTMの前提知識について解説しておきたいと思います。

GTMで出てくる概念をおさえておけば、いざ設定するときになってわけがわからない状態を防ぐことができます。

ここでしっかり理解しておきましょう。

変数とは

変数とは、情報を保存するためのコンテナのことをいいます。GTMにおいて、変数はタグやトリガーで使用される値を動的に提供する役割を果たします。

わかりやすくいうと「変数」とは、データの入れ物のようなものです。たとえば、学校の成績を保存するための「成績表」を考えてみてください。成績表には、名前、点数、科目などの情報が入っています。

GTMでは、変数はウェブサイトのいろいろな情報を保存するための入れ物です。

たとえば、以下のような情報を変数として使います。

• ユーザーが見ているページのURL
• ユーザーがクリックしたボタンの名前
• ユーザーのブラウザの種類

このようにGTMで用意された変数は、さまざまな角度から取得した各データの入れ物として存在し、この後説明するトリガーとタグでデータを取得するための土台となるものをいいます。

トリガーとは

トリガーとは、特定のイベント（アクション）が発生したときにタグを発動させる条件を定義するための仕組みのことをいいます。

わかりやすくいうと「トリガー」とは、何かが起こったときに動く仕組みです。たとえば、学校のベルが鳴ると「授業が始まる」ことを知らせますよね。ベルがトリガーになって、授業が始まるのです。

GTMでは、トリガーは特定のイベント（出来事）が発生したときにタグを発動させます。

たとえば、以下の内容があげられます。

• ページが読み込まれたとき（ページビュー）
• ユーザーがボタンをクリックしたとき（クリックイベント）
• 特定のページにユーザーが到達したとき（URLの一致）

このトリガーは、例えるならJavaScriptのイベント処理、WordPressのフックのようなイメージです。

タグとは

タグは、特定の目的を達成するためのスニペット（短いコード）のことです。GTMでは、タグを使ってサイトに追加するスクリプトや追跡コードを管理します。

わかりやすくいうと「タグ」とは、実際に行うアクション（活動）です。たとえば、成績表を学校に提出することや、ベルが鳴ったら授業を開始することです。

GTMでは、タグは特定の情報を収集したり、特定のコードを実行するために使います。

たとえば、以下の内容があげられます。

• Google Analytics タグ：ユーザーがどのページを見ているかを記録します。
• AdWords コンバージョン タグ：ユーザーがサイトで紹介した特定の商品を購入したかどうかを記録します。
• Facebook Pixel タグ：ユーザーの行動を追跡します。

3つの概念のまとめ

3つの概念をまとめると以下の内容になります。

• 「変数」はデータの入れ物：ページのURLやボタンの名前などの情報を保存。
• 「トリガー」は何かが起こったときに動く仕組み：ページが読み込まれたときやボタンがクリックされたとき。
• 「タグ」は実際に行うアクション：ユーザーの行動を記録するなど。

このように、変数、トリガー、タグを使って、ウェブサイトのユーザーの行動を記録したり、特定のコードを実行したりすることができます。

それぞれについては、この後解説するGTMでのクリック数の設定方法で手を動かしていくうちに理解できるかと思いますので、もし途中でわけがわからなくなったらまたここでの説明に戻ってきてください。

大丈夫です。最後には必ず理解できるようになるので、ご安心ください。

GTMでのクリック数の設定方法

それでは早速GTMでのクリック数の設定方法について解説していきたいと思います。

ここでは基本中の基本の内容として、最小限の設定で手順通りに進めていただければ設定自体できるように構成された内容となっております。

今回の内容では、下図のように特定のURLをクリックした時のクリック数を計測するためのGoogleタグマネージャーでの設定方法を解説することをゴールとしております。

また、設定方法の流れは以下になります。

• ①変数の設定
• ②トリガーの設定
• ③タグの設定
• ④プレビューで設定が機能しているか確認
• ⑤Googleアナリティクスでクリック数（イベント数）を確認

それでは、手順通り解説させていただきます。

①変数の設定

まずはGoogleタグマネージャーを開いていただき、左メニュー「変数」を選択してください。

右上にある「新規」をクリックしてください。

右から変数の一覧のチェックボックスの一覧が表示されるので、以下の内容を選択してください。

Click Classes	データレイヤーの変数
Click Element	データレイヤーの変数
Click ID	データレイヤーの変数
Click Target	データレイヤーの変数
Click Text	自動イベント変数
Click URL	データレイヤーの変数

上記変数はこのあと設定するトリガーにて必要になります。

厳密には全て必要になることはありませんが、後々必要になった時のためにClick関連の変数を全て選択しておきます。（ここでは「Click URL」をこのあと使用します）

下図のように、チェックボックスにチェックを入れていただき、選択した変数が追加されたことが確認できます。

ここまでで、変数の設定は完了です！

②トリガーの設定

変数の設定が完了しましたら、次はトリガーの設定をしていきます。

左メニュー「トリガー」を選択してください。

右上にある「新規」をクリックしてください。

「トリガーの設定」を選択してください。

選択していただくと、画面右からトリガーの設定画面が表示されるので、必要な入力箇所に設定を入力していきます。

ここでは以下の内容で設定していきます。

• 設定画面左上のトリガー名を「テストクリック」にする。（トリガー名は任意）
• 「このトリガーの発生場所」は「一部のリンククリック」を選択
• 「イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します」は「Click URL」「含む」「【計測した対象のURL】例）https://sample.com/xxx/（※ここで設定したURLが計測したいURLになります）」

上記の順に設定していきます。

設定画面右上の「保存」をクリックして保存していただくと、下図のように設定していただいたトリガーが保存されているのが確認できます。

ここまでで、トリガーの設定は完了です！

③タグの設定

変数とトリガーの設定が完了したら、最後にタグの設定をしていきます。

左メニュー「タグ」を選択してください。

右上にある「新規」をクリックしてください。

設定画面が画面右から表示されるので、「トリガー」を選択してください。

ここではタグ自体の設定の前に、先ほど設定したトリガーを設定しておきます。

先ほど作成したトリガーの「テストクリック（任意）」を選択してください。

すると、トリガーが設定されるかと思います。

トリガーの設定が完了したら、次はタグ自体の設定をしていきます。

下図の「タグの設定」を選択してください。

設定画面が画面右から表示されるので、「Googleアナリティクス」を選択してください。

次に「Googleアナリティクス：GA4イベント」を選択してください。

するとタグの設定画面が表示されるので、以下の内容を設定していきます。

まずはじめに設定画面左上のタグ名を入力します。

ここでは「Google アナリティクス GA4 イベント テスト1」としておきます。（タグ名は任意です）

①測定ID
→Googleアナリティクスの測定IDを入力します。

以下の流れで取得が可能なので、コピーして入力欄にペーストしてください。

Googleアナリティクス管理画面左メニュー「設定」→データストリーム→該当のサイト項目を選択→測定ID

②イベント名
→イベント名を任意で設定します。半角英数字でご入力いただくのが推奨です。ここでは「link click wpm」というイベント名にして説明を進めます。

設定が完了したら、下図のようにタグが設定されているのが確認できるかと思います。

これでタグの設定は完了です！

ここまでで変数・トリガー・タグすべての設定が完了しました。

これでクリック数の計測が可能となりました！

「②トリガーの設定」で設定していただいたURLにアクセスしたときに、そのクリック数が計測されます。

ですが、上記手順通りに進めていただいたつもりでも、設定ミスをしてしまっている可能性もあります。

そのため、ここまでの設定が完了したら、必ず「プレビュー」機能で設定がちゃんと完了してイベント計測が機能しているかテストして確認してみます。

④プレビューで設定が機能しているか確認

設定画面右上の「プレビュー」を選択してください。

すると「Connect Tag Assistant to your site」というURLを入力してサイトページを趣味レーションするためのポップアップ画面が表示されます。

ポップアップのURL入力欄にサイトのURLを入力して「Connect」ボタンをクリックします。

クリック後、画面は下図の画面に切り替わり、サイトページのシュミレーション画面が別画面で同時に表示されます。

切り替わった下図の画面はタグマネージャーで設定した発火したイベントの内容を確認することができる画面になります。

そして下図がイベント発火確認画面と同時に表示されたサイトページのシュミレーション画面です。

画面右下にタグマネージャーが正常に機能しているかの表示がされます。

このシュミレーション画面にてページを操作してイベントの設定が正常に機能しているか確認していきます。

ここではクリック数を計測したいURLの導線をクリックしていきます。

すると、下図のようにイベント発火画面にて「Link Click」の項目にてTags Firedに設定したタグが表示されているかと思います。

Tags Firedに設定したタグが表示されていればイベントの設定は正常に動作していることになります。

正常にイベントが発火していることが確認できたら、最後に設定を公開をして本番反映していきます。

GTM設定画面の右上の「公開」をクリックしてください。

これで本番公開までできたので、クリック数を計測できるようになりました。

お疲れ様でした！

⑤Googleアナリティクスでクリック数（イベント数）を確認

Googleアナリティクスにてクリック数を確認することができます。

画面左メニューの「リアルタイム」「エンゲージメント」などからイベント数を確認することができますので、ご確認いただけましたら幸いです。

今回の解説で設定したイベント名「link click wpm」が無事計測できていることが確認できました。

ここまでで諸々設定が完了です。

まとめ

以上がGTM（Googleタグマネージャー）とGA4によるクリック数の計測方法についての解説になります。

慣れていない方にとってGTMによる設定方法は、設定方法の知識がなければわかりずらいことがあるかと思います。

当記事ではリンクのクリック数カウントに設定について手順通りに進めていただければ設定できるように構成しておりますため、仕事ですぐに設定が必要なパターンや、まずはとりあえずよくわからないから慣れるためにも手を動かしてみようというパターンまで、さまざまなパターンに寄り添って当記事を執筆いたしました。

そのため、よろしければぜひ当記事を使い倒していただいて、GTMの設定をマスターの人助けとしていただけますと大変嬉しいです。