Analytics Tools

Create clicked element events

Last updated: November 12, 2019

Applies to:

Marketing Hub  Enterprise
Sales Hub  Enterprise
Service Hub  Enterprise

A clicked element event tracks when an anonymous visitor or HubSpot contact clicks a specific element on your website. Clicked element events can be created in two ways:

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.

Situations where you may want to track using clicked element events include:

  • 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.

Use the event Chrome extension

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.
  • Select Events.
  • In the upper right, click Manage events.
  • In the upper right, click Create event.
  • In the right panel, set up your event:
    • Enter an Event name.
    • To easily group and identify the event later, click the Tags dropdown menu and select or enter a tag.
    • In the Event type section, select Clicked element.
  • Click Next.

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

  • Click Save once you're done.

ID

A clicked element event can identify an element by its ID attribute and detect when it is clicked.

To view an element's ID:

  • Right-click the page with the element you're targeting and select View page source or Inspect.
  • Click the element. You should be able to see the ID attribute in the line of code (e.g., id="unique-element-name").
  • Copy the ID value and paste this (e.g., in this case, unique-element-name) in the ID field without the quotation marks.
 

Class

A clicked element event event can identify an element by its class attribute and detect when it is clicked.

  • Right-click the page with the element you're targeting and select View page source or Inspect.
  • Click the element. You should be able to see the class attribute in the line of code (e.g., class="unique-element-name").
  • Copy the class value and paste this (e.g., in this case, unique-element-name) in the Class field without the quotation marks.
 

jQuery selector

You can also use full jQuery 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.