要素クリック目標
要素のクリックとは
要素のクリック目標が効果的なケース
-
ボタン（例：登録、カートに追加など）のクリックを追跡する場合
- クリックしても固有の確認ページに移動しない場合
- CTAでA/Bテストを実行している場合
- 同じCTAが複数のセクションに表示され、そのクリックをまとめて追跡する場合
- 最終的なコンバージョンに至る前のエンゲージメントを測定する場合
要素のクリック目標を設定するには
- ［追跡］モジュールで［新しい目標］をクリックし、目標の作成を開始します。
- 目標の設定画面が開き、目標の種類を選択して追跡条件を設定できます。
- レポートで簡単に識別できるように、目標の内容が分かる明確な名前を入力します。
例：CTA要素のクリック
-
選択可能な目標の種類の一覧で、［要素のクリック］を選択します。
-
［次へ］をクリックして、設定を続けます。
- この手順では、選択した要素が存在する場所と、追跡を有効にする場所を設定します。
- PageSenseには、目標を実行する場所をより細かく制御できる詳細オプションがあります。この詳細セクションでは、8種類のURL一致条件から選択でき、Webサイトの構造に基づいて、追跡対象に含めるページや除外するページを正確に設定できます。
|
URLの一致条件
|
使用する場合
|
例
|
追跡対象
|
|
［シンプルURL］
|
単一の静的ページを追跡する場合
|
指定したページのみ
|
|
|
［完全一致URL］
|
URLを完全に一致させる必要がある場合
|
入力したURLと完全に一致するURLのみを追跡
|
|
|
［URLが次の値を含む］
|
関連する複数の項目を追跡する場合
|
「/product」を含むすべてのURLを追跡
|
|
|
［次の値で始まる］
|
セクションまたはフォルダーを追跡する場合
|
すべてのブログページを追跡
|
|
|
［次の値で終わる］
|
末尾が共通するページを追跡する場合
|
末尾が「thank-you」のすべてのURLを追跡
|
|
|
［次の値と一致］
|
柔軟な部分一致を使用する場合 | https://zylkerautomation.zohocommerce.com/offer |
類似するパターンに一致するURLを追跡
|
| ［正規表現］ |
動的または複雑なURL構造の場合
|
数値IDを含む商品ページを追跡
|
|
| ［ページグループ］ | 事前に設定したURLグループを追跡する場合 | ジルカー–マーケティングキャンペーンページ |
設定したグループ内のすべてのURLを追跡
|
-
要件に応じて、適切な一致条件を選択します。
-
該当するURLの値を入力します。
-
要素が複数のセクションに表示される場合は、複数の条件を追加します。
過剰な追跡や有効なコンバージョンの見逃しを防ぐため、一致条件は慎重に選択してください。
-
同じ要素が全ページに表示される場合（ヘッダーやフッターなど）でも、特定のページではコンバージョンとしてカウントしない場合は、［追跡対象外のページ］オプションを使用します。
-
同じ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拡張機能を使用すると、複雑または動的なページ構造でもセレクターを正確に取得できます。
-
ボタンをクリックする
-
ドロップダウンを開く
-
ポップアップを表示する
-
セクション間を移動する
-
動的コンテンツを操作する
これにより、実際の操作状態の要素を選択できます。
-
ページのターゲット設定ルールを再確認します。
-
除外設定が正しく設定されていることを確認します。
-
セレクターが対象の要素のみを一意に識別していることを確認します。
すべての確認が完了したら、［実行する］をクリックします。
有効化されると、PageSenseですぐにクリックの追跡が開始されます。
このドキュメントは、すべての手順をわかりやすく進められるように作成されています。さらにサポートが必要な場合や質問がある場合は、support@zohopagesense.com - までお気軽にお問い合わせください。いつでもサポートいたします。