Create clicked element events

Last updated: juin 26, 2018

Applies to:

Marketing Hub: Enterprise

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

  1. Installing and using the event bookmarklet
  2. Manually creating the event using an ID, Class or jQuery selector

It's recommended to use the event bookmarklet for simpler clicked events such as hyperlinks. For more complex content like images and CTAs, it's recommended to manually create the event.

A few common uses of clicked element events are tracking when:

  • 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 and use the event bookmarklet

In your HubSpot account, click the settings icon settings in the main navigation bar.

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

HubSpot Help article screenshot

Drag the Create new event button into your browser's bookmarks bar.

Next, navigate to a page on your website 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.

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

In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Reports > Analytics Tools. Then, select Events.

analytics-tools-events

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

In the pane 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.

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.

ID

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

Class

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. Learn more about supported selectors.

HubSpot Help article screenshot

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

Was this article helpful?

If you still need help you can get answers from the , or to contact support.

Previous article:

Next article: