Events

Create clicked element events

Last updated: November 1, 2018

Applies to:

Marketing Hub
marketing-enterprise
Enterprise
Sales Hub
sales-enterprise
Enterprise
Service Hub
service-enterprise
Enterprise

Clicked element events record when an anonymous visitor or HubSpot contact clicks specific elements on your website. Clicked element events can be created in two ways:

  1. Install and use the event Chrome extension
  2. Manually create the event using an ID, Class or jQuery selector

It's recommended to use the event Chrome extension for simple clicked events such as hyperlinks and images. For more complex content like CTAs, it's recommended to create the event manually.

A few common uses of clicked element events are tracking when:

  • a free demo CTA is clicked
  • a PDF download link is clicked
  • a specific product image on your product listing page is clicked

Please note: clicked element events can only be created and tracked on pages that have the HubSpot tracking code installed.

 

Install the event Chrome extension

  • In your HubSpot account, click the settings icon settings in the main navigation bar.
  • In the left sidebar menu, navigate to ReportsTracking Code.
  • Click Install event Chrome extension.
  • Click Download.
  • You'll be redirected to the HubSpot Analytics extension in Google Chrome web store. In the upper right, click Add to Chrome.

  • In the dialog box, click Add extension.
  • Once the extension has been installed, it will appear as an orange sprocket icon sprocket in your Chrome browser toolbar.

 

Create an event with the event Chrome extension

  • Navigate to a web page with your HubSpot tracking code installed.
  • In your Chrome browser toolbar, click the orange sprocket icon sprocket.
  • In the dialog box, click Look for a selector.
  • Click an element on the page to create a clicked element event for. In the example below, the clicked element event will track clicks on the key aspects link.

  • In the dialog box, the element's CSS selector will be auto-generated. Enter a Name for the event and select Tag(s) (optional) to easily group and find the event later.
  • Click Submit.

  • After the event is successfully created, a confirmation message will appear. Click View event in HubSpot to view the new clicked element event in your events dashboard.

Please note: depending on the complexity of your site's HTML and CSS markup, the event Chrome extension may be unable to detect a unique CSS selector for an element. In this case, you should manually create the event or add a unique id tag to the element instead.

 

Manually create the event using an ID, class, or jQuery selector

  • In your HubSpot account, navigate to Reports > Analytics Tools. Then, select Events.
  • In the upper right, click Create event.
  • In the right pane, enter an Event name, and select Tags (optional) to easily group and find the event later. Under Event type, select Clicked element.
  • Click Next >.

  • Select ID, Class, or jQuery selector to target an element to track.
  • Enter the page URL in the Page URL field if you only want the element to be tracked as an event on a specific page.

ID

Use an element's ID attribute to detect when it is clicked. IDs appear in your HTML as id="unique-element-name. Right-click anywhere on your page and select View page source or Inspect to determine the element's unique ID.

 

Class

Use an element's class attribute to detect when it is clicked. Classes appear in your HTML as class="element-name". Right-click anywhere on your page and select View page source or Inspect to determine the element's class.

jQuery selector

You can also use full jQuery or CSS selectors to target elements. This is useful if the element you're targeting doesn't have an ID or class, or you need to be more specific. Learn more about supported selectors.

In the bottom right, click Save to finish creating your clicked element event.

Was this article helpful?

If you still need help you can get answers from the , or to contact support.