要素クリックゴールは、訪問者が特定のページ要素をクリックしたときに発動します。CTAボタン、ナビゲーション、外部リンクの追跡に最適です。
クリックゴールを使用する場面
以下の追跡に最適です：
- コールトゥアクション（CTA）ボタン
- ナビゲーションメニューのクリック
- ダウンロードリンク
- 外部リンク
- 動画再生ボタン
- その他クリック可能な要素
クリックゴールの作成
ゴールは各ウェブサイトのダッシュボード上の Journeys タブに位置しています。
Journeys タブを開く
ウェブサイトのダッシュボードから Journeys タブを開き、ゴール サブタブを選択します。
ゴールを追加
ゴールを追加 をクリックし、ゴールタイプとして 要素クリック を選択します。
ゴールに名前をつける
「登録ボタン」や「料金プランCTA」など、わかりやすい名前を付けます。
CSSセレクターを入力
CSSセレクター フィールドに、追跡する要素を識別するセレクターを入力します。
値を追跡（オプション）
各完了に収益値を付与したい場合は、金銭的価値を追跡 を有効にします。
作成
作成 をクリックしてゴールを保存します。
CSSセレクター
CSSセレクターとは
HTML要素を識別するパターンです：
<button id="signup-btn" class="cta primary">
登録する
</button>
このボタンのセレクター：
#signup-btn（IDで指定）.cta（クラスで指定）button.primary（タグとクラスで指定）
よく使うセレクター
| セレクター | 一致する要素 |
|---|---|
#my-id | id="my-id" の要素 |
.my-class | class="my-class" の要素 |
button | すべての button 要素 |
a.download | class="download" のリンク |
[data-action] | data-action 属性を持つ要素 |
適切なセレクターを見つける方法
方法1：ブラウザの検証ツール
- 要素を右クリック
- 「検証」を選択
- DevTools で要素を確認
- 一意の id またはクラスを探す
方法2：コンソールでテスト
- ブラウザコンソールを開く（F12）
document.querySelector('your-selector')と入力- 要素が表示されればセレクターが正しい
セレクターのベストプラクティス
ID が使える場合は ID を使用
最も信頼性の高い方法：
<button id="cta-signup">登録する</button>
セレクター：#cta-signup
固有のクラスを使用
ID がない場合は、説明的なクラスを使用：
<button class="btn btn-primary cta-main">始める</button>
セレクター：.cta-main
汎用セレクターを避ける
| 悪い例 | 問題点 |
|---|---|
button | すべてのボタンに一致 |
.btn | 一般的すぎる |
a | すべてのリンクに一致 |
| 良い例 | 理由 |
|---|---|
#signup-cta | 一意の ID |
.cta-signup | 固有のクラス |
[data-goal="signup"] | 追跡専用の属性 |
データ属性の追加
開発者にトラッキング用属性の追加を依頼：
<button data-goal="signup" class="btn">登録する</button>
セレクター：[data-goal="signup"]
よくある設定例
CTA ボタン
| ゴール | セレクター |
|---|---|
| メイン CTA | #hero-cta |
| サブ CTA | .cta-secondary |
| 料金ページ CTA | .pricing-cta |
ナビゲーション
| ゴール | セレクター |
|---|---|
| 料金リンク | a[href="/pricing"] |
| お問い合わせリンク | nav a[href="/contact"] |
| サインイン | .nav-signin |
ダウンロード
| ゴール | セレクター |
|---|---|
| 任意のダウンロード | a[download] |
| PDF ダウンロード | a[href$=".pdf"] |
| 特定のファイル | a[href="/files/guide.pdf"] |
外部リンク
| ゴール | セレクター |
|---|---|
| 外部リンク | a[target="_blank"] |
| アフィリエイトリンク | a[href*="partner.com"] |
| SNS リンク | .social-links a |
高度なセレクター
属性セレクター
| パターン | 一致する要素 |
|---|---|
[attr] | 属性を持つ |
[attr="value"] | 完全一致 |
[attr*="value"] | 含む |
[attr^="value"] | 始まりが一致 |
[attr$="value"] | 終わりが一致 |
組み合わせ
| パターン | 一致する要素 |
|---|---|
div button | div 内のボタン |
div > button | div の直子のボタン |
button:first-child | 最初のボタン |
button:not(.disabled) | 無効でない |
例
/* 外部サイトへのリンク */
a[href^="http"]:not([href*="mysite.com"])
/* 無効でない送信ボタン */
button[type="submit"]:not(:disabled)
/* コンテンツ領域内のダウンロードリンク */
.content a[href$=".pdf"]
クリックのカウント方法
クリックゴールは訪問者セッションごとに1回完了します。Zenovay はセッション内の最初に一致するクリックを記録し、そのセッション内の同じ要素への後続のクリックは無視するため、2回クリックした訪問者は1つのコンバージョンとしてカウントされます。同じ訪問者が新しいセッションで戻ってくると、ゴールを再度完了できます。
特定のページでのみ特定のクリックを追跡したい場合は、クリックセレクターを、そのページにのみ存在する親と組み合わせることでセレクターレベルで制限するか、ページベースのコンバージョンに対して URL マッチゴール を使用してください。
動的要素
ページロード後に追加される要素
クリックトラッキングはドキュメントレベルでアタッチされるため、最初のページロード後に表示される要素（JavaScript フレームワークがレンダリングしたコンテンツを含む）でも機能します。
動的要素のテスト
- ページを読み込む
- 要素が表示されるまで待つ
- 要素をクリック
- ゴールが発動することを確認
トラブルシューティング
クリックが追跡されない
セレクターを確認：
// ブラウザコンソールで
document.querySelector('your-selector')
// 要素が返ってくれば正しい
要素の表示を確認：
- クリック時に要素が表示されているか？
- 非表示または覆われていないか？
間違った要素が一致する
セレクターをより具体的にする：
- 親要素のコンテキストを追加
- より固有のクラスを使用
- データ属性を追加
遅延ロードの要素
要素がページ後に読み込まれる場合：
- ほとんどの場合は自動的に機能
- 十分にテスト
- 問題が続く場合はカスタムイベントゴールを検討
ベストプラクティス
セレクターを計画
実装前に：
- 主要な CTA を特定
- 一意の識別子を確保
- セレクターを文書化
- すべてのページでテスト
開発者と連携
以下を依頼：
- 主要な CTA に一意の ID
- トラッキング用のデータ属性
- 一貫した命名規則
十分にテスト
- 要素を自分でクリック
- リアルタイムビューで確認
- ゴールが記録されたことを確認
- モバイルでもテスト