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

コードのないカスタム動作イベントを作成する(ベータ版)

更新日時 2022年 9月 5日

対象製品

Marketing Hub Enterprise

カスタムの行動イベントを使用すると、ビジネス固有の情報を追跡できます。クリックした要素とアクセスしたURLイベントは、HubSpot Chrome拡張機能を使用してコードなしで作成できます。

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

注:

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

 

アクセスしたURLとクリックされた要素イベントは、HubSpot Chrome拡張機能をインストールして使用することで、ハイパーリンクや画像などの簡単なクリックされたイベントに作成できます。

予定を作成したら、分析ツールとレポートツールで予定を分析する方法を学びます。カスタムイベントを作成して手動で追跡することもできます。

Chrome拡張機能を使用して予定を作成する

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

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

  • [Download(ダウンロード)]をクリックします。

  • Google ChromeウェブストアにHubSpotアナリティクス拡張機能にリダイレクトされます。右上の[Add to Chrome(Chromeに追加)]をクリックします。

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

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

  • HubSpotトラッキングコードがインストールされたウェブページに移動します。
  • Chromeブラウザのツールバーで、 スプロケットアイコンをクリックします。
  • ダイアログボックスで[訪問済みURL]を選択し、[次へ]をクリックします。

  • イベント名を追加し、必要に応じて説明を追加します。[次へ]をクリックします。
  • [追加]をクリックしてページを追加します。1つのイベントに複数のページを追加できます。 
  • [ページURL]フィールドに、セッションをトラッキングするURLを入力します。
  • [名前]フィールドに、ページ名前を入力します。この名前は、トラッキング名というプロパティのイベントプロパティデータ内で使用できます。
  • [予定を作成]をクリックします。

HubSpotがイベントのトラッキングを開始します。HubSpotでイベントを分析する方法を学びます。

イベントChrome拡張機能を使用してクリックされた要素イベントを作成する

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

  • [次へ]をクリックします。 
  • イベント名を追加し、必要に応じて説明を追加します。[次へ]をクリックします。
  • 追跡するページの要素を選択するには、[追加]をクリックします。追跡するページの要素を選択します。1つのイベントに複数のクリックされた要素を追加できます。 
  • ページ 上の要素をクリックして、クリックされた要素イベントを作成します。以下の例では、クリックされた要素イベントは、主要な側面リンクのクリックを追跡します。

  • ダイアログボックスでは、要素のCSSセレクタが自動生成されます。トラッキングする要素の名前を入力します。この名前は、トラッキング名というプロパティのイベントプロパティデータ内で使用できます。必要に応じて説明を追加し、[次へ]をクリックします。
  • 予定に追加要素を追加し続けるには、[追加]をクリックして別の要素を選択します。
  • 予定を終了して保存するには、[予定を作成]をクリックします。

サイトのHTMLおよびCSSマークアップの複雑さによっては、イベントChrome拡張機能が要素の一意なCSSセレクターを検出できない場合があります。この場合、セレクタを変更する必要があります。ウェブサイトページのIDを見つける方法の詳細を参照してください。

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

その後、HubSpotは要素の追跡を開始します。HubSpotでイベントを分析する方法を学びます。 

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

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

ID

要素のIDを検索して使用するには:

  • ターゲットとする要素を含むページを右クリックし、[ページソースの表示]または[インスペクト]を選択します。
  • 要素をクリックします。コード行にID属性が表示されます(例:id="unique-element-name")。
  • ID値をコピーし、引用符なしでHTML IDフィールドに貼り付けます(この場合は、unique - element - nameなど)。たとえば、id =" get - started - marketing - hub "を含む要素の場合、フィールドにget - started - marketing - hubを入力します。

クラス

クリックされた要素イベントは、そのクラス属性によって要素を識別できます。 

 

注:

  • ページ上の複数の要素が同じクラスを共有する場合、ページ上の最初の要素のみがイベントの完了にカウントされます。したがって、ページ上の他の要素がそのクラスを共有していない場合にのみ、クラスを識別子として使用する必要があります。要素に一意のクラスがない場合は、代わりにIDを使用することをお勧めします。
  • 要素のソースコードを更新して一意のクラスまたはIDを追加できない場合は、代わりにChrome拡張機能を使用してイベントを設定することをお勧めします。HubSpotでは、より具体的な識別子が割り当てられます。

 

要素のクラスを検索してイベントに使用するには:

  • ターゲットとする要素を含むページを右クリックし、[ページソースの表示]または[インスペクト]を選択します。
  • 要素をクリックします。コード行にクラス属性が表示されます(例:class="unique-element-name")。
  • クラス値をコピーし、引用符なしでHTMLクラスフィールドに貼り付けます。たとえば、フィールドにを含む要素の場合。  
    • 要素に複数のクラスがある場合、そのクラスのいずれかをターゲットとして使用できます。たとえば、要素にclass =" cta -- primary cta -- mediumホームページセールス"が含まれている場合HTMLクラスフィールドにcta -- primary、cta -- medium、またはホームページセールスを入力できます。ただし、他の要素がそのクラスを共有しないようにしてください。
    • 複数のクラスに参加する場合は、次の形式を使用します。class1.class2.class3.

jQueryセレクター

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

たとえば、次の要素ののjQueryセレクタを使用して、クリックされた要素イベントを作成します。

<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Get started with Marketing Hub">いますぐ開始</a>

要素のIDまたはクラスを使用するのではなく、jQueryセレクタを使用して、jQueryセレクタフィールドに次を入力して、要素のhrefプロパティをターゲットにすることができます。

[href =' https://www.hubspot.com/products/marketing/get-started ']

 

サポートされているセレクターの詳細については、こちらをご覧ください

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.