Element Click Goals

Pro Plan

An element click goal counts a visit in which someone clicks a specific button or element on your page. In the dashboard, this goal type is called A click on a button or element. You tell Zenovay which element to watch with a CSS selector, so this type is mainly meant for developers.

When to use click goals

Best for tracking:

• Call-to-action buttons
• Buttons that open a form, a chat or a video
• Menu buttons
• Any clickable element that has no address of its own

Creating click goals

1. 1

   Open the Goals sub-tab

   Open your website from Domains, select the Journeys tab, then the Goals sub-tab.

2. 2

   Start a new goal

   Click New goal, then choose A click on a button or element.

3. 3

   Enter a CSS selector

   In the CSS selector field, enter the selector that identifies the element, for example #signup-button or .buy-now.

4. 4

   Name and value

   Give the goal a clear name, like "Sign-up button" or "Pricing button". Optionally turn on Give each conversion a value.

5. 5

   Create

   Click Create goal to save it.

CSS selectors

What is a CSS selector?

A pattern that identifies HTML elements:

<button id="signup-btn" class="cta primary">
  Sign Up
</button>

Selectors for this button:

• #signup-btn (by ID)
• .cta (by class)
• button.primary (by tag and class)

Common selectors

Selector	Matches
#my-id	Element with id="my-id"
.my-class	Elements with class="my-class"
button	All button elements
a.download	Links with class="download"
[data-action]	Elements with a data-action attribute

Finding the right selector

Method 1: Browser inspector

1. Right-click the element
2. Choose "Inspect"
3. Find the element in DevTools
4. Look for a unique id or class

Method 2: Test in the console

1. Open the browser console (F12)
2. Type: document.querySelector('your-selector')
3. If the element is returned, the selector works

Selector best practices

Use IDs when available

The most reliable option:

<button id="cta-signup">Sign Up</button>

Selector: #cta-signup

Use specific classes

If there is no ID, use a descriptive class:

<button class="btn btn-primary cta-main">Get Started</button>

Selector: .cta-main

Avoid generic selectors

Too generic	Problem
button	Matches all buttons
.btn	Too common
a	All links

Good	Why
#signup-cta	Unique ID
.cta-signup	Specific class
[data-goal="signup"]	Made for tracking

Add data attributes

Ask your developers to add an attribute made for tracking:

<button data-goal="signup" class="btn">Sign Up</button>

Selector: [data-goal="signup"]

Common examples

Call-to-action buttons

Goal	Selector
Main CTA	#hero-cta
Secondary CTA	.cta-secondary
Pricing CTA	.pricing-cta

Buttons in your interface

Goal	Selector
Chat opened	#open-chat
Video started	.video-play-button
Sign in button	.nav-signin

Links

For links to another address (navigation, downloads, outbound links), A click on a link is usually easier. A selector still works if you need it:

Goal	Selector
Any download	a[download]
PDF downloads	a[href$=".pdf"]
Social links	.social-links a

Advanced selectors

Attribute selectors

Pattern	Matches
[attr]	Has the attribute
[attr="value"]	Exact match
[attr*="value"]	Contains
[attr^="value"]	Starts with
[attr$="value"]	Ends with

Combinators

Pattern	Matches
div button	Button inside a div
div > button	Direct child button
button:first-child	First button
button:not(.disabled)	Not disabled

Examples

/* Submit buttons that are not disabled */
button[type="submit"]:not(:disabled)

/* Download links in the content area */
.content a[href$=".pdf"]

How clicks are counted

• A click on the element or anything inside it counts. For example, a click on the icon inside a button counts for the button.
• Each visit counts at most once. A visitor who clicks twice in one visit counts as one conversion. The same visitor can count again in a later visit.
• Counting starts when you create the goal. There is no history for element clicks.

If you want to count a click only on certain pages, make the selector more specific, for example by combining it with a parent element that only exists on those pages. For page-based results, use a page visit goal.

Dynamic elements

Elements added after the page loads

Click tracking is attached at the document level, so it works for elements that appear after the page has loaded, including content rendered by JavaScript frameworks.

Testing dynamic elements

1. Load the page
2. Wait for the element to appear
3. Click the element
4. Check that the goal counts the visit

Troubleshooting

Clicks are not counted

Check the selector:

// In the browser console
document.querySelector('your-selector')
// Should return the element

Check the timing:

• Clicks made before you created the goal are not counted
• Check that the goal is not paused

Check the element:

• Is the element visible when clicked?
• Is it hidden or covered by another element?

Wrong elements match

Make the selector more specific:

• Add parent context
• Use a more unique class
• Add a data attribute

Elements that load late

If the element appears after the page loads:

• Most cases work automatically
• Test thoroughly
• Consider an event goal if problems remain

Best practices

Plan your selectors

Before you start:

1. Identify your key buttons
2. Make sure they have unique identifiers
3. Note the selectors in the goal's description
4. Test on several pages

Work with your developers

Ask for:

• Unique IDs on key buttons
• Data attributes for tracking
• Consistent naming

Test thoroughly

1. Click the element yourself
2. Check the Live View tab
3. Check the goal's Latest conversions
4. Test on mobile too

Next steps

• Custom event goals
• Page visit goals
• Build funnels