お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Events

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

更新日時 2月 22, 2019

対象製品

Marketing Hub  Enterprise
Sales Hub  Enterprise
Service Hub  Enterprise

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

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

 

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

  • HubSpotアカウントにて、[レポート] > [アナリティクスツール]の順に進みます。次に、[Events (イベント)]を選択します。
  • 右上の[Create event (イベントを作成)]をクリックします。
  • 右側のペインで、[Event name (イベント名)]を入力し、[Tags (タグ)] (任意)を選択して、後でイベントを簡単にグループ化して検索できるようにします。下の[Event type (イベントタイプ)]で、[Clicked element (クリックされた要素)]を選択します。
  • [Next > (次へ >)] をクリックします。

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

ID

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

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

 

クラス

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

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

jQueryセレクター

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

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