要素クリックイベントを作成する

要素クリックイベントは、匿名の訪問者またはHubSpotコンタクトがウェブサイト上で特定の要素のクリックをトラッキングします。要素クリックイベントの作成方法は次の2つです。

• イベントChrome拡張機能をインストールして使用する
• ID、クラス、またはjQueryセレクターを使用して、イベントを手動で作成

注：2020年1月9日以前のSales Hub EnterpriseまたはService Hub EnterpriseのサブスクリプションのHubSpotアカウントもこの機能を利用できます。

ハイパーリンクや画像など、シンプルなクリックされたイベントには、イベントChrome拡張機能を使用することをお勧めします。CTAのような複雑なコンテンツについては、手動でイベントを作成することをお勧めします。

要素クリックイベントを使用してトラッキングする状況には次ののようなものが含まれます：

• 無料のデモCTAがクリックされた
• PDFダウンロードリンクがクリックされた
• 製品リストページの特定の製品画像がクリックされた

イベントを作成したら、イベント完了を分析して管理する方法を確認します。訪問したURLイベント、送信フォームイベント、カスタムイベントを作成することもできます。

注：要素クリックイベントは、HubSpotトラッキングコードがインストールされているページでのみ作成され追跡できます。

イベントChrome拡張機能を使用する

イベントChrome拡張機能をインストール

• HubSpotアカウントにて、ナビゲーションバーに表示される［設定アイコン settings］をクリックします。
• 左のサイドバーメニューで、［トラッキングとアナリティクス］>［トラッキングコード］に移動します。
• ［イベントChrome拡張機能をインストール］をクリックします。
• ［Download（ダウンロード）］をクリックします。
• Google ChromeウェブストアにHubSpotアナリティクス拡張機能にリダイレクトされます。右上の［Add to Chrome（Chromeに追加）］をクリックします。

• ダイアログボックスで［Add extension（拡張機能を追加）］をクリックします。
• 拡張機能がインストールされると、Chromeブラウザーツールバーにオレンジ色の歯車アイコンsprocketとして表示されます。

イベントChrome拡張機能を使用してイベントを作成する

• HubSpotトラッキングコードがインストールされているウェブページに移動。
• Chromeブラウザーのツールバーで、オレンジ色の歯車アイコンsprocketをクリックします。
• ダイアログボックスで、［Look for a selecter（セレクターを検索）］をクリックします。
• ページの要素をクリックして、要素クリックイベントを作成します。以下の例では、クリックされた要素のイベントがキーの要素リンクのクリックをトラッキングします。

• ダイアログボックスで、要素のCSSセレクターが自動生成されます。イベントの［名前］を入力し、タグ］（任意）を選択して、後でイベントを簡単にグループ化して検索できるようにします。
• ［送信］をクリックします。

• イベントが正常に作成されると、確認メッセージが表示されます。［View event in HubSpot（HubSpotでイベントを表示）］をクリックして、イベントダッシュボードで新しい要素クリックイベントを表示します。

注：サイトのHTMLおよびCSSマークアップの複雑さによっては、イベントChrome拡張機能が要素の一意なCSSセレクターを検出できない場合があります。この場合、代わりにイベントを手動で作成するか、一意のidタグを要素に追加する必要があります。

ID、クラス、またはjQueryセレクターを使用してイベントを手動で作成する

• HubSpotアカウントにて、［レポート］ > ［アナリティクスツール］の順に進みます。
• ［行動イベント］をクリックします。
• 右上の［イベントを作成］をクリックします。

• 右側のパネルで、プロパティーを設定します：
  • イベント名を入力します。
  • 後でイベントを簡単にグループ化して識別するには、［タグ］ドロップダウンメニューをクリックして、tagを選択するか入力します。
  • ［イベントタイプ］セクションでClicked Element（クリックされた要素）］を選択します。。
• ［次へ］をクリックします。

• トラッキングする要素をターゲティングするには、ID、クラス、またはjQueryセレクターを選択します。関連するID、クラス、またはjQueryセレクターを入力します。
• 特定のページのイベントとして追跡される要素のみが必要な場合は、ページURLフィールドにそのページのURLを入力します。

• 完了したら、［保存］をクリックします。

要素セレクターの理解して取得する

ID

要素クリックイベントは、ID属性によって要素を識別し、クリックされると検出します。

要素のIDを表示するには、次の手順を実行します。

• 対象の要素のページを右クリックして［ページのソースを表示］または［検査］を選択します。
• 要素をクリックします。コード行にID属性が表示されます（例：id="unique-element-name"）。
• ID値をコピーして（今回の場合はunique-element-name）［ID］フィールドにクォーテーションマークを含めずに貼り付けます。

クラス

要素クリックイベントは、クラス属性によって要素を識別し、クリックされると検出します。

• 対象の要素のページを右クリックして［ページのソースを表示］または［検査］を選択します。
• 要素をクリックします。コード行にクラス属性が表示されます（例：class="unique-element-name"）。
• クラス値をコピーして（今回の場合はunique-element-name）［クラス］フィールドにクォーテーションマークを含めずに貼り付けます。

jQueryセレクター

要素にターゲットを定めるために、フルjQueryセレクターを使用することもできます。これは、ターゲットになっている要素にIDまたはクラスがない場合、もしくはより詳細が必要な場合に便利です。サポートされているセレクターの詳細についてもっと詳しく。