要素クリック目標設定
Element クリックとは?
Element クリック目標が最も効果的なケース
-
ボタン（例：ユーザー登録する、カートに追加 など）のクリック数を計測したい場合
- クリック後に、専用のサンクスページや確認ページへリダイレクトされない場合
- CTA に対して A/B テストを実施している場合
- 同じ CTA が複数のセクションに表示されており、合算して計測したい場合
- 最終コンバージョンの前段階として、エンゲージメントを計測したい場合
目標ダッシュボードの概要
-
目標名
各目標の名前が表示され、どのアクションを計測しているかを簡単に識別できます。 -
ステータス
目標が現在実行中か、無効になっているかを示します。 -
Visitors
選択した期間中に、その目標の対象となった訪問者数を表示します。 -
Conversions
目標アクションを完了した訪問者数を表示します。 -
平均コンバージョン時間
訪問者がページに到達してから目標を完了するまでに要した平均時間を表します。 -
作成日
目標がいつ設定されたかを確認でき、監査やパフォーマンス比較に役立ちます。 -
並べ替えとフィルター
目標を名前、訪問者数、コンバージョン数、平均コンバージョン時間、または作成日の新しい順で並べ替えて、すばやく分析できます。
Element クリック目標を設定する方法
- Track タブで「New Goal」をクリックし、目標の作成を開始します。
- 目標設定画面が開き、目標タイプの選択やトラッキング条件の定義を行えます。
- レポート上で識別しやすいように、目標にわかりやすく説明的な名前を入力します。
例:CTA Element クリック
-
利用可能な目標タイプの一覧から、Element クリックを選択します。
-
Nextをクリックして続行します。
- この手順では、選択した要素がどこに存在し、どこでトラッキングを有効にするかを定義します。
- PageSense には、目標を実行するページをより細かく制御できる[詳細]オプションがあります。この詳細セクションでは、8 種類の URL マッチタイプから選択でき、サイト構造に基づいて、どのページをトラッキング対象に含めるか／除外するかを正確に指定できます。
|
URL マッチタイプ
|
使用するタイミング
|
例
|
トラッキング対象
|
|
シンプル URL
|
単一の静的ページをトラッキングする場合
|
その特定ページのみをトラッキング
|
|
|
完全一致 URL
|
URL を完全一致で指定したい場合
|
入力した URL と完全に一致するページのみをトラッキング
|
|
|
URL に含む
|
関連する複数のページをまとめてトラッキングする場合
|
URL に「/product」を含むすべてのページをトラッキング
|
|
|
次で始まる
|
特定のセクションやフォルダ配下をトラッキングする場合
|
すべてのブログページをトラッキング
|
|
|
次で終わる
|
共通の末尾を持つページをトラッキングする場合
|
末尾が「thank-you」のすべての URL をトラッキング
|
|
|
部分一致
|
柔軟な部分一致でトラッキングしたい場合 | https://zylkerautomation.zohocommerce.com/offer |
類似パターンに一致する URL をトラッキング
|
| 正規表現 (Regex) |
動的または複雑な URL 構造を扱う場合
|
数値 ID を持つ商品ページをトラッキング
|
|
| ページグループ | あらかじめ定義した URL グループをトラッキングする場合 | Zylker – マーケティングキャンペーンページ |
定義したグループ内のすべての URL をトラッキング
|
-
要件に応じて、適切なマッチタイプを選択します。
-
対応するURL 値を入力します。
-
要素が複数のセクションにまたがって表示される場合は、条件を複数追加します。
有効なコンバージョンを取りこぼしたり、過剰にトラッキングしたりしないよう、マッチタイプは慎重に選択してください。
-
同じ要素がグローバル（例: ヘッダーやフッター）に表示されているが、特定のページではコンバージョンとしてカウントしたくない場合は、[Pages Not to Track]オプションを使用します。
-
除外ルールの定義にも、同じ URL マッチタイプを適用します。
-
これにより、コンバージョンデータの水増しや誤解を招く集計を防ぐことができます。
ここでは、コンバージョンとして記録したい特定の HTML 要素を定義します。
要素を選択する方法は 2 つあります:
ビジュアル要素セレクターを使うと、技術的な知識がなくてもページ上から直接要素を選択できます。
-
プレビュー用 URLを入力します。
-
ページが PageSense 内に読み込まれます。
-
要素の上にカーソルを合わせてハイライト表示させます。
-
トラッキングしたい要素をクリックします。
-
PageSense が自動的に適切なセレクターを生成します。
-
人的なエラーを減らせます。
-
最適化されたセレクターを自動生成します。
-
非エンジニアのユーザーでも扱いやすいです。
-
設定時間を短縮できます。
要素の構造が分かっている場合は、CSS セレクターを手動で入力することもできます。
CSS セレクターは、次のような情報を使って Web ページ上の特定の要素を識別します:
-
ID セレクター →
#signup-button
（ID は一意のため、もっとも信頼性が高い） -
クラス セレクター →
.cta-button
（複数の要素が同じスタイルを共有している場合に使用） -
組み合わせセレクター →
.hero-section .start-trial
（特定のセクション内の要素を対象にする） -
属性セレクター →
button[data-action='signup']
（カスタム属性に基づいて対象を絞り込む）
-
可能な限りID セレクターを優先して使用します。
-
.buttonや.primaryのような、汎用的すぎるクラス名は避けてください。 -
セレクターが、意図した要素のみを一意に特定できることを確認してください。
誤った、または範囲が広すぎるセレクターを指定すると、次のような問題が発生する可能性があります:
-
意図しない要素がトラッキングされる
-
コンバージョン数が水増しされる
-
レポート結果が不正確になる
要素を選択した後は、先に進む前に、生成されたセレクターを必ず確認してください。
Web サイトが、ページ全体を再読み込みせずに動的にコンテンツを読み込む場合（特にログイン後のページなど）、標準のプレビュー方法では要素を正確に取得できないことがあります。そのような場合は、Chrome 拡張機能の利用を推奨します。
動的な Web サイトでは、次のような動作が発生します:
-
要素が非同期で読み込まれる。
-
URL を更新せずにページの状態が変化する。
-
API コールの後にコンテンツがレンダリングされる。
このような場合、セレクターを早いタイミングで取得すると正しく動作しないことがあります。
-
別のボタンをクリックした後にのみ要素が表示される場合。
-
ナビゲーションしてもページが再読み込みされない場合。
-
セレクターが動的に変化する場合。
-
プレビュー方法では要素を選択できない場合。
Chrome 拡張機能を使用することで、複雑または動的なページ構造でも、正確なセレクターを取得できます。
-
ボタンをクリックする
-
ドロップダウンを開く
-
ポップアップを表示させる
-
セクション間を移動する
-
動的コンテンツと対話する
これにより、実際の操作時と同じ状態の要素を選択できます。
-
ページターゲティングルールを再確認する。
-
除外設定が正しく行われていることを確認する。
-
セレクターが対象の要素のみを一意に識別していることを確認する。
すべての内容を確認したら、Launch をクリックします。
有効化されるとすぐに、PageSense がクリックのトラッキングを開始します。
このドキュメントは、各ステップでの操作を分かりやすく案内できるように設計されています。さらにサポートが必要な場合やご不明な点がありましたら、遠慮なく support@zohopagesense.com - までお問い合わせください。いつでもお手伝いします。