Skip to main content
All CollectionsInstallation
The Role of Unique IDs in Heatmap Analytics
The Role of Unique IDs in Heatmap Analytics
C
Written by Carina Munro
Updated over a month ago

To ensure accurate tracking and optimization with Heatmap.com, all key elements on your website should have Persistent Unique Identifiers (Unique IDs). Unique IDs help maintain data integrity by ensuring elements remain identifiable, even after site updates.

Why Unique IDs Are Essential

Beyond tracking, Unique IDs improve website accessibility, enable precise JavaScript interactions, facilitate automated testing, and enhance third-party tool integrations.

They also help SEO tools understand page structure and support performance monitoring systems in tracking element-level engagement.

Heatmap.com & Tracking Benefits

Heatmap.com is a Continuous Tracking Platform, meaning it automatically tracks changes without requiring manual updates. In contrast, other heatmapping tools use Experiment-Based Tracking, requiring manual intervention after updates. Unique IDs ensure Heatmap.com maintains consistent and reliable data tracking without interruptions.

CMS Considerations

Platforms like Shopify do not provide Unique IDs by default. Implementing them typically requires a one-time setup within your templates. Establishing a Standard Operating Procedure (SOP) for maintaining Unique IDs during theme updates ensures continued tracking accuracy.

Alternative to Using ID Attributes

In some cases, clients may not be able to use the id attribute. This can happen due to page builder limitations, conflicts with existing ID usage, or other structural constraints.

As an alternative, Heatmap.com supports the use of the data-heatmap-id attribute to assign a unique identifier to elements.

Example Usage:

<div data-heatmap-id="bestseller-product-1">

<div data-heatmap-id="summer-collection-slide">

<div data-heatmap-id="featured-bike-trike">

The data-heatmap-id attribute functions similarly to an id, ensuring Heatmap.com can track elements accurately, even in environments where direct ID usage is restricted.


Ensuring Reliable Data & Long-Term Analytics

Key Benefits of Unique IDs

  • Data Accuracy: Tracks user interactions and preserves analytics across site changes.
    ​

  • Seamless Integration: Ensures compatibility with heatmaps, A/B testing, and other analytics platforms.
    ​

  • Future-Proofing: Maintains historical data for long-term analysis and performance tracking.

Consequences of Missing Unique IDs

  • Data ties to element positions instead of elements themselves.

  • Tracking and optimization recommendations become unreliable.

  • Historical insights may be lost after updates.


Identifying & Implementing Unique IDs

Checking for Unique IDs

  1. Open Developer Tools in your browser.

  2. Inspect key elements like product tiles and navigation bars.

  3. If no id="" attribute exists, the element lacks a Unique ID.

Common Elements that Require Unique IDs

Priority Elements

  • Product tiles

  • Collection slides

  • Navigation menus

  • Featured sections

  • Sliders & category elements

Best Practices for Naming IDs

  • Use descriptive, structured names.

  • Maintain consistency across elements.

  • Include meaningful identifiers.

Example:
​

<div id="bestseller-product-1">

<div id="summer-collection-slide">

<div id="featured-bike-trike">

Poor Practices for Naming IDs

  • Use of randomly generated numbers.

  • Overly generic names.

  • Duplicate IDs across elements.

Example:
​

<div id="slide-template-72891">

<div id="section1">

<div id="product">

Steps for ID Implementation

  1. Audit Current Setup: Identify missing IDs.

  2. Plan ID Structure: Define naming conventions.

  3. Update Code: Add IDs in templates and test.

  4. Verify & Maintain: Ensure consistency with site updates.


Key Moments to Check Unique IDs

  • During onboarding for initial tracking setup.

  • After theme updates or major layout changes.

  • Before repositioning critical elements.


Troubleshooting & Possible Solutions

Issue

Cause

Solution

Data loss after updates

Auto-generated IDs change

Implement permanent, meaningful IDs

Inconsistent tracking

Missing IDs on key elements

Systematically apply Unique IDs

Duplicate IDs

Copy-pasted elements

Use dynamic ID generation

Theme installation issues

New themes override IDs

Maintain an ID documentation checklist

For CMS platforms like Shopify, ensure IDs are implemented at the template level to avoid removal during updates.


Need Help?

If you have questions or run into any issues while using Heatmap, our support team is here to help. Contact us anytime at Support@heatmap.com.

Did this answer your question?