Skip to content
Analytics Tools

Create clicked element events

Last updated: June 3, 2021

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 icon settings 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 jQuery selector.

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.