How to create clicked element events

Last updated: February 26, 2018

Available For:

Marketing: Enterprise
Sales: N/A

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

  • Installing and using our bookmarklet
  • Manually creating the event using an ID, Class or jQuery selector

We recommend that you use the events bookmarklet for simpler clicked events such as hyperlinks. For more complex content like images and CTAs, we suggest manually creating the event. 

A few common uses of clicked element events are:

  • a free demo CTA was clicked
  • a visitor downloaded a PDF
  • a visitor clicked on a specific product image on your product listing page
Please note: clicked element events can only be created and tracked on pages that have the HubSpot tracking code installed.

Install the event bookmarklet

In your HubSpot account, click your photo or avatar in the top right-hand corner, then click Settings

In the left sidebar menu, click Install Code & Tracking. Under the Tracking code tab, click Install event bookmarklet.

HubSpot Help article screenshot
Drag the Create new event button into your browser's bookmarks bar.
HubSpot Help article screenshot

Using the events bookmarklet

Navigate to a page on your site where you want to track clicks, then click Create new event in your bookmarks bar.

Hover over and click the element that you want to track clicks on. In the example below, the clicked element event will track clicks on the Learn More link.

select element for clicked event

Enter a name for the event. It's best to give it a name in the past tense such as 'Clicked the link' or 'Started a trial'. You can also tag the event so you can easily group and find the event later. Click Create event to finish.

name clicked event

After the event is created, a confirmation dialog box will appear. Click View all Enterprise events to view your newly-created clicked element event in the events dashboard.

HubSpot Help article screenshot
Please note: depending on the complexity of your site's HTML markup, the bookmarklet may be unable to detect a unique selector for that element. In this case, you should manually create the event following the instructions below.

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

Follow these instructions to manually create a clicked element event.

Navigate to events

In your HubSpot account, navigate to Reports > Analytics Tools. Then, select Events.
HubSpot Help article screenshot

Create a clicked element event

On the events dashboard, click Create event in the upper right.

In the modal that slides in on the right, enter an Event name, and select Tags (optional) to easily find and keep track of your event. Select Clicked element as the Event type, then click Next at the bottom right.

HubSpot Help article screenshot

Choose your selector to track the correct element

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

HubSpot Help article screenshot


Use an ID attribute of the element to detect when it is clicked. IDs appear in your HTML as id="a-unique-name-for that-element". Right click in your browser and select View page source or Inspect to determine the attribute or selector if you don't know what it is.

HubSpot Help article screenshot


Use a class attribute of the element to detect when it is clicked. Classes appear in your HTML as class="a-name-for that-element". View Page Source  or right click the browser and Inspect Element to determine the attribute or selector, if you don't know what it is.

HubSpot Help article screenshot

jQuery selector

You can also use full selectors to target elements. Using a full jQuery or CSS selector is useful if the element you are targeting doesn't have a class or ID, or you need to be more specific. You can read more about supported selectors here.

HubSpot Help article screenshot

Click Save at the bottom right to finish creating your clicked element event.

Was this article helpful?

Previous article:

Next article: