UI Zones
UI zones are specific elements on your website that you want to track. Clickyard analyzes how users interact with these zones and correlates that behavior with conversions.
What Are UI Zones?
UI zones are elements on your page that you mark for tracking. For each zone, Clickyard tracks:
How long the element was visible in the viewport
How long the user hovered over the element
Number of clicks on the element
Form interactions within the element
This data helps Clickyard understand which elements influence buying decisions and which might be distracting users.
What Elements to Mark?
Focus on elements that could influence a visitor's decision to convert:
Good elements to track:
- • Call-to-action buttons — "Buy Now", "Sign Up", "Add to Cart"
- • Product images — Main image, gallery, zoom
- • Pricing sections — Price display, discount badges
- • Trust indicators — Reviews, testimonials, security badges
- • Navigation elements — Key menu items, search bar
- • Forms — Contact forms, signup forms, checkout fields
- • Promotional banners — Special offers, limited time deals
Less useful to track:
- • Footer links (usually not conversion-related)
- • Cookie consent banners
- • Generic page headers
- • Social media share buttons
How to Mark Zones
1 Open Editor Mode
Go to your Clickyard dashboard, find your website, and click the "Mark zones" button.
This will open your website with the Clickyard editor overlay. You'll see a panel on the side of your screen.
2 Click on Elements
Click on any element you want to track. A dialog will appear asking you to name the zone.
Tip: Use descriptive names like "Add to Cart Button", "Main Product Image", or "Customer Reviews Section". This makes reports easier to understand.
3 Name the Zone
Enter a descriptive name for the zone and click "Save".
Naming examples:
4 Mark Multiple Pages
Navigate to different pages on your site and mark important elements on each one. Clickyard tracks all marked zones across your entire website.
You can mark zones on your homepage, product pages, landing pages, checkout page, etc.
5 Exit Editor Mode
When you're done, simply close the browser tab or navigate away. All your marked zones are automatically saved.
Done! Clickyard will now track interactions with your marked zones. You can see the number of marked zones in your dashboard.
Managing Zones
Viewing Marked Zones
In Editor Mode, the side panel shows all zones you've marked. Click on any zone in the list to highlight it on the page.
Editing Zone Names
Click on a zone in the list and select "Edit" to change its name. Use clear, descriptive names for better report readability.
Deleting Zones
Click on a zone in the list and select "Delete" to remove it. Note: Historical data for deleted zones will be retained in existing reports.
Best Practices
Start with 5-10 key zones
Focus on the most important elements first. You can always add more later based on initial insights.
Mark elements at the right level
If you want to track a button, click on the button itself, not the entire section containing it. Be specific.
Cover the conversion funnel
Mark zones on each step of your user journey — from landing page to checkout. This helps identify where users drop off.
Use consistent naming
Adopt a naming convention like "[Page] - [Element]" (e.g., "Home - Hero CTA", "Product - Add to Cart").
Troubleshooting
Can't select an element?
Some elements might be inside iframes or have special event handlers. Try clicking on the parent container instead.
Zone not showing in reports?
Make sure you have enough sessions where users interacted with that zone. Zones with zero interactions won't appear in reports.
Editor panel not appearing?
Try disabling ad blockers or check if the Clickyard script is loading correctly. See Troubleshooting.