Skip to content
BETA

Create codeless custom behavioural events (BETA)

Last updated: September 5, 2022

In Beta

Applies to:

Marketing Hub Enterprise

Custom behavioral events allow you to track information unique to your business. Clicked element and visited URL events can be created without code with the HubSpot Chrome extension.

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. Visited URL events record when an anonymous visitor or HubSpot contact visits a specific URL on your website.

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.

 

Visited URL and Clicked element events can be created by installing and using the HubSpot Chrome extension for simple clicked events, such as hyperlinks and images.

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

Create 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 a visited URL 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 icon.
  • In the dialog box, select Visited URL, then click Next.

  • Add your event name and optionally add a description. Click Next. 
  • Click Add to add a page. You can add multiple pages to a single event. 
  • In the Page URL field, enter the URL that you want to track visits to.
  • In the Name field, enter a name for the page. This name will be available within the event property data under the property called Tracking Name.
  • Click Create event.

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

Create a clicked element event with the event Chrome extension

  • Navigate to a web page with your HubSpot tracking code installed.
  • In the Chrome browser toolbar, click the sprocket icon.
  • In the dialog box, select Clicked element.

  • Click Next
  • Add your event name and optionally add a description. Click Next. 
  • To select an element on the page to track, click Add.  Select an element on the page to track. You can add multiple clicked elements to a single event. 
  • Click an element on the page to create a clicked element event. 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 element you’re tracking. This name will be available within the event property data under the property called Tracking Name. Optionally add a description, then click Next.
  • To continue adding additional elements to your event, click Add and select another element.
  • To finish and save your event, 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 modify the selector. Learn more about how to find identifiers on a website page.

  • 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(s). 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.

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

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.

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.

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']

 

Learn more about supported selectors.

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