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 Chrome extension
- Manually create the event using an ID, Class or jQuery selector
It's recommended to use the event Chrome extension for simple clicked events such as hyperlinks and images. For more complex content like CTAs, it's recommended to create the event manually.
A few common uses of clicked element events are tracking when:
- a free demo CTA is clicked
- a PDF download link is clicked
- a specific product image on your product listing page is clicked
Please note: clicked element events can only be created and tracked on pages that have the HubSpot tracking code installed.
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 Reports > Tracking 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 orange sprocket icon sprocket.
- In the dialog box, click Look for a selector.
- 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 and select Tag(s) (optional) to easily group and find the event later.
- Click Submit.
- 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.
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.
Manually create the event using an ID, class, or jQuery selector
- In your HubSpot account, navigate to Reports > Analytics Tools.
- Select Events.
- In the upper right, click Manage events.
- In the upper right, click Create event.
- In the right panel, set up your event:
- Enter an Event name.
- To easily group and identify the event later, click the Tags dropdown menu and select a tag.
- Under Event type, select Clicked element.
- Click Next.
- Select 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 element's ID attribute to detect when it is clicked. IDs appear in your HTML as id="unique-element-name". In this case, only enter unique-element-name in the ID field under Element selector (do not include the quotation marks (") in the field, only the ID value itself).
Right-click anywhere on your page and select View page source or Inspect to determine the element's unique ID.
Use an element's class attribute to detect when it is clicked. Classes appear in your HTML as class="element-name". In this case, only enter element-name in the Class field under Element selector.
Right-click anywhere on your page and select View page source or Inspect to determine the element's class.
You can also use full jQuery or CSS 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.
In the bottom right, click Save to finish creating your clicked element event.