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:
- Install and use the event bookmarklet
- Manually create 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 Reports > Tracking Code.
- Click Install event bookmarklet.
- 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.
- 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.
- 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 account, navigate to Reports > Analytics Tools. Then, select Events.
- In the upper right, click Create event.
- In the right pane, enter an Event name, and select Tags (optional) to easily find and keep track of your event. Select Clicked element as the Event type
- Click Next.
- 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.
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.
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.
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.
In the bottom right, click Save to finish creating your clicked element event.