クリックイベント計測の重要性

  • ポップアップのどの要素が最も効果的かを特定
  • ユーザーの関心を引く要素を把握
  • コンバージョンにつながるクリックパターンの分析
  • A/Bテストの正確な効果測定

GTMでのクリックイベント設定(基本)

1. データレイヤーの準備

DataPushは以下のようなデータをデータレイヤーに送信します:

javascript
window.dataLayer.push({
'event': 'datapush_click',
'popup_id': 'popup123',
'popup_name': 'Newsletter Signup',
'clicked_element': 'signup_button',
'element_position': 'center'
});

2. GTMでの変数設定

  1. GTM管理画面で「変数」をクリック
  2. 「ユーザー定義変数」の「新規」をクリック
  3. 以下の変数を設定:
    • 名前:「dlv_popup_id」
      • 変数タイプ:「データレイヤー変数」
      • データレイヤー変数名:「popup_id」
    • 同様に他の必要な変数も設定

3. クリックトリガーの設定

  1. GTM管理画面で「トリガー」をクリック
  2. 「新規」をクリック
  3. トリガータイプ:「カスタムイベント」
  4. イベント名:「datapush_click」
  5. このトリガーを発生させる条件:「すべてのカスタムイベント」

4. GA4イベントタグの設定

  1. GTM管理画面で「タグ」をクリック
  2. 「新規」をクリック
  3. タグタイプ:「Google アナリティクス: GA4イベント」
  4. 設定:
    • 測定ID:「G-XXXXXXXX」(GA4の測定ID)
    • イベント名:「popup_click」
    • パラメータ:
      • popup_id:「{{dlv_popup_id}}」
      • popup_name:「{{dlv_popup_name}}」
      • clicked_element:「{{dlv_clicked_element}}」
      • element_position:「{{dlv_element_position}}」
  5. トリガー:先ほど作成したトリガーを選択

高度な計測設定

特定要素のクリック計測

特定のボタンやリンクのクリックを個別に計測したい場合:

  1. クリック変数の設定
    • 変数タイプ:「クリック要素」「クリックID」「クリッククラス」など
    • 名前:「v_click_text」「v_click_id」「v_click_class」など
  2. クリックトリガーの設定
    • トリガータイプ:「クリック – すべての要素」
    • このトリガーを発生させる条件:
      • 「クリック要素」が「ボタン」に一致
      • 「クリックテキスト」が「申し込む」を含む など
  3. GA4イベントタグの設定
    • イベント名:「popup_specific_click」
    • パラメータ:
      • popup_id:「{{dlv_popup_id}}」
      • clicked_text:「{{v_click_text}}」 など

クリック後の遷移先計測

クリック後の遷移先ページも含めて計測する方法:

  1. クリックURLの変数設定
    • 変数タイプ:「クリックURL」
    • 名前:「v_click_url」
  2. GA4イベントタグの設定
    • パラメータに「destination_url:「{{v_click_url}}」」を追加

複数ボタンがある場合の識別

ポップアップ内に複数のボタンがある場合の識別方法:

  1. データ属性の活用
    • ボタンにdata-popup-action="primary"などの属性を追加
    • GTMで「クリック要素」変数の「DOM属性」を活用
  2. 条件付きトリガーの設定
    • 「クリック – すべての要素」トリガー
    • 条件:「要素のdata-popup-action属性」が「primary」に一致

クリックイベントのデバッグ方法

GTMプレビューモードの活用

  1. GTM管理画面で「プレビュー」をクリック
  2. テスト対象のサイトURLを入力
  3. サイトが表示されたら、以下を確認:
    • データレイヤーでのイベント発火
    • タグの発火状況
    • 変数の値が正しく取得できているか

GA4デバッグビューの活用

  1. GA4管理画面で「デバッグビュー」を有効化
  2. リアルタイムでイベントが正しく送信されているか確認
  3. イベントパラメータが正しく設定されているか確認

よくあるエラーと解決方法

イベントが発火しない

  • DataPushのコードが正しく実装されているか確認
  • GTMのトリガー設定を見直し
  • 優先度の高い他のスクリプトとの競合を確認

パラメータが送信されない

  • データレイヤー変数名が正しいか確認
  • 変数スコープの設定を確認
  • データレイヤーバージョンの確認

重複イベントの発生

  • 同じイベントを発火させる複数のトリガーがないか確認
  • イベントの重複排除設定の確認

クリックイベント分析の活用例

  • 最もクリックされるCTAボタンのデザイン・文言の特定
  • クリックされやすい位置の把握
  • クリックからコンバージョンに至るまでの経路分析
  • A/Bテストでの勝者パターンの特定

関連機能

マニュアル一覧はこちら