Webサイトの運営者は常に「サイトの売り上げを最大化したい」と考えているはずです。
そこで、まず知らなければいけないことがサイトに訪れたユーザーの動きです。
Webサイト運営者はユーザーがどの訴求に心を動かされて、どのボタンをクリックしてコンバージョンまで繋がるのかなどの数値を追い続ける必要があります。
そこで大事になってくるのがボタンのクリックされた回数です。
最も多くクリックされるボタンには、1番売りたい商品のページや1番伝えたい重要なページへの遷移を置くのが良いでしょう。
この記事ではボタンをクリックされた回数を測定するための方法を紹介します。
なお測定には以下の2つのツールを利用します。
- Googleアナリティクス （GA4）
- Google Tag Manager（GTM）
- GTMとGoogleアナリティクスを用いたクリック回数の測定方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
トリガーの設定
まずはトリガーの設定をおこないます。トリガーではイベントの測定タイミングを指定します。
今回はクリックされた回数を測定するため「特定の要素がクリックされた」タイミングのトリガーを設定します。
クリックする要素の種類を選択
まずは、クリックされる要素の種類から選択していきます。
要素の種類には以下2つの種類があります。
- リンク以外の要素
- リンク要素
それでは設定していきます。
GTMでトリガー > 新規をクリックします。
トリガーの詳細 > クリック要素の種類を選択
クリック要素の種類を選択は下記画像の赤枠で囲まれている箇所で選択することができます。
- すべての要素：クリックする要素がリンクではない場合
- リンクのみ：クリックする要素がリンクの場合
クリックする要素の詳細を設定
ここまででクリックする要素がリンクかどうかの設定まで終わっています。
最後にどの要素をクリックされた場合の測定をするのか設定します。
クリックされた要素の詳細は下記の6つから選択することができます
| 変数名 | 説明 |
|---|---|
| Click Element | クリックされたタグの要素 |
| Click Classes | クリックされたタグのクラス属性値 |
| Click ID | クリックされたタグのID属性値 |
| Click Target | クリックされたタグのtarget属性値 |
| Click URL | クリックされたタグのURL |
| Click TEXT | クリックされたタグのテキスト |
今回はid属性値が"test"の場合にトリガーが発火する設定にします。HTMLの記述は下記になります。
<a id="test" href="…"> ボタン</a>
それでは設定していきます。
このトリガーの発生場所 > 一部のリンククリックをクリックし、イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します > Click ID > 等しい > testと設定します。
Click IDが出てこない場合
Click IDが出てこない場合は組み込み変数を追加する必要があります。
組み込み変数とは、よく利用する値をあらかじめ変数として扱えるようGTM側で用意されたものです。
組み込み変数「Click ID」は設定したid属性値がクリックされた時に発火するような設定です。
組み込み変数は以下の手順から簡単に追加することができます。
イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します左側のセレクトボタン > 組み込み変数を選択します > 追加したい組み込み変数をチェック
ここまで設定が完了したら任意の名前をつけて保存します。
今回は「テスト トリガー」と名前をつけて保存します。
タグの設定
先ほど設定したトリガーが発火したことをGoogleアナリティクスに伝える設定を行います。
GTMで タグ > 新規をクリックします。
タグとトリガーを紐づける
どのトリガーが発火した際にデータを伝えるのか設定するため、トリガーを紐づける必要があります。
トリガーをクリック
先ほど設定したテストトリガーをクリック
データをGoogleアナリティクスへ送信する
紐づけたトリガーが発火したタイミングでGoogle アナリティクスへデータを送信する設定を追加します。
タグの設定
Google アナリティクス: GA4イベント
設定タグをGoogle アナリティクスGA4設定 に、イベント名を任意の値に設定します。
イベント名はアナリティクス側でどのイベントが発生したのかを確認するための名前になります。
イベントの名前がわかる値にしましょう。
今回はtest-eventと設定します。
設定が完了したら任意の名前をつけて保存します。
設定をプレビューで確認する
設定はここまでで終了です。
今設定した内容が正しく測定できるか確認しましょう。
GTMのプレビュー機能を用いて確認します。
画面右上のプレビューをクリック
Googleアナリティクスの測定ができるURLを入力
画面右下Finishをクリック。
*広告などを非表示にすることができるブラウザ「Brave」を利用している方は表示されないためChromeなどのブラウザでテストしましょう。
発火したトリガーは下記画像赤枠内「Tags Fired」欄に表示されます。
発火していないトリガーは下記画像黄色枠内「Tags Not Fired」欄に表示されます。
今回はtest-タグのトリガーであるボタンをクリックしていないため、Tags Not Fired欄に表示されています。
この記事では省略しますが、実際にタグを発火させた場合はTags Fired欄に表示されることを確認しましょう。
設定した内容を公開する
ここまででタグの実装とテストが完了しました。
しかし、この状態ではまだ、アナリティクスで確認することはできません。
最後に設定した内容を「公開」して初めて一般ユーザーの測定できるようになります。
画面右上公開ボタンをクリックします。
公開する際はどのような編集をしたのかメモに残しておきましょう。
Google アナリティクスで確認する
設定したタグはGoogle アナリティクスのイベントから確認することができます。
タグの設定で設定したイベント名がアナリティクス上で表示されます。
リアルタイムで数値を確認する場合
設定したタグを今すぐ確認したい場合はリアルタイム > イベントから確認することができます。
過去の数値を確認する場合
設定したタグを今すぐ確認したい場合はリアルタイム > イベントから確認することができます。
まとめ
GTMでクリックイベントを測定しGoogleアナリティクスへ反映させる方法を理解することはできたでしょうか？
GTMを利用するとクリックイベントだけでなく、スクロールした量なども簡単に測定することができるようになります。
また、JavaScriptを利用しカスタムイベントを設定すると、様々なユーザーの動きを測定できるようになります。
詳細な動きを測定したい場合はぜひ利用してみましょう。
GTMでクリックイベントを測定しGoogleアナリティクスへ反映させる方法まとめ
- GTMでトリガーとタグを設定する
- 公開する前にプレビューでテストをする
- タグの設定の際に入力したイベント名がアナリティクスで反映される
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
