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
Open Developer Tools in your browser.
Inspect key elements like product tiles and navigation bars.
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
Audit Current Setup: Identify missing IDs.
Plan ID Structure: Define naming conventions.
Update Code: Add IDs in templates and test.
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.