Google Tag Managerを使ってGoogleAnalytics4でクリック数を計測する

目的

GTMを使用して、ボタンのクリック数をGAで見る
※GTM：Google Tag Manager
※GA：Google Analytics 4

=>そのボタンが表示されるまで訴求が正しくできているか、複数ボタンがある場合はどのボタンが一番クリックされていて、ctaの設置が適しているか、等をGoogle Analyticsで確認することが可能。

#サイト分析　#cta　#WEB制作

参考になったyoutube

GA4とGoogleタグマネージャーで特定のボタンクリックイベントを計測する方法

設定から公開までの流れ

WEBサイトのボタンに識別用としてidを付与する

• リンクのみではなく、divタグやbuttonタグで囲む場合があるので、一番外枠に対してidを付与することが正しく計測を行うには望ましい

GTMへ移動し、ボタンのidを読み取るための変数を確認

ワークスペース→変数（左のリスト）→設定（右上）から変数を追加できる

• すでに追加されている変数は表示されているので確認する

以下の3つを設定しておく

• Click Element
• Click URL
• Click Text

タグを作成する

タグ→新規（画面右上）でタグを作成する

左上にタグの名前（例：button-to-contact）を記載し、タグの設定をクリックする

タグタイプ選択画面でgoogle アナリティクスを選択する

Googleアナリティクス：GA4イベントを選択する

• この2つの違い
  • Googleタグ
    • GA4の基本的な計測のベースになるタグで、ページビューやセッションの開始などの 自動収集イベント が送られるようになる。
  • Googleアナリティクス：GA4イベント
    • 追加で任意のイベントを送るためのタグタイプ。
    • クリック、フォーム送信、動画再生など、ユーザーの行動を細かくトラッキングしたいときに使う。
    • GA4の分析で使いたいイベントをカスタムで送信可能。
  • まとめると「もっと細かくユーザーの行動を分析したいよって時はGA4イベントを使用する」

測定IDを設定する

• 測定IDの確認方法
  • Google Analyticsを開く
  • 管理→データの収集と修正から「データストリーム」→データストリームを選択

• ストリームの詳細欄に測定IDが記載されているので、コピーし、GTMに設定する

イベント名を記載する

イベント名はGA上に表示される名前となる

イベントパラメーターを指定する

• Event Settings Variableとは
  • 複数のGA4タグに共通で渡したいイベントパラメータをまとめて管理できる機能
  • イベントごとに毎回同じパラメータを書く手間を省けるのが目的
    • クリック数だけ取るなら、指定は不要、
    • 将来的に「会員ユーザーのクリック率」とか「ページ種類ごとのクリック比較」まで見たいという場合は使用する
• イベントパラメータとは
  • イベントに付与させる追加情報のこと、分析やレポートでどのidのボタンで、表示テキスト、クリックされたURLパスなどを詳細に調べたいときに設定する

パラメータ名	値（変数）	説明
button_id	{{Click ID}}	ボタンのID
button_text	{{Click Text}}	ボタンの表示テキスト
page_path	{{Page Path}}	クリックされたページのURLパス

トリガーを設定する

• トリガーのタイプ
  • どの行動をした時に計測を発火させるかを指定するもの
    • ウインドウの読み込み
    • クリック
    • スクロール距離など
  • があり、計測したいタイミングを指定する
  • 今回の場合、「クリックーすべての要素」を選択する
    • リンクのみも存在するが、ボタンはaタグに指定される場合やdivタグ、buttonタグに指定される場合もあり、リンクのみにするとこれらの場合で計測されない可能性があるため、すべての要素とする
• このトリガーの発生場所
  • このページのこのボタン！という場合は、「一部のクリック」を選択する
• イベント発生時にこれらのすべての条件がtrueの場合にこのトリガーを配信します
  • このidが付与された要素をクリックしたときに発火してねと指示したいので、「{{Click Element}}/CSSセレクタに一致する/#idの名前」を指定する
    • idはcss指定時、#で表すのと同じ。クラスの場合は.（ピリオド）で指定する。

タグを保存する

タグが動くかどうかプレビューで確認する

左のメニューからタグ→該当タグにチェックをいれる→プレビュー

リンクをクリック

デバックウインドウで指定したWEBサイトが開くので、サイトで指定したボタンをクリックしてみる

• Tagアシスタントという画面とデバックウインドウが2つ開くので、
  • ①デバックウインドウでボタンをクリックする
  • ②tagアシスタント画面の「配信タグ」に作成したタグの名前が入ってきているか確認するの順で作業を行う。
• 配信されたタグ内に作成したタグが入ってきていれば、問題なく動作しているのでOK

公開する

公開すると、実際のサイトでクリックした時に計測されて、アナリティクスのレポート→リアルタイム概要→イベント数からデータを確認することができる

• 公開ボタンをクリック→追加した内容がわかるよう、タイトルと説明書きを記載して公開する