• マーケティング

【GA4】ボタンのクリック数を計測する方法を紹介

  • #GA4

こんにちは。

まついちです。

Googleアナリティクスで数値を分析する中で
ボタンのクリック数を計測したいと考えることがあると思います。

例えば、LPに設置しているCTAボタンのクリック数とか。
CTAとはCall To Actionの略でユーザーに目的の行動を促す為の重要なトリガーとなります。

WEBマーケティングではCVに至るKPI指標の一つとして、
このCTAのクリック数、クリック率を見ます。

今回はGTMを使った計測方法をご紹介したいと思います。

目次

  1. aタグにdata属性を設置
  2. GTMの設定
  3. GAでカスタムディメンションを設定

aタグにdata属性を設置

どのボタンがクリックされたかを把握するための方法は色々とありますが、
今回はdata属性を設置してその文字列をGTMで取得する方法をご紹介します。

ちなみにdata属性が何かは検索で色々と情報が出てくるので、
ここでは割愛させていただきます。
dataの後にくる文字列は任意で大丈夫です。

今回はdata-cta-buttonと定義し、値も任意で設定しています。

<!-- 複数設置するケース -->
<a href="#リンク先" data-cta-button="cta-first">CTAボタン</a>

<a href="#リンク先" data-cta-button="cta-second">CTAボタン</a>

<a href="#リンク先" data-cta-button="cta-third">CTAボタン</a>

GTMの設定

data属性取得用の変数設定

設定名は任意でOK。今回は[CTAボタン属性]と設定した。

  • 変数のタイプは[自動イベント変数]を選択
  • 変数タイプは[要素の属性]、属性名にaタグに設置した[data-cta-button]を入力

タグを設定

  • タグの種類は[GA4イベント]を選択
  • 設定タグは既にページビュー計測の為に定義しているものがあれば、それを使用しても可。
    今回は[手動設定したID]を選択。
  • 測定IDは[GA4の測定ID]を設定
  • イベント名は任意でOK。
    筆者はclickイベントと区分けしたかったので、分かりやすく[click_CTA]と定義
  • パラメータ名は任意でOK。
    今回は分かりやすく、[cta_action]を[申し込みボタン]、
    [cta_label]はdata属性取得用として定義した[CTAボタン属性]を選択
    この設定でページ全体のCTAクリック数は[cta_action]で取得し、CTA個別のクリック数は[cta_label]で取得出来ます

トリガーを設定

  • トリガーのタイプは[リンクのみ]を選択。
    もし、buttonタグを使っている場合は[すべての要素]を選択
  • このトリガーの発生場所は[一部のリンククリック]を選択
    トリガーとして、data属性取得用として定義した[CTAボタン属性][先頭が一致][cta-]と設定

GAでカスタムディメンションを設定

GA画面で設定した数値を表示させるにはGTMで取得したパラメータをカスタムディメンションで定義してあげる必要があります。

◆CTAアクション

  • ディメンション名は任意でOK。
    今回は[CTAアクション]と設定
  • 範囲は[イベント]を選択
  • イベントパラメータはGTMで設定した[click_action]を選択

◆CTAラベル

  • ディメンション名は任意でOK。
    今回は[CTAラベル]と設定
  • 範囲は[イベント]を選択
  • イベントパラメータはGTMで設定した[click_label]を選択

まとめ

今回はボタンのクリック数を計測する方法をCTAを例に紹介させて頂きました。

ボタンのクリック数に関わらず、GA4ではGTMを使って様々な数値を計測出来ます。

その為、なぜその数値を取るのかという目的が重要となってきます。

引き続き、GTMを使った指標の設定を紹介していきます。

 

 

  • 松浦 一彦

  • 約11年間、事業者会社、制作会社でWEBデザイン、WEBディレクション、GA/GTMを使用したアクセス解析などを経験。
    2022年3月よりフリーランスとして独立。
    現在は業務委託として複数の企業のプロジェクトに参加する傍ら、受託案件を受けたり、自身のブログを運用しています。

    • スキルUI/UX改善、サイト分析、WEBサイト&LPデザイン、コーディング、ディレクション、動画編集、WordPress構築
    • 言語HTML、CSS、Javascript/jQuery、PHP
    • ツールPhotoshop、illustrator、Premiere、After Effect、XD、Figma、Googleアナリティクス

関連記事