Element Click Goals

Pro Plan

Element Click goals fire when visitors click specific page elements. Perfect for tracking CTA buttons, navigation, and outbound links.

When to Use Click Goals

Best for tracking:

• Call-to-action buttons
• Navigation menu clicks
• Download links
• Outbound links
• Video play buttons
• Any clickable element

Creating Click Goals

CSS Selectors

What's 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 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 unique id or class

Method 2: Visual Selector Tool

Scale Plan

1. Go to Goals and click New Goal
2. Click "Pick Element"
3. Navigate to your page
4. Click on the element
5. Selector auto-generated

Method 3: Test in Console

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

Selector Best Practices

Use IDs When Available

Most reliable option:

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

Selector: #cta-signup

Use Specific Classes

If no ID, use descriptive class:

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

Selector: .cta-main

Avoid Generic Selectors

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

Good	Why
#signup-cta	Unique ID
.cta-signup	Specific class
[data-goal="signup"]	Purpose-built

Add Data Attributes

Ask developers to add trackable attributes:

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

Selector: [data-goal="signup"]

Common Examples

CTA Buttons

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

Navigation

Goal	Selector
Pricing link	a[href="/pricing"]
Contact link	nav a[href="/contact"]
Sign in	.nav-signin

Downloads

Goal	Selector
Any download	a[download]
PDF downloads	a[href$=".pdf"]
Specific file	a[href="/files/guide.pdf"]

Outbound Links

Goal	Selector
External links	a[target="_blank"]
Affiliate links	a[href*="partner.com"]
Social links	.social-links a

Advanced Selectors

Attribute Selectors

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

Combinators

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

Examples

/* Links to external sites */
a[href^="http"]:not([href*="mysite.com"])

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

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

Page Scope

Limit to Specific Pages

Track clicks only on certain pages:

1. Enable "Limit to pages"
2. Enter URL pattern
3. Clicks only count on those pages

Examples

Scope	URL Pattern
Homepage only	/ (exact)
Blog posts	/blog/ (starts with)
Pricing page	/pricing (exact)

Why Scope?

Same element might exist on multiple pages:

• Track homepage CTA separately
• Different intent on different pages
• More accurate attribution

Counting Options

Once Per Session

Default behavior:

• First click counts
• Subsequent clicks ignored
• Prevents double-counting

Every Click

For some use cases:

• Track engagement depth
• Multiple valid actions
• Count repeated interest

Once Per User

For lifetime goals:

• First-ever click counts
• Returning users won't re-trigger
• Best for one-time actions

Dynamic Elements

Elements Added After Page Load

For dynamically loaded content:

• Zenovay handles automatically
• Uses event delegation
• Works with most frameworks

React/Vue/Angular

Click tracking works with:

• React components
• Vue templates
• Angular components
• Web components

Testing Dynamic Elements

1. Load page
2. Wait for element to appear
3. Click element
4. Verify goal fires

Troubleshooting

Clicks Not Tracking

Check selector:

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

Check page scope:

• Is goal limited to specific pages?
• Are you on the right page?

Check element visibility:

• Is element visible when clicked?
• Not hidden or covered?

Wrong Elements Matching

Make selector more specific:

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

Delayed Load Elements

If element loads after page:

• Most cases work automatically
• Test thoroughly
• Consider custom event if issues persist

Best Practices

Plan Your Selectors

Before implementing:

1. Identify key CTAs
2. Ensure unique identifiers
3. Document selectors
4. Test across pages

Work with Developers

Request:

• Unique IDs on key CTAs
• Data attributes for tracking
• Consistent naming conventions

Test Thoroughly

1. Click element yourself
2. Check real-time view
3. Verify goal recorded
4. Test on mobile too

Next Steps

• Custom Event Goals
• URL Match Goals
• Build funnels