analytics-toolsaccount-settings analytics-toolsbilling analytics-toolsconnected-email analytics-toolsgdpr analytics-toolsgetting-started analytics-toolshelp-resources analytics-toolsintegrations analytics-toolstracking-code analytics-toolsactivity-feed analytics-toolscompanies analytics-toolscontacts analytics-toolscrm-setup analytics-toolsdeals analytics-toolstasks analytics-toolsads analytics-toolscampaigns analytics-toolsctas analytics-toolsemail analytics-toolsfiles analytics-toolsforms analytics-toolslists analytics-toolssocial analytics-toolsblog analytics-toolsdesign-manager analytics-toolsdomains-urls analytics-toolslanding-pages analytics-toolsseo analytics-toolswebsite-pages analytics-toolscalling analytics-toolsdocuments analytics-toolsmeetings analytics-toolsplaybooks analytics-toolsproducts-quotes analytics-toolssequences analytics-toolssnippets analytics-toolstemplates analytics-toolsknowledge-base analytics-toolstickets analytics-toolschatflows analytics-toolsfeedback-surveys analytics-toolsinbox analytics-toolsworkflows analytics-toolsanalytics-tools
analytics-toolsdashboards analytics-toolsreports analytics-toolsmarketplace analytics-toolspartner-tools
お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Analytics Tools

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

更新日時 2020年 9月 14日

対象製品

Marketing Hub  Enterprise

匿名の訪問者または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 またはクラスがない場合、もしくはより詳細が必要な場合に便利です。サポートされているセレクターの詳細についてもっと詳しく。

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