GA4：特定のボタンのクリック回数を測定したい｜開発いらない・ノーコスト・ノーコードの対応方法を伝授します！

POINT

この記事は、以下のような人にオススメです。

特定ボタンのクリック回数を測定したい人
開発コストをかからずに実装したい方さらにオススメ
最後にできるWebディレクターについて触れます！

こんにちは！Webディレクターのオスカーです。
クライアントさんから「特定のボタンのクリック回数を測定したい」というリクエストがありました。

「それGA4でできますか」、と聞かれました。

もちろん、可能です。
以下に説明いたします。

最後まで見ていただけますと幸いです。

測定目的

「特定のボタンのクリック回数を測定したい」の目的はなんでしょうか？

ECサイトを例えとすると、
「カートに入れる」ボタンの回数、何回クリックされたのかを分母として、最終的CVした数字を分子とすれば、カゴ落ち（カート離脱）の数がわかります。

例えば、CVした人数は3に対し、「カートに入れる」のクリック回数が10の場合、カゴ落ち（カート離脱）は7で、70％の人はカートに入れたけど買わなかった。
ということがわかり、「カートをより購入されやすいUIにしよう」、または「送料無料キャンペーンを実施しよう」などの行動がとれるデータになります。
※「カートに入れる」のイベントは、EC拡張に含まれているので、すでに対応した場合、別途対応は必要ありません。
ECサイトでない場合、
例えば、サイトで「LINEを追加して、聞いてください」というボタンを設置したとします。
このボタンは、LINEの追加ページへ遷移するようにURL張っています。

結果２人追加されました。
さて、LINEの追加ボタンをクリックしたのは２人でしょうか？それとも、１０人クリックしましたけど、２人だけ登録したのでしょうか？
しかもLINEの追加ページへ遷移しましたので、そのページの表示回数を取得もできないため、自分のサイトのボタンのクリック回数しか頼りないです。

GA4の”click”イベントについて

補足ですが、GA4にはデフォルトで”click”というイベントがあります。

確認するには「レポート」⇒「イベント」へ移動。

下記のように、一定の期間中、何回イベントが発生したのかがわかります。

ただ、この数字はサイト全体で発生した”click”イベントの数になります。
特定のボタンのクリックはトラックしていません。

対応方法について

わかりやすくするため、例として、このサイトの左上のロゴボタンのクリック数を取得するとします。

目的：所在のページにかかわらず、上記ボタンのクリックされた回数を取得
方法：このボタンをクリックされるたびに、”top_logo_click”というイベントを送信させて、イベントの数を集計します。

対応方法は、少なくとも２通りがあります。

このボタンクリックされたときに、dataLayer 経由でeventをpushする
このボタンのclass”navbar-brand”をキーとして、GTMで検知して、クリックされたときに、eventを送信する

対応方法①

「ボタンクリックされたときに、dataLayer 経由でeventをpushする」ですので、
JSを作り、ボタンがクリックされたときに、下記を実行します。

      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: "top_logo_click" });

こちらの対応方法は説明するのは簡単ですが、普段コーディングしていない人にとっても難しいと思います。

対応方法②

GTMで対応します。

GTMの画面で、「タグ」⇒「新規」追加します。
タグ名を入れて（ここは”top_logo_clickイベント”として）、「タグの設定」をクリックします。
タグタイプでは「GA4イベント」を選択します。
設定タグは、GA4につないでいるタグのタグ名を選択します。
オスカーの場合、GA4のタグは「GA測定」という名前なので、それを選びます。
イベント名はGA4へ送りたい名前で、”top_logo_click”とします。
そして「行を追加」をクリックします。
パラメータ名は”click class”を命名しましたが、なんでもOKです。
このパラメータ名はイベント（top_logo_click）のパラメータとして、一緒にGA4へ送られるので、わかりやすい名前がいいです。
右の値のレゴをクリックします。
変数を選択画面で、もしここに”click class”があればそれを選択します。
なければ右上の「組み込み変数」をクリックします。
「組み込み変数」で「Click Classes」を選択できます。
洗濯したら、タグに戻りますが、今度は「トリガー」をクリックします。
「トリガーの選択」画面で、右上の「＋」をクリックします。
トリガーの名前を作成して、「トリガーの設定」へ進みます。
「トリガーのタイプを選択」の中に、「クリック」の「すべての要素」を選択します。
「トリガーの設定」に戻り、「すべてのクリック」ではなく、「一部のクリック」を選択します。
ここで、トップ画像のclassを入れます。
今回の場合は”navbar-brand”ですが、他のボタンで共通のclassを使っているのであれば、そのclassをこの部分に入れます。

入れたら「保存」します。
さらにタグの画面も「保存」します。