【CVX活用講座Vol.43】CVXでCTAごとのクリック数を計測する方法｜GTM・GA4活用

インハウスLP作成／LPO支援ツール「CVX（シー・ブイ・エックス）」の活用講座は、本記事で43回目となります。

今回は、CVXで作成したLPのCTAを、設置場所ごとにクリック計測する方法をご紹介します。

LPでは、ファーストビューやページ途中、ページ下部など、同じ申込み先へ誘導するCTAを複数設置するケースが多くあります。

また、スマートフォンでは、スクロールしても画面下部に表示され続ける「追従CTA」を設置することもあります。

こうした場合、「LP全体でCTAが何回クリックされたか」だけでなく、「どの位置のCTAがクリックされているのか」まで把握できると、CTAの配置やデザイン、訴求内容を見直す際のヒントになります。

今回は、CVX上で各CTAに識別用のidを設定し、GTM（Googleタグマネージャー）とGA4を使って、CTAごとのクリック数を確認する方法を解説します。

CTAごとのクリック数を確認するメリット

LPでは、同じ申込みフォームへ誘導するCTAを複数設置することがあります。

例えば、

• FV（ファーストビュー）
• サービス説明後
• 料金説明後
• ページ下部
• スマートフォンの追従CTA

などです。

すべて同じフォームへ遷移している場合、通常のCV計測だけでは「どのCTAを経由してユーザーが行動したのか」までは分かりません。

例えば、「追従CTAが多く使われている」のか、「サービス内容を読んだ直後のCTAが多く使われている」のかによって、LP内でユーザーが行動するタイミングは異なります。

CTAごとのクリック数を確認できるようにしておくことで、「どの場所がユーザーの行動につながっているのか」を把握しやすくなります。

追従CTAはGTM・GA4でクリック数を補完

CVXでは、クリックヒートマップを使ってページ内のクリック状況を確認できます。

一方で、画面下部などに固定表示される追従CTAは、スクロール位置によってページ上の位置が変わるため、通常のCTAと同じようにヒートマップ上へ正確に表示することが難しい場合があります。

そこで今回は、GTM・GA4を使ってCTAそのもののクリック数を取得する方法を利用します。

この方法であれば、

• ページ上部のCTA
• ページ途中のCTA
• ページ下部のCTA
• 固定・追従CTA

を、それぞれ個別に確認できます。

ヒートマップの代わりにするというより、ヒートマップだけでは確認しづらい情報を補う方法として考えると分かりやすいでしょう。

CTAクリック計測の流れ

今回の設定は、大きく3つのステップで行います。

1．CVXで各CTAに個別のidを設定

↓

2．GTMでCTAのクリックを取得

↓

3．GA4へCTAクリックの情報を送信

設定後に動作確認を行い、問題なく取得できていることを確認したうえでGTMを公開します。

ここから、それぞれの設定について見ていきます。

1．CVXでCTAに個別のidを設定する

まず、CVX上で各CTAを識別できるように、それぞれ異なる「id」を設定します。

idとは、HTML内の要素を識別するための名前のようなものです。

例えば、以下のように設定します。

CTAの位置	設定するid
ページ上部	cta_fv
ページ途中	cta_middle_01
ページ下部	cta_bottom
固定・追従CTA	cta_fixed_sp

今回は、すべて「cta_」から始まる名前に統一します。

こうしておくことで、後ほどGTM側でもCTAだけをまとめて計測しやすくなります。

追従CTAへの設定例

例えば、現在の追従CTAが以下のようなHTMLになっている場合、

<a href="#" style="display: inline-block; line-height: 0; text-decoration: none;" class="">

というクリック対象の<a>タグに、

id="cta_fixed_sp"

を追加します。

実際にCVXの編集画面で設定してみます。

①編集画面からhtml編集を開きます。

②id="cta_fixed_sp"を追加します。

変更後は、

<a href="#" id="cta_fixed_sp" style="display: inline-block; line-height: 0; text-decoration: none;" class="">

となります。

CVX側で行う変更は、基本的には各CTAの<a>タグへ識別用のidを追加するだけです。

その他のCTAについても同様に、

id="cta_fv"
id="cta_middle_01"
id="cta_middle_02"
id="cta_bottom"

といった形で、それぞれ異なるidを設定します。

idを付けるときの注意点

同じLP内では、同じidを複数のCTAに使わないようにします。

例えば、ページ内に3つのCTAがある場合、すべてに「cta_button」と付けるのではなく、

cta_fv
cta_middle_01
cta_bottom

のように分けておくことで、後からどのCTAが押されたのか判別できます。

設定後はCVXのプレビュー画面で、CTAの表示やリンクの動作に問題がないことも確認しておきましょう。

2．GTMでCTAのクリックを取得する

続いて、GTM側でCTAのクリックを取得します。

今回はGTMの「Click ID」を使用します。

Click IDを使うことで、先ほどCVX側で設定した、

cta_fv
cta_middle_01
cta_bottom
cta_fixed_sp

といったidを判別できます。

CTAクリック用のトリガーでは、例えば以下のように設定します。

Click ID
正規表現に一致
^cta_

「^cta_」は、「cta_から始まるid」を対象にするという意味です。

これにより、FV・中盤・下部・追従CTAなどを、一つのトリガーでまとめて対象にできます。

今後LPにCTAを追加した場合も、同じように「cta_」から始まるidを付けておけば、既存の設定を活用しやすくなります。

3．GA4へCTAのクリック情報を送信する

次に、GTMからGA4へクリック情報を送信します。

今回はイベント名を、

cta_click

で統一します。

さらに、

cta_id = {{Click ID}}

という情報を一緒に送ります。

例えば、FVのCTAをクリックした場合は、

イベント名：cta_click
cta_id：cta_fv

追従CTAをクリックした場合は、

イベント名：cta_click
cta_id：cta_fixed_sp

という形になります。

この方法であれば、CTAごとに別々のイベントを作成する必要はありません。

イベントは「cta_click」で統一し、どのCTAだったかを「cta_id」で判別する

という形にしておくと、設定や管理もしやすくなります。

設定後はGTMのプレビューモードで確認

設定が完了したら、すぐに公開するのではなく、GTMのプレビューモードで動作確認を行います。

例えば、

1. FVのCTAをクリック
2. ページ途中のCTAをクリック
3. ページ下部のCTAをクリック
4. 追従CTAをクリック

と順番に確認します。

それぞれ、

cta_fv
cta_middle_01
cta_bottom
cta_fixed_sp

が正しく取得できていることを確認します。

特に追従CTAについては、ページ上部だけでなく、中盤や下部までスクロールした状態でもクリックして確認しておくと安心です。

問題なく取得できていれば、GTMを公開します。

※GTMプレビューモード

GA4慣れているようなら公開すればリアルタイムで確認もできます。

CTAごとのクリック数はどのように見る？

計測が始まると、「どのCTAが多く使われているか」を比較できるようになります。

追従CTAのクリックが多い場合

スマートフォンの追従CTAが多くクリックされている場合は、追従CTAがユーザーの行動を促すうえで機能している可能性があります。

一方で、ページ内に配置しているCTAがほとんど利用されていない場合は、

「ページ内CTAが目立っていない」

「CTAを置く位置が適切ではない」

といった可能性も考えられます。

ページ途中のCTAが多い場合

特定のセクション直後に設置したCTAが多く使われている場合、その直前のコンテンツによってユーザーの行動意欲が高まっている可能性があります。

その場合は、同じ訴求内容を別の場所にも展開するなど、次の改善仮説につなげることができます。

計測結果をCVXでのLP改善に活用する

CTAごとのクリック数を確認できるようになったら、必要に応じてCVX上でLPを調整してみましょう。

例えば、

• CTAの位置を移動する
• 利用されていないCTAを削除する
• ボタンの文言やデザインを変更する
• 必要な箇所にCTAを追加する

といった改善が考えられます。

CVXでは、LPを編集したうえでA/Bテストを実施することもできるため、「計測 → 改善 → 検証」という流れで継続的にLPを改善できます。

なお、CTAのクリック数だけで良し悪しを判断するのではなく、CVXのヒートマップやCV数などもあわせて確認することが大切です。

例えば追従CTAはページを閲覧している間ずっと表示されているため、通常のCTAよりもクリックされる機会そのものが多くなります。

そのため、「クリック数が多い＝必ず優れたCTA」ではありません。

複数のデータを見ながら改善を考えていきましょう。

まとめ：CVX＋GTM・GA4でCTAごとのクリックを確認しよう

今回は、CVXで作成したLPのCTAに個別のidを設定し、GTM・GA4を使ってCTAごとのクリック数を計測する方法をご紹介しました。

設定の流れは、

1. CVXで各CTAに個別のidを設定
2. GTMでCTAのクリックを取得
3. GA4へ「cta_click」イベントを送信
4. プレビューモードで正常に取得できるか確認
5. GTMを公開

という形です。

この方法を利用することで、通常のページ内CTAだけでなく、固定・追従CTAについてもクリック数を確認できるようになります。

また、計測したデータをもとに、

「どのCTAが使われているのか」

「どの位置でユーザーが行動しているのか」

を確認することで、CTAの配置や文言、デザインの見直しにもつなげられます。

CVXのヒートマップやA/Bテストなども組み合わせながら、より成果につながるLP改善に活用してみてください。