Element Labels (data-heatmap-id)

By default, heatmaps identify elements by their tag name, role, and position in the page. This works well for most cases but can produce generic labels for repeated elements.

Add data-heatmap-id to give important elements a stable, human-readable label:

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

<a href="/pricing" data-heatmap-id="nav-pricing">Pricing</a>

These labels appear in hotspot drilldowns and CSV exports. No element text is captured — only the label you provide.

When to Use It

• Key CTAs — signup buttons, checkout buttons, primary conversion points
• Repeated elements — "Add to Cart" buttons in a product list where position alone is ambiguous
• Dynamic elements — buttons whose text or position changes (A/B test variants, personalized content)

Naming Tips

• Use descriptive names: signup-cta not btn1
• Use consistent prefixes for related elements: nav-pricing, nav-features, nav-about
• Don't include PII or sensitive data in the label

Suppressing Dead Clicks

If an element legitimately receives clicks but isn't interactive (for example, a decorative image users click through), suppress dead click detection with:

<div data-heatmap-ignore-dead-click="true">
  <!-- No $dead_click events for this element or its children -->
</div>