クリック数・スクロール率の計測タグを設定する方法

事前準備

• GTMの組み込み変数を有効化：
  • Click URL（リンク先のURL）
  • Click Text（クリック文字列）
  • Click Classes（クラス）
  • Click ID（ID）
  • Page Path（ページパス）

特定ボタンのクリック計測いろいろ

特定のボタンやリンクを明確に計測する用のタグを設置する。

トップページのピックアップバナーをクリックした数

ユーザー定義変数

• GTM → 変数 → 新規
• 変数タイプ：DOM要素
• 設定：
  • 選択方法：CSS セレクタ
  • セレクタ：li.p-pickupBanners__item ←対象を判別する値を設定（ピックアップバナーだとクラスにp-pickupBanners__itemという値が入っている）
  • 属性名：class
• 名前：pickup_banner

トリガー

• クリックタイプ：クリックー全ての要素
  • クリックーリンクだと、なぜか発火しないことがあり全ての要素に変更。
• タグの配信を待つ
• 妥当性をチェック
• 条件例：
  • ユーザー定義変数を含むpickup_banner ↑で定義した変数。
  • Click URL に 遷移先のスラッグ

タグ

• イベント名：pickup_banner_click など分かりやすい名前
• イベントパラメータ：
  • click_text → {{Click Text}}（ボタンの名前）
  • click_url → {{Click URL}}（どこのURLへ飛んだか）
  • page_path → {{Page Path}}（どこのページで押されたか）

複数ページ共通のボタン（Web予約ボタン、記事下ボタン）

<div class="swell-block-button is-style-btn_normal web-reserve-btn">
  <a href="https://xxx.com" target="_blank" rel="noopener noreferrer" class="swell-block-button__link">
    <span>WEB予約</span>
  </a>
</div>

SWELLのボタンはこのようなタグ構造になっている。
この場合、

• ユーザーは <span> をクリックする
• Click Element = span になる
• <span> はクラスもURLも持っていない

そのため、Click Classes や Click URL は空になり、通常のトリガー条件では発火しない。

SWELLの高度な設定でCSSクラス を追加すると、aタグにクラスが追加されるのではなく、その親のdivクラスに追加される。（以下の例だと、web-reserve-btnをcssクラスとして追加した）

トリガー

• トリガータイプ → クリック – すべての要素
• 「一部のクリック」にチェック
  • Click Text 正規表現に一致（大文字と小文字の違いを無視） web予約
  • Click Element CSS セレクタに一致する .web-reserve-btn, .web-reserve-btn *

パラメータ

• イベント名：web_reserve_click など分かりやすい名前
• イベントパラメータ：
  • click_text → {{Click Text}}（ボタンの名前）
  • page_path → {{Page Path}}（どこのページで押されたか）

電話予約ボタン

<a href="tel:0300000000">０３－００００－００００</a>

href 属性に tel: が含まれていればOK！

トリガー

• トリガータイプ → クリック – すべての要素
• 「一部のクリック」にチェック
  • Click URL 正規表現に一致 ^tel:

パラメータ

• イベント名：tel_reserve_click など分かりやすい名前
• イベントパラメータ：
  • page_path → {{Page Path}}（どこのページで押されたか）

サービス一覧 → 各サービス詳細ページ遷移数

これも、クラスをつけて判定するように変更。

<div class="swell-block-button is-style-btn_normal service-detail-btn">
  <a href="https://xxx.com" target="_blank" rel="noopener noreferrer" class="swell-block-button__link">
    <span>サービスA詳細</span>
  </a>
</div>

トリガー

• タイプ：リンクークリック
• 条件
  • Page Path = /services/（一覧ページ）
  • Click Element CSS セレクタに一致する .service-detail-btn, .service-detail-btn *

タグ

• イベント名：service_detail_click
• イベントパラメータ：
  • click_text → {{Click Text}}
  • click_url → {{Click URL}}
  • page_path → {{Page Path}}

GA4で click_url をディメンションにすれば、どの詳細ページへのクリックか集計可能

スクロール率を計測するタグ

変数を有効にする

GTM管理画面 → 左メニュー「変数」→ 右上「設定」 → 以下をチェック ✅：

• Scroll Depth Threshold
• Scroll Depth Units
• Scroll Direction

トリガー作成

• GTM → 「トリガー」 → 「新規」
• トリガータイプ：ユーザーエンゲージメント → スクロール距離
• 設定：垂直スクロール、25%, 50%, 75%, 90%など
• 発火場所：全ページ

タグ作成

• タグタイプ：GA4 イベント
• イベント名：scroll_depth
• イベントパラメータ：
  • scroll_percentage→{{Scroll Depth Threshold}}
  • scroll_direction→{{Scroll Direction}}
  • page_path→{{Page Path}}
• トリガー：作成したスクロールトリガー

動作確認

GTMプレビュー

プレビューで対象のボタンをクリックしたら
デバッグ画面の左側：リンククリック→変数を確認すると、click textやclick urlなどにどんな値が入っているかを確認できる。

さらにタグをクリックすると、どの判定のチェックが通らなかったのかを確認できる。

ちなみに、2枚目の画像の場合だと、最後の正規表現にひっかかっているので、
リンクークリックのみにしたときに追加条件としてでてくる「タグの配信を待つ」or「妥当性をチェック」がうまく機能していないと推測できる。

公開後：GA4リアルタイムにイベントが反映されるかチェック

1. GA4にアクセス
2. 左メニュー → 「リアルタイム」
3. 自分のアクセスを確認しながら、ページをスクロール
4. 中央の「イベント」一覧に scroll_depth が表示されれば成功！
   　→ イベントをクリックすると、パラメータも確認できます。

これで、お客様サイトのクリック数とスクロール率を計測できるGTM＆GA4の設定が完成します。
なかなか思ったようにタグが発火してくれなくて大変だった💦