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

こんにちは！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"というイベントを送信させて、イベントの数を集計します。

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

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ディレクター

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

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

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

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

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

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

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

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

アフィリエイト

おわりに

サイトオーナーとして、どんなWebディレクターに巡り合うか、単に運でしかないかもしれません。

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

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

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

それでは。