Skip to content
Analytics Tools

Create clicked element events

Last updated: February 17, 2022

Applies to:

Marketing Hub Enterprise

A clicked element event tracks when an anonymous visitor or HubSpot contact clicks a specific element on your website. For example, track when a free demo CTA or PDF download link is clicked. Clicked element events can only be created and tracked on pages that have the HubSpot tracking code installed.

Please note:

  • The instructions in this article are for the new custom behavioral events tool, which replaces the previous behavioral events tool. Any events created in the legacy tool will continue to work, and you can still manage and analyze those events in the legacy tool.
  • Legacy events cannot be migrated to the new events tool. Instead, it's recommended to recreate your legacy events in the new tool, as new custom events provide more flexibility with event properties. For example, with legacy events you'd need to create multiple events to track separate campaigns, but now a single custom behavioral event can track multiple campaigns.

Clicked element events can be created in two ways:

Once you've created your events, learn how to analyze events in the analytics and reporting tools. You can also create visited URL events, and custom events.

Create clicked element events with the Chrome extension

Install the event Chrome extension

  • In your HubSpot account, click the settings settings icon in the main navigation bar.
  • In the left sidebar menu, navigate to Tracking & analyticsTracking 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 sprocket sprocket icon.
  • In the dialog box, select Clicked element

    chrome-extension-create-clicked-element-event
  • Click Next. You'll then be able to select an element on the page to track.
  • 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, then click Create event.

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.

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

HubSpot will then begin to track the element. Learn how to analyze the event in HubSpot.

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

  • In your HubSpot account, navigate to Reports > Analytics Tools.
  • Click Custom Behavioral Events.
  • In the upper right, click Create event.
  • In the right panel, enter a name for your event, then select Clicked element

    create-custom-clicked-element-event-type
  • Click Next.
  • Select how you want to identify the clicked element on the page. Learn more about how to find identifiers on a website page.
    • HTML ID: enter the ID of the element that you want to track. For example, if your clicked element is set up <button id="log-in">, you would enter log-in.
    • HTML Class: enter the class of the element you want to track. For example, if your clicked element is set up as <button class="bigCTA">, you would enter bigCTA.
    • jQuery selector: enter the jQuery selector of the element that you want to track.
       create-custom-clicked-element-ID
  • Click Next.
  • By default, the clicked element will be tracked on all pages with the HubSpot tracking code installed. To only track element clicks on a specific page, select Specific page, then enter the page URL.
  • Click Save.

After creating the event, HubSpot will begin to track the element. Learn how to analyze the event in HubSpot.

Understand and retrieve element selectors

You can identify an element by its HTML ID, HTML class, or by using a jQuery selector.

ID

To find and use 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 it (e.g., in this case, unique-element-name) into the HTML ID field without the quotation marks. For example, for an element that includes id="get-started-marketing-hub", you would enter get-started-marketing-hub into the field.
jquery-selector-id-selector0
 

Class

A clicked element event can identify an element by its class attribute. 

Please note:

  • when multiple elements on a page share the same class, only the first element on the page will count towards event completions. Therefore, you should only use class as an identifier when no other element on the page shares that class. If the element doesn't have a unique class, it's recommended to use ID instead.
  • If you're unable to update an element's source code to add a unique class or ID, it's recommended to use the Chrome extension to set the event up instead, as HubSpot will assign a more specific identifier.

 

To find an element's class and use it for the event:

  • 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 it into the HTML Class field without the quotation marks. For example, for an element that includes into the field.  
    • When an element has multiple classes, you can use any of its classes as a target. For example, if an element includes class="cta--primary cta--medium homepage-sales", you could enter cta--primary, cta--medium, or homepage-sales into the HTML Class field. However, ensure that no other elements share that class.
    • When joining multiple classes, use the following format: class1.class2.class3.

html-class-selector-single0

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.

For example, you want to create a clicked element event using a jQuery selector for the for the following element:

<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">Get started</a>

Rather than using the element's ID or class, you could use a jQuery selector to target the element's href property by entering the following into the jQuery selector field:

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

jquery-selector-field-with-value

Learn more about supported selectors.

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