クリックされた要素イベントを作成

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

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

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

クリックされた要素イベントの一般的な利用目的には、次のような場合のトラッキングがあります：

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

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

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

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

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

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

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

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

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

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

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

• HubSpotアカウントにて、［レポート］ > ［アナリティクスツール］の順に進みます。
• [イベント]を選択します。
• 右上にある [管理] をクリックします。

• 右上の[Create event (イベントを作成)]をクリックします。
• 右側のパネルで、プロパティーを設定します：
  • イベント名を入力します。
  • 後でイベントを簡単にグループ化して識別するには、[タグ]ドロップダウンメニューをクリックして、tagを選択します。
  • 下の[イベントタイプ]で、[クリックされた要素]を選択します。
• [次へ] をクリックします。

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

ID

要素のID属性を使用して、クリックされた時刻を検出します。ID は、HTML で [id = "unique-element-name" (固有の要素名)]として表示されます。この場合、[要素セレクター]フィールドに一意の要素名を入力します。（フィールドにはクォーテーションマーク（"）を含めず、ID値自体のみを入力してください）。

ページ上の任意の場所を右クリックし、[ページのソースを表示]または[検査]を選択して、要素の固有 ID を決定します。

クラス

要素のクラス属性を使用して、クリックされた時刻を検出します。クラスは、HTMLで[class = "element-name" (要素の名前)]として表示されます。この場合は、[要素セレクター]の [クラス] フィールドにelement-nameとのみ入力します。

ページの任意の場所を右クリックし、[ページソースを表示]または[検査]を選択して、要素のクラスを決定します。

jQueryセレクター

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

右下の[保存]をクリックして、クリックされた要素イベントの作成を完了します。