Skip to main content
Zenovay
Pro Plan5 minutesBeginner

Element Click Goals

Track conversions when visitors click specific buttons, links, or elements - perfect for CTAs and outbound links. Explore goals setup and best practices.

goalsclicksbuttonsctatracking
Last updated:
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

Goals live on each website's dashboard, under the Journeys tab.

  1. Open the Journeys tab

    From your website's dashboard, open the Journeys tab and select the Goals subtab.

  2. Add a goal

    Click Add Goal, then choose Element Click as the goal type.

  3. Name the goal

    Give it a clear name, like "Sign-up button" or "Pricing CTA".

  4. Enter a CSS selector

    In the CSS selector field, enter the selector that identifies the element to track.

  5. Track value (optional)

    Turn on Track monetary value if you want to attach a revenue value to each completion.

  6. Create

    Click Create to save the goal.

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

SelectorMatches
#my-idElement with id="my-id"
.my-classElements with class="my-class"
buttonAll button elements
a.downloadLinks 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: Test in Console

  1. Open 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

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

BadProblem
buttonMatches all buttons
.btnToo common
aAll links
GoodWhy
#signup-ctaUnique ID
.cta-signupSpecific 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

GoalSelector
Main CTA#hero-cta
Secondary CTA.cta-secondary
Pricing CTA.pricing-cta
GoalSelector
Pricing linka[href="/pricing"]
Contact linknav a[href="/contact"]
Sign in.nav-signin

Downloads

GoalSelector
Any downloada[download]
PDF downloadsa[href$=".pdf"]
Specific filea[href="/files/guide.pdf"]
GoalSelector
External linksa[target="_blank"]
Affiliate linksa[href*="partner.com"]
Social links.social-links a

Advanced Selectors

Attribute Selectors

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

Combinators

PatternMatches
div buttonButton inside div
div > buttonDirect child button
button:first-childFirst 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"]

How Clicks Are Counted

A click goal completes once per visitor session. Zenovay records the first matching click in a session and ignores later clicks on the same element within that session, so a visitor who clicks twice counts as one conversion. The same visitor returning in a new session can complete the goal again.

If you want to track a specific click only on certain pages, scope it at the selector level by combining the click selector with a parent that only exists on those pages, or use a URL Match goal for page-based conversions.

Dynamic Elements

Elements Added After Page Load

Click tracking is attached at the document level, so it works for elements that appear after the initial page load, 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. Verify the goal fires

Troubleshooting

Clicks Not Tracking

Check the selector:

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

Check element visibility:

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

Wrong Elements Matching

Make the selector more specific:

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

Delayed Load Elements

If the element loads after the page:

  • Most cases work automatically
  • Test thoroughly
  • Consider a custom event goal 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 the element yourself
  2. Check the Live View
  3. Verify the goal recorded
  4. Test on mobile too

Next Steps

Related articles

  1. Creating Your First Goal

    Set up conversion goals in Zenovay to track important user actions - signups, purchases, downloads, and more. Learn about goals in this goals and funnels guide.

  2. Goal Types Explained

    Understand the different goal types in Zenovay - URL match, element click, and custom event.

  3. Custom Event Goals

    Track conversions with custom JavaScript events - form submissions, video plays, AJAX actions, and complex interactions.

Was this article helpful?