Become a HubSpot power user — join us for HubSpot Training Day 2017.

How to create clicked element events

Last updated: June 13, 2016

Available For:

Product: HubSpot Marketing
Subscription: Enterprise

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. Both ways of creating these events are reviewed below.

A few common uses of clicked element Events are:

  • The 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 with HubSpot Tracking Code on them (HubSpot and/or external pages).

Creating a Clicked Event with the Events Bookmarklet

To use our Events Bookmarklet, you will first need to install the Bookmarklet into your browser. To install the Bookmarklet, please navigate to Reports > Events > Install Bookmarklet - For detailed instructions on installing and using the Bookmarklet to create the Event, please click here.

HubSpot Help article screenshot

When finished, the new Event will now be available to view the next time you go to Reports > Events.

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 creating the event using an ID, Class or jQuery selector

Follow these instructions to manually creating a clicked element Event.

Navigate to Events

From your HubSpot Dashboard, navigate to Reports > Events.

HubSpot Help article screenshot

Create a new Event

On the right, select the blue Create new event button.

HubSpot Help article screenshot

Name your event and select the event type

After naming your event, by clicking the name or pencil icon, you can choose the type of event you want to it by clicking on the Track type of event dropdown.

Select Clicked Element.

HubSpot Help article screenshot

Choose your selector to track the correct element

Event the ID, class, or full jQuery selector to target an element to track.

HubSpot Help article screenshot

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

In the example depicted above, the CTA could be selected by adding home-marquee-link-cta to the ID field.

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

In the example depicted above, the CTA could be selected by adding badge to the class field.

HubSpot Help article screenshot

Full 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

In the example depicted above, no class or ID is present, so the the link could be selected by using an attribute selector that selects anchor tags that link to that particular URL.

HubSpot Help article screenshot

Specify a page (optional)

If you only want the element to be tracked as an event on a specific page, place the URL here.

HubSpot Help article screenshot

Add a conversion value (optional)

If the element you are tracking has a monetary value associated with it, you can add this here by checking off the Use conversion value box.

The value from this clicked element event will funnel into the default Revenue property under the Analytics properties group for Contacts. You wil learn more about this feature in this article.

HubSpot Help article screenshot

Tag your event

Tag your events with custom topics to easily find and keep track of them.

HubSpot Help article screenshot

Create event

When you've settled on all the criteria for your event, click the blue button at the bottom to Create event.

HubSpot Help article screenshot

Was this article helpful?

Previous article:

Next article: