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

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

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

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

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

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

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

測定目的

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

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

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

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

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

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

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

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

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

対応方法について

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

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

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

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

対応方法①

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

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

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

対応方法②

GTMで対応します。

  1. GTMの画面で、「タグ」⇒「新規」追加します。

     
  2. タグ名を入れて(ここは”top_logo_clickイベント”として)、「タグの設定」をクリックします。

     
  3. タグタイプでは「GA4イベント」を選択します。

     
  4. 設定タグは、GA4につないでいるタグのタグ名を選択します。
    オスカーの場合、GA4のタグは「GA測定」という名前なので、それを選びます。

     
  5. イベント名はGA4へ送りたい名前で、”top_logo_click”とします。
    そして「行を追加」をクリックします。

     
  6. パラメータ名は"click class"を命名しましたが、なんでもOKです。
    このパラメータ名はイベント(top_logo_click)のパラメータとして、一緒にGA4へ送られるので、わかりやすい名前がいいです。
    右の値のレゴをクリックします。

     
  7. 変数を選択画面で、もしここに”click class"があればそれを選択します。
    なければ右上の「組み込み変数」をクリックします。

     
  8. 「組み込み変数」で「Click Classes」を選択できます。

     
  9. 洗濯したら、タグに戻りますが、今度は「トリガー」をクリックします。

     
  10. 「トリガーの選択」画面で、右上の「+」をクリックします。

     
  11. トリガーの名前を作成して、「トリガーの設定」へ進みます。

     
  12. 「トリガーのタイプを選択」の中に、「クリック」の「すべての要素」を選択します。

     
  13. 「トリガーの設定」に戻り、「すべてのクリック」ではなく、「一部のクリック」を選択します。

     
  14. ここで、トップ画像のclassを入れます。
    今回の場合は"navbar-brand"ですが、他のボタンで共通のclassを使っているのであれば、そのclassをこの部分に入れます。

    入れたら「保存」します。

     
  15. さらにタグの画面も「保存」します。

設定は以上です。

GTM PreviewとDebugViewで確認

設定は完了しましたので、テストで確認します。
DebugViewの使い方ご存知ない方はこちらの記事をご確認ください。
DebugViewの使い方

まずはGTM Previewでの確認結果。

下記のように、TOPのLOGOをクリックする時にイベントが発火されています。

次に、DebugViewでの確認結果。
イベントがGA4に転送されたことが確認できます。
イベントの中にはclick classというパラメータがあって、navbar-brandのclass名が送信できました。

後日、イベントレポートには”top_logo_click”のイベント回数が表示されると思います。

以上で「特定ボタンのクリック回数を集計する」設定方法です。

できる・できないWebディレクター

 

上記に記載したように、対応方法は2通りあります。
個人事業でプログラムの経験ある方なら、1つ目の開発の方法で対応するかもしれません。

Webディレクターの場合はどうなるでしょうか?

Webディレクターは、クライアントさんと開発会社の間に案件を管理しています。
クライアントさんの話を聞いて、Webディレクターは「対応できますよ」と答えます。

それからどちらの対応方法を選ぶでしょうか?

残念ながら、1つ目の「開発で対応」するディレクターが多かったです。
開発に依頼する場合、コストが発生します。
どんなに簡単な設定だとしても、仕様を確認して、実装して、テスト、反映。

少なくとも、3時間工数取られると思います。
しかし、開発コストが発生しても、その分、それ以上クライアントさんに取ればよい立場です。

実際、このように、左から右へ、右から左へと対応するWebディレクターがほとんどです。
まぁ、だから事業主側からしたら、Webディレクターはあってもなくてもいい存在かもしれません。

ただ、できるWebディレクターはちゃんとクライアントさんの立場で考えて、コストをできるだけ抑えて、自分でも対応できる2つ目の対応方法に取るでしょう。
この記事は多少長く見えますが、一度経験したら、またやろうと思えば、言われて実装するまで、おそらく30分もかかりません。

おわりに

どんなWebディレクターに巡り合うか、何もしなければ、単に運任せしかできません。

一般の情報サイトなら、一度サイトが出来上がり、運用しなくて済むかもしれませんが、
ECサイトでは、継続な運用が発生するし、スマートなWebディレクターがいないとサイトの売上にも影響してしまいます。

これから​​独自のECサイトを作って、ばりばり展開したいと思う方でしたら、一度ご相談ください。
微力ながら、よい会社を紹介できるかもしれません。

最後のところ、宣伝になってしまいますが、記事が少しでもお役に立てれば幸いです。

それでは。

From Our Blog