How to track button clicks using Zoho PageSense Step-by-step guide to creating Element Click goals How to use CSS selectors in PageSense How to track CTA clicks on dynamic websites

Element Click Goal

What is an Element click?

An Element Click Goal allows you to track when a visitor clicks on a specific element on your website, such as a button, image, CTA, banner, tab or interactive component. Every time a visitor clicks the defined element, PageSense records it as a conversion. Even if the same visitor clicks the element multiple times, it is counted as one conversion per visitor, ensuring accurate and non-inflated reporting. This goal type is ideal when the action you want to measure is based on interaction - not necessarily navigation to another page.

When are Element Click Goals most effective ?

  1. You want to track clicks on a button (eg. Sign up, Add to cart etc.,)
  2. The click does not redirect to a unique confirmation page.
  3. You are running an A/B test on a CTA.
  4. The same CTA appears across multiple sections and you want combined tracking.
  5. You want to measure engagement before the final conversion

Goals Dashboard Overview

When you open the Goals tab under the Track module, you’ll see a complete overview of all the goals created for your project. This view helps you quickly understand goal performance and manage tracking efficiently.
Here’s what each section shows:

  • Goal Name
    Displays the name of each goal, making it easy to identify what action is being tracked.

  • Status
    Indicates whether the goal is currently running or inactive.

  • Visitors
    Shows the number of visitors who were eligible for the goal during the selected time period.

  • Conversions
    Displays how many visitors successfully completed the goal action.

  • Average Conversion Time
    Represents the average time taken by visitors to complete the goal after landing on the page.

  • Created Date
    Helps you track when the goal was set up, useful for audits and performance comparisons.

  • Sorting and Filters
    Allows you to sort goals by name, visitors, conversions, average conversion time, or recently created goals for quicker analysis.

How to Setup an Element Click Goal?

Step 1: Click New Goal
  1. In the Track module, click New Goal to start creating a goal.

  1. This opens the goal configuration setup where you can choose the goal type and define tracking conditions.
 

Step 2: Choose Element Click as the Goal Type
  1. Enter a clear and descriptive name for your goal so it can be easily identified in reports.
    Example:CTA Element click

  • From the list of available goal types, select Element Click


  • Click Next to proceed.



Step 3: Define Pages to Track

  1. In this step, you define where the selected element exists and where tracking should be active.

  1. PageSense offers an Advanced option that gives you greater control over where your goal should run. Within this Advanced section, you can choose from 8 different URL match types, allowing you to precisely define which pages should be included or excluded from tracking based on your website structure.
Below is a clear explanation of each:

 URL Match Type
When to use
Example
What it tracks
Simple URL
When tracking a single static page
https://zylkerautomation.zohoecommerce.com/services
Only that specific page 
Exact URL
When the URL must match exactly
https://zylkerautomation.zohoecommerce.com/pricing
Tracks only the exact URL entered
URL contains
When tracking multiple related options
https://zylkerautomation.zohoecommerce.com/product
Tracks all URLs containing “/product”
Starts with
When tracking a section or a folder
https://zylkerautomation.zohoecommerce.com/blog/
Tracks all blog pages
Ends with
When tracking pages with a common ending
https://zylkerautomation.zohoecommerce.com/thank-you
Tracks any URL ending in ''thank-you''
Matches with
For flexible partial matchinghttps://zylkerautomation.zohocommerce.com/offer
Tracks URL matching similar patterns
Regex
For dynamic or complex URL structures
https://zylkerautomation.zohoecommerce.com/product/[0-9]+
Tracks product pages with numeric IDs
Page GroupsWhen tracking a predefined group of URLsZylker – Marketing Campaign Pages
Tracks all URLs inside the defined group

How to Configure:

  • Select the appropriate match type based on your requirement.

  • Enter the corresponding URL value.

  • Add multiple conditions if the element appears across different sections.

Choose the match type carefully to avoid over-tracking or missing valid conversions.



Step 4: Add Pages Not to Track (Optional)

  • If the same element appears globally (for example, in the header or footer), but should not count as a conversion on certain pages, use the Pages Not to Track option. 

  • Apply the same URL match types to define exclusion rules.

  • This prevents inflated or misleading conversion data.


Step 5: Select the Element to Track

Here, you define the exact HTML element whose clicks should be recorded as conversions.


There are two methods to select the element:

Option 1: Use the Visual Element Selector 

The Visual Element Selector allows you to select elements directly from the page without technical knowledge.


How It Works:

  1. Enter a Preview URL.

  2. The page loads inside PageSense.

  3. Hover over elements to highlight them.

  4. Click the element you want to track.

  5. PageSense automatically generates the appropriate selector.

Why This Is Recommended:

  • Reduces human error.

  • Automatically creates optimized selectors.

  • Works well for non-technical users.

  • Saves setup time.

Option 2: Enter the Selector Manually

You can manually enter a CSS selector if you know the element’s structure.

What is a CSS Selector?

A CSS selector identifies a specific element on a webpage using:

  • ID Selector → #signup-button
    (Most reliable because IDs are unique)

  • Class Selector → .cta-button
    (Used when multiple elements share styling)

  • Combination Selector → .hero-section .start-trial
    (Targets a specific element inside a section)

  • Attribute Selector → button[data-action="signup"]
    (Targets based on custom attributes)


Best Practices for Manual Selection:

  • Prefer ID selectors whenever available.

  • Avoid very generic class names like .button or .primary.

  • Ensure the selector uniquely identifies only the intended element.

Incorrect or overly broad selectors may result in:

  • Tracking unintended elements

  • Inflated conversion counts

  • Inaccurate reporting

After selection, always review the generated selector before proceeding.


Step 6(a): Use Chrome Extension

If your website loads content dynamically without a full page refresh - especially beyond login pages - the standard preview mode may not capture elements accurately. In that case, Chrome extension would be recommended.


Why the Chrome Extension Is Needed

Dynamic websites:

  • Load elements asynchronously.

  • Change page states without URL reload.

  • Render content after API calls.

In such cases, selectors may fail if captured too early.

When You Should Use the Extension

  • The element appears only after clicking another button.

  • The page does not reload on navigation.

  • The selector changes dynamically.

  • You are unable to select the element in preview mode.

The Chrome Extension ensures accurate selector capture for complex or dynamic page structures.




Step 6(b): Using Interact Mode


Interact Mode allows you to:

  • Click buttons

  • Open dropdowns

  • Trigger popups

  • Navigate between sections

  • Interact with dynamic content

This ensures that the element is selected in its actual interaction state.



Step 7: Review and Launch


Before launching:

  • Double-check page targeting rules.

  • Confirm that exclusions are correctly set.

  • Ensure the selector uniquely identifies the correct element.

Once everything is verified, click Launch.

PageSense will begin tracking clicks immediately after activation.



 



We’ve designed this documentation to guide you every step of the way. If you need further assistance or have any questions, don’t hesitate to contact us at support@zohopagesense.com - we’re always here to help!