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

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

更新日時 2021年 6月 30日

対象製品

Marketing Hub  Enterprise

要素クリックイベントは、匿名の訪問者またはHubSpotコンタクトがウェブサイト上で特定の要素のクリックをトラッキングします。たとえば、無料のデモCTAまたはPDFダウンロードリンクがクリックされたときにトラッキングします。要素クリックイベントは、HubSpotトラッキングコードがインストールされているページでのみ作成およびトラッキングできます。

注:

  • この記事では、従来の行動イベントツールに代わる新しいカスタム行動イベントツールについて説明しています。レガシーツールで作成されたイベントは引き続き機能します。また、レガシーツールで引き続きこれらのイベントを管理および分析できます
  • 従来のイベントを新しいイベントツールに移行することはできません。代わりに、新しいツールで従来のイベントを再作成することをお勧めします。新しいカスタムイベントでは、イベントプロパティーの柔軟性が向上するからです。たとえば、従来のイベントでは個別のキャンペーンをトラッキングするために複数のイベントを作成することが必要でしたが、1つのカスタム行動イベントで複数のキャンペーンをトラッキングできるようになりました。

要素クリックイベントの作成方法は次の2つです。

イベントを作成したら、分析およびレポートツールでイベントを分析する方法をご確認ください。URL訪問イベントおよびカスタムイベントを作成することもできます。

Chrome 拡張機能で要素クリックイベントを作成する

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

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

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

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

  • HubSpotトラッキングコードがインストールされているウェブページに移動。
  • Chromeブラウザーのツールバーで、sprocket歯車アイコンをクリックします。
  • ダイアログボックスで、[クリックされた要素]を選択します。

    chrome-extension-create-clicked-element-event
  • [次へ]をクリックします。これで、ページ上の要素を選択してトラッキングできるようになります。
  • ページの要素をクリックして、要素クリックイベントを作成します。以下の例では、クリックされた要素のイベントがキーの要素リンクのクリックをトラッキングします。

  • ダイアログボックスで、要素のCSSセレクターが自動生成されます。イベントの名前を入力し、[イベントを作成]をクリックします。

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

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

HubSpotが要素のトラッキングを開始します。HubSpotでイベントを分析する方法をご確認ください。

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

  • HubSpotアカウントにて、[レポート] > [アナリティクスツール]の順に進みます。
  • [カスタム行動イベント]をクリックします。
  • 右上の[イベントを作成]をクリックします。
  • 右側のパネルで、イベントの名前を入力し、[クリックされた要素]を選択します。

    create-custom-clicked-element-event-type
  • [次へ]をクリックします。
  • ページでクリックされた要素を特定する方法を選択します。ウェブサイトページのIDを見つける方法の詳細を参照してください。
    • HTML ID:トラッキングする要素のIDを入力します。たとえば、クリックされた要素が<button id="log-in">と設定されている場合は、「log-in」と入力します。
    • HTMLクラス:トラッキングする要素のクラスを入力します。たとえば、クリックされた要素が<button class="bigCTA">と設定されている場合は、「bigCTA」と入力します。
    • jQueryセレクター:トラッキングする要素のjQueryセレクターを入力します。
       create-custom-clicked-element-ID
  • [次へ]をクリックします。
  • 既定では、クリックされた要素は、HubSpotトラッキングコードがインストールされているすべてのページでトラッキングされます。特定のページの要素のクリックのみをトラッキングするには、[Specific page(特定のページ)]を選択し、ページのURLを入力します。
  • [保存]をクリックします。

イベントの作成が完了すると、HubSpotが要素のトラッキングを開始します。HubSpotでイベントを分析する方法をご確認ください。

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

HTML ID、HTMLクラス、またはjQueryセレクターで要素を識別できます。

ID

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

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

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

クラス

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

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

jQueryセレクター

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