要素クリックイベントの作成方法

更新日時 July 12, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Enterprise

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

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

ハイパーリンクといった簡単な要素クリックイベント用には、イベントブックマークレットの使用をお勧めします。画像やCTAなどの複雑なコンテンツについては、手動でイベントを作成する方が適しています。ここからは、この2つの方法について詳しく説明します。

要素クリックイベントの使用例:

  • 無料デモ用CTAがクリックされた
  • 訪問者がPDFをダウンロードした
  • 訪問者が製品一覧ページ上の特定製品の画像をクリックした
要素クリックイベントは、HubSpotトラッキングコードが設定されているHubSpotページまたは外部ページでのみ作成および追跡できます。

注:イベントは、Enterprise版のHubSpotでのみご利用いただけます。

イベントブックマークレットを使ってクリックイベントを作成する

イベントブックマークレットを使用するには、まず、ブックマークレットをブラウザにインストールする必要があります。ブックマークレットをインストールするには、[Reports(レポート)] > [Events(イベント)] > [Install Bookmarklet(ブックマークレットをインストール)]の順に移動します。イベントを作成するためにブックマークレットをインストールおよび使用する詳細な手順については、ここをクリックしてください。

HubSpot Help article screenshot

終了したら、次回[Reports(レポート)] > [Events(イベント)]を選択したときに新しいイベントが表示されるようになります。

自社サイトのHTMLマークアップが複雑である場合、ブックマークレットでは、その要素に対する一意のセレクターを検出できない場合があります。このような場合は、以下の手順に従って、イベントを手動で作成する必要があります。

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

要素クリックイベントを手動で作成するには、以下の手順に従ってください。

Events(イベント)に移動する

HubSpotダッシュボードで、[Reports(レポート)] > [Events(イベント)]の順に移動します。

HubSpot Help article screenshot

新規イベントを作成する

右側の青い[Create new event(新規イベントを作成)]ボタンをクリックします。

HubSpot Help article screenshot

イベントに名前を付けてイベントタイプを選択する

イベントに名前を付けたら、その名前または鉛筆アイコンをクリックして、[Track type of event(イベントのトラックタイプ)]ドロップダウンからイベントのタイプを選択します。

[Clicked Element(要素クリック)]を選択します。

HubSpot Help article screenshot

正しい要素を追跡するためにセレクターを選択する

追跡する要素を特定する属性として、IDクラス、またはフルjQueryセレクターを選択します。

HubSpot Help article screenshot

ID

クリック時に、要素のID属性を使って、その要素を検出します。IDは、id="その要素の一意名"の形式でHTML内に示されています。属性またはセレクターがわからない場合は、ページをソース表示するか、ブラウザを右クリックし、[Inspect Element(要素を調査)]を選択して、属性またはセレクターを特定します。

HubSpot Help article screenshot

上記の例では、IDフィールドに「home-marquee-link-cta」を指定することによって、このCTAを選択できます。

HubSpot Help article screenshot

クラス

クリック時に、要素のクラス属性を使って、その要素を検出します。クラスは、class="その要素の名前"の形式でHTML内に示されています。属性またはセレクターがわからない場合は、ページをソース表示するか、ブラウザを右クリックし、[Inspect Element(要素を調査)]を選択して、属性またはセレクターを特定します。

HubSpot Help article screenshot

上記の例では、クラスフィールドに「badge」を指定することによって、このCTAを選択できます。

HubSpot Help article screenshot

フルjQueryセレクター

要素を特定するためにフルセレクターを使用することもできます。ターゲットとする要素にIDもクラスもなく、より具体的な条件で要素を選択する必要がある場合は、フルjQueryまたはCSSセレクターを使用すると便利です。サポートされているセレクターについては、ここをクリックしてください。

HubSpot Help article screenshot

上記の例では、クラスもIDもないので、リンクの特定に、そのURLにリンクするアンカータグを選択する属性セレクターを使用しています。

HubSpot Help article screenshot

ページを指定する(オプション)

特定ページ上のイベントとして要素を追跡する必要がある場合は、ここにURLを入力します。

HubSpot Help article screenshot

コンバージョン値を追加する(オプション)

追跡する要素に金額の値が関連付けられている場合は、[Use conversion value(コンバージョン値を使用)]ボックスをチェックして、コンバージョン値を追加できます。

この要素クリックイベントで取得された値は、デフォルトのRevenue(収益)プロパティ(コンタクトのAnalytics(アナリティクス)プロパティグループ内)に送られます。この機能の詳細については、この記事を参照してください

HubSpot Help article screenshot

イベントにタグを付ける

イベントにカスタムトピックでタグを付けると、その検索と追跡が簡単になります。

HubSpot Help article screenshot

イベントを作成する

イベントのすべての条件を設定したら、一番下の青い[Create event(イベントを作成)]ボタンをクリックします。

HubSpot Help article screenshot

前の記事

次の記事