> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/goals/testing/418nl5ximn.md).

# VWOで要素のクリック数を追跡するには？

要素のクリック数を追跡する目標は、通常、訪問者のデータと、Webサイトに存在するボタンや要素のクリック数を収集するために使用します。この目標の詳細については、「[要素のクリック数を追跡する](https://help.vwo.com/hc/en-us/articles/360033990973#trackClicksonElement)」を参照してください。 VWOでは、以下の2つの方法でテスト目標を定義できます。

1. ビジュアルエディターのUIから目標を追加する。
2. テスト作成時に 目標ページを使用して目標を追加する。

### **ビジュアルエディターのUIから目標を追加する** <a href="#ovt9ove7zt8v" id="ovt9ove7zt8v"></a>

ビジュアルエディター上で、追跡する要素を選択し、\[**クリックを追跡する**]オプションを選択します。

ボタンを選択している場合、エディターは事前に入力された目標名でウィジェットを開きます。要件に応じて目標名を変更でき、\[**完了**]をクリックします。この後、目標ページに要素のクリック数を追跡する新しい目標が表示されます。

**注：**&#x8FFD;跡したい要素は、コントロールとバリエーションの両方で表示され、また同じCSSセレクタパスを持ちます。ただし、\[目標]ページで「[要素のクリック数を追跡する](https://help.vwo.com/hc/en-us/articles/360033990973#trackClicksonElement)」を追加し、その要素が1つのバージョン（コントロールまたはバリエーションのいずれか）でのみ使用可能な場合、VWOは関連するバリエーションのデータのみを追跡します。

CSS セレクタのパスが異なる場合、追跡のためにすべての要素を追加することを確認します。単一の目標でのバリエーションを追跡するには、\[既存の目標で]を選択します。

詳しくは、「[ビジュアルエディターを使用して目標を追加する方法](https://help.vwo.com/hc/en-us/articles/360021105953)」を参照してください。

### **テスト作成時に目標ページを使用して目標を追加する** <a href="#k2pxtio6s72" id="k2pxtio6s72"></a>

追跡する要素は、「[目標の設定ページ](https://help.vwo.com/hc/en-us/articles/360019655053)」で定義できます。

**手順**

1. お客様のVWOアカウントにログインします。
2. \[**テスト**] > \[**A/B**]、または要件に応じて、他のテストの種類を選択することができます。\
   A/Bテストのダッシュボードが表示されます。
3. ダッシュボードで、\[**作成**] をクリックします。
4. \[**テスト対象のページのURLを入力する**]フィールドに、テストするWebページのURLを入力します。

   **注：**&#x30AD;ャンペーンへのURLの追加・除外は、\[URL]フィールドの横にある\[**詳細設定**]タブをクリックします。このタブでは、高度なパターンマッチオプションを使ってワイルドカードを指定して広範なURLを指定したり、特定のURLを指定したりできます。様々なURLパターンの使用については、「[VWOにおけるURLパターンの使い方](https://help.vwo.com/hc/en-us/articles/360021127714)」 をご参照ください。
5. \[**テストする仮説**]のプルダウンから、対象の仮説を選択します。 これはオプションのステップです。\
   **注：**&#x307E;だ仮説がない場合や、新しい仮説を作成したい場合は、仮説プルダウンの下部にある \[**仮説を新規作成**] オプションをクリックすることで可能になります。仮説の詳細については、「[VWOにおける仮説](https://help.vwo.com/hc/en-us/articles/360019569694)」をご参照ください。
6. \[**バリエーション**]ステップで、\[**次へ**]をクリックします。
7. \[目標]ステップで、\[新規目標]の横にある編集アイコンをクリックし、目標の名前を入力します。
8. \[目標タイプ]プルダウンから、\[**要素のクリック数を追跡**]オプションを選択します。
9. 次に、表示されるフィールドに有効なCSSセレクタのパスを追加します。CSSのパスの見つけ方については、[こちらをクリック](https://help.vwo.com/hc/en-us/articles/360021101273-How-to-Track-Clicks-on-Element-in-VWO-#h_69dced95-94f0-45eb-939b-3d8130d5a894)してください。

   **注：**&#x43;SSセレクタの代わりにXPathを追加することはできません。
10. 追跡する要素のCSSセレクタパスが正しく指定されていることを確認します。CSS セレクタのパスは、要素の ID（先頭にハッシュ（#））または関連するクラス（先頭にドット（.）を使用して、指定できます。![addGoal.jpg](/files/SSaMGZEsgqFqI4kHHuMT)\
    **注：**&#x8981;素に動的CSSセレクタパスがある場合、VWOはコンバージョンを追跡しません。目標設定でのパスの指定には、静的なCSSクラスを使用することを確認します。\
    **例えば、**&#x4EE5;下のスクリーンショットでは、#VWO-test-container-1 がコントロールバージョンの CSS パス、#VWO-test-container-2 がバリエーションの CSS パスになります。
11. スプリットURLテストでは、コントロールとバリエーションが、「[要素の目標をクリックする](https://help.vwo.com/hc/en-us/articles/360033990973#trackClicksonElement)」たびに同じ CSS セレクタパスを持っていることを確認します。 ただし、コントロールとバリエーションで CSS のセレクタパスが異なる場合は、要素ごとにセレクタパスをカンマで区切って追加します。
12. **例えば、**&#x4EE5;下のスクリーンショットでは、#VWO-test-container-1 がコントロールバージョンの CSS パス、#VWO-test-container-2 がバリエーションバージョンの CSS パスになります。詳しくは、「[VWO Testingで目標を作成する方法](https://help.vwo.com/hc/en-us/articles/360019655053)」をご参照ください。

### **ある要素のCSSパスを見つけるには？** <a href="#uzlmxwxf5mqo" id="uzlmxwxf5mqo"></a>

**Google Chrome**

1. 追跡したい要素を右クリックし、\[**要素の検査**]を選択します。開発者ツールは、要素のプロパティを表示します。
2. 要素プロパティを右クリックし、\[**コピー**]を選択し、\[**セレクタをコピー**]をクリックします。
3. CSSパスを\[**目標**]フィールドに貼り付けます。![Screenshot\_2019-08-20\_at\_5.34.07\_PM.png](/files/AM5Hf5RykxuUFSfzyil8)

**Mozilla Firefox**

1. 追跡したい要素を右クリックし、\[**要素の検査**]を選択します。
2. 開発者ツールで、要素プロパティを右クリックし、\[**コピー**]を選択し、\[**CSS セレクタ**]をクリックします。
3. CSSパスを\[**目標**]フィールドに貼り付けます。

要素IDが動的な場合は、手動で最短のCSSパスを見つける必要があります。デフォルトでは最も近い要素IDから計算されます。CSSセレクタの詳細については、[こちら](http://www.w3schools.com/cssref/css_selectors.asp)をクリックしてください。

![](/files/59SQIKAljgCpSr1iKRtT)
