コードレスでカスタムビヘイビアイベントを作成（BETA）

カスタム行動イベントにより、お客様のビジネスに特化した情報を追跡することができます。クリックされた要素や訪問したURLのイベントは、HubSpot Chromeエクステンションを使えばコードなしで作成することができます。

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

Visited URLとClicked elementイベントは、ハイパーリンクや画像などの単純なクリックイベント用の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を入力します。
• 名前の欄には、ページの名前を入力します。この名前は、イベントのプロパティーデータ内の「Tracking Name」というプロパティーで確認できます。
• イベントの作成」をクリックします。

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

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

• をインストールしたウェブページに移動します。HubSpotのトラッキングコードをインストールします。
• Chromeブラウザーのツールバーで、スプロケットのアイコンをクリックします。
• ダイアログボックスで、［クリックした要素］を選択します。
  
  
• ［次へ］をクリックします。 
• イベント名と、オプションで説明を追加してください。［次へ］をクリックします。
• 追跡するページ上の要素を選択するには、追加をクリックします。追跡するページ上の要素を選択します。1つのイベントに複数のクリックされた要素を追加することができます。 
• ページ上の要素をクリックすると、要素クリックイベントが発生します。以下の例では、clicked要素のイベントは、重要な側面のリンクのクリックを追跡します。

• ダイアログボックスでは、要素のCSS セレクターが自動生成されます。トラッキングする要素の「名前」を入力します。この名前は、イベントのプロパティーデータ内の「Tracking Name」というプロパティーで確認することができます。オプションで説明を追加し、[ 次へ]をクリックします。
• 引き続きイベントに要素を追加するには、「追加」をクリックして、別の要素を選択します。
• イベントを完成させて保存するには、「イベントを作成する」をクリックします。

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

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

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

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

HTML ID、HTMLクラス、またはjQueryセレクターを使用して要素を特定することができます。

• HTML ID：追跡したい要素のID追跡したい要素のIDを入力してください。例えば、クリックした要素が設定されている場合<button id="log-in">の場合、log-inと入力します。
• HTMLクラス：追跡したい要素のクラス追跡したい要素のたとえば、クリックされた要素が<button class="bigCTA">と設定されている場合は、「bigCTA」と入力します。
• jQueryセレクター：追跡したい要素のjQueryセレクター追跡したい要素の

ID

要素のIDを検索して使用すること。

• 対象となる要素のあるページを右クリックし、「ページのソースを表示」または「検査」を選択します。
• 要素をクリックします。コード行にID属性が表示されます（例：id="unique-element-name"）。
• IDの値をコピーして、HTMLのID欄に引用符を付けずに貼り付ける（例：この場合、unique-element-name）。例えば、id="get-started-marketing-hub"を含む要素では、フィールドにget-started-marketing-hubと入力します。

クラス

クリックされた要素イベントは、class属性によって要素を特定することができます。 

要素のクラスを見つけ、それをイベントに使用すること。

• 対象となる要素のあるページを右クリックし、「ページのソースを表示」または「検査」を選択します。
• 要素をクリックします。コード行にクラス属性が表示されます（例：class="unique-element-name"）。
• クラス値をコピーし、 HTMLのクラス欄に引用符を付けずに貼り付けます。例えば、フィールドにインクルードする要素の場合。  
• 要素が複数のクラスを持つ場合、そのクラスのいずれかをターゲットとして使用することができます。例えば、ある要素がclass="cta--primary cta--medium homepage-sales "を含む場合、HTML Classの欄にcta--primary、cta--medium、またはhomepage-salesを入力することができる。ただし、そのクラスを共有する他の要素がないことを確認する。
• 複数のクラスに参加する場合は、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やclassを使うのではなく、jQueryのセレクター欄に以下のように入力することで、要素のhrefプロパティーをターゲットにすることができます。

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

の詳細はこちら対応セレクター .