CP #54: A Love Letter to Unique Element IDs

Welcome to Conversion Party. This week, we’ve got…

• heatmap Update: Grouped heatmaps

• CRO Deep Dive: A love letter to unique element IDs

• Goings on: Ebooks and webinars and happy hours, oh my!

• Partner Spotlight: Zettler Digital

• CRO Hack: The Uncomfortable Truth About Beautiful Websites

Let’s ride.

HEATMAP UPDATE
🥁 Introducing… Grouped Heatmaps

Grouped heatmaps are a powerful new feature that combine user behavior data across multiple pages with similar layouts into a single visualization.

Instead of analyzing each product page (for example) individually, you can now see aggregate interaction patterns and revenue metrics across your entire product catalog.

This solves a critical challenge for ecommerce brands. While individual product pages might not receive enough traffic for statistically significant insights, grouped heatmaps pool this data together. This means you can finally understand how customers interact with your product pages as a whole, identify common friction points, and optimize your conversion paths with confidence.

Implementation Tips

• Start with default product and collection page groups, which are automatically created

• Use template-specific groups if you're on Shopify to analyze different page layouts separately

• Create custom groups for special categories or seasonal collections using URL patterns

• Ensure all pages in a group share identical layouts for accurate data aggregation

• Review your groups periodically to maintain data quality as your site evolves

With grouped heatmaps, you can make revenue-backed decisions based on robust data rather than assumptions, helping you create a more effective and profitable website.

This feature is currently in beta and will be released early 2025. Interested in checking it sooner? Tell us on X.

Agency looking to get a client access? Let Jacob know.

CRO DEEP DIVE
💌 A Love Letter to Unique Element IDs

When leveraging heatmap analytics to understand user behavior, one often-overlooked technical detail can make or break your insights: unique element IDs.

While this might sound like a developer's concern, understanding and implementing proper element tracking has profound implications for your optimization efforts.

Here’s why 👇️ 

Understanding the Challenge

Your website is a living, breathing organism.

It’s a dynamic, interactive environment, where content shifts and updates based on user behavior, device characteristics, and real-time data. This dynamism creates significant challenges for analytics tools, which need to reliably track and attribute user interactions.

Web analytics platforms (like heatmap!) rely on unique selectors to distinguish between elements on a page. When elements share the same class or lack unique attributes, user interactions can’t be accurately attributed.

This is especially critical for dynamic or repeating elements, such as:

Collections Page

• 🤔 Imagine: A product grid where each tile represents a unique product. Without unique IDs, clicks on different tiles might be lumped together, making it impossible to identify which products are engaging users the most.

• 🙏 The case for unique IDs: With unique IDs, clicks can be associated with specific products, enabling you to determine which items are performing well and which may need better placement or promotion.

Mobile Navigation

• 🤔 Imagine: A mobile navigation menu with multiple links with identical classes or structures. Without unique IDs, clicks and revenue might be attributed to the same menu item, even if users are clicking on different links.

• 🙏 The case for unique IDs: Assigning unique IDs to each menu item ensures accurate tracking of user behavior, helping you identify the most popular navigation paths and optimize the menu for better usability.

When elements on your website are uniquely identifiable, you unlock the ability to:

• Run Optimization Experiments: Unique IDs allow you to conduct A/B tests and other optimization experiments where data is associated with the specific item, not its position on the page.

• Analyze Item-Specific Data: By associating interactions with specific elements (e.g., a particular product or FAQ item), you gain granular insights that drive informed decisions.

• Improve User Experience: Understanding exactly how users interact with your website helps you refine its structure and content to better meet their needs.

Implementing Unique Element IDs

Let's dive into the nuts and bolts of implementing unique IDs in your HTML.

These practical examples demonstrate how to structure your markup to enable accurate tracking while maintaining clarity and scalability. The key is creating IDs that combine meaningful information about the element's purpose, identity, and context in a consistent, readable format.

For Product Listings

<article id="product-12345-pos-1" class="product-tile">
  <div id="product-12345-image" class="product-image">
  <div id="product-12345-quickview" class="quickview-button">
  <button id="product-12345-add-to-cart" class="add-to-cart">
</article>

• The product-12345-pos-1 ID combines three pieces of information: the element type (product), a unique identifier (12345, likely a SKU or product ID), and its position (pos-1)

• Each child element (image, quickview, add-to-cart button) maintains the product ID (12345) while specifying its function

• This structure allows you to track not just that someone clicked a quickview button, but specifically which product's quickview button was clicked

For Navigation

<nav>
  <a id="nav-category-mens" href="/mens">
  <div id="megamenu-mens-clothing" class="megamenu">
    <a id="submenu-mens-shirts" href="/mens/shirts">
</nav>

• The main navigation link uses nav-category- prefix to distinguish it from other links

• The megamenu container includes both the category (mens) and its type (clothing)

• Submenu items combine their hierarchy level (submenu) with specific category path (mens-shirts)

• This hierarchy lets you track the complete navigation path a user takes

For Dynamic Content

<div id="search-results-container">
  <div id="search-result-1-${productId}" class="result-item">
  <div id="search-result-2-${productId}" class="result-item">
</div>

• A container for all search results

• Individual result items that combine:

  • Their type (search-result)

  • Position in results (1, 2, etc.)

  • Dynamic product ID (${productId} would be replaced with actual IDs)

• This structure allows tracking of both position and specific product clicks in search results

***

The patterns shown above establish a foundation for reliable tracking across different page elements. While they may seem verbose at first, this explicit naming structure pays dividends when analyzing user behavior and debugging tracking issues.

Remember that these are starting points - you'll want to adapt these patterns to match your specific tracking needs while maintaining consistency across your site.

The extra effort in structured ID implementation translates directly into more accurate and actionable analytics data.

Best Practices for Implementing Unique IDs

1. Use Descriptive Naming Conventions

   • For product tiles: product-tile-[product-id]

   • For menu items: menu-item-[name-or-id]

   • For sliders: slider-item-[position-or-id]

   • For FAQ items: faq-item-[question-id]

2. Leverage Dynamic Attributes

   • If unique IDs are not feasible, consider using data-* attributes to provide context for tracking. For example, data-product-id="123".

3. Work with Your Development Team

   • Ensure your team understands the importance of unique IDs for analytics and implements them consistently across dynamic and repeating elements.

4. Test Your Implementation:

   • Use debug tools to verify that clicks and interactions are being tracked correctly for each unique element.

Measuring Success

By assigning unique IDs like product-tile-123 or product-tile-456 to each tile, you can more accurately track clicks (and revenue) and associate them with specific elements.

After implementing unique IDs, you should be able to:

• Generate element-specific click reports

• Track interaction patterns across similar elements

• Compare revenue between identical elements in different contexts

• Create segment-specific interaction maps

• Measure the impact of element positioning and variants

Remember, the goal isn't just to implement unique IDs - it's to create a foundation for meaningful analytics that drive actual business improvements.

This precision allows you to identify top-performing products, improve merchandising strategies, and experiment with different layouts to maximize conversions.

GOINGS ON
📺️ Not Nothin’

🚀 Knock out your revenue goals for 2025!

We're featured in Videowise's new eBook alongside top Shopify pros, sharing 40 proven strategies backed by real A/B tests.

This exclusive playbook brings together experiments and success stories from leading merchants and agencies who've cracked the code to higher sales. These battle-tested insights from 2024 are your roadmap to driving revenue and brand success in 2025.

🐳 The Whalies Are Back

Mark your calendars for February 12th in LA! The premier event for DTC and eCommerce professionals is here to celebrate the most innovative brands and leaders in the space.

With speakers like Jen Atkin, founder of OUAI, this event is packed with insights to help you refine your growth strategy, master data-driven decisions, and get inspired by industry trailblazers.

Don’t miss out on the opportunity to connect, learn, and level up your success!

Use code ‘Whalies30’ and get 30% off tickets until December 31st

🛒 The Ultimate Guided Selling Best Practices Guide

Who doesn't want to turn more browsers into shoppers? Product recommendation quizzes are helping DTC brands boost conversions, increase AOV, and grow subscriptions.

Our friends at Digioh just released a FREE Quiz Funnel Playbook for 2025, full of tips to help you create smarter, more profitable funnels.

Wanna work together? Email carina at heatmap dot com

PARTNER SPOTLIGHT
🤝 Zettler Digital

Zettler Digital is a performance marketing, retention, and website optimization agency dedicated to unlocking growth for eCommerce brands.

Their expertise spans email/SMS management, advertising, social media, CRO, custom design/development, and simplified theme setup projects.

What makes them stand out

Industry Expertise: They’ve supported 400+ brands across luxury, fashion, food, health & wellness, sports, and lifestyle categories - plus collaborations with world-class athletes.

Key Partnerships: Certified Shopify Plus Partners and Klaviyo Elite Partners.

Highlight Clients: Bleacher Report, Levain Bakery, Mariano Rivera, Promix Nutrition, Wu-Tang Clan, Shinola, Peter Luger Steak House, and more.

🎁 Special Offer

Zettler Digital is offering free 30-minute consultations to help you strategize and optimize your marketing or storefront.

👉️ Interested? Connect with founder Ben Zettler and the team here: zettlerdigital.com

Wanna be featured? Email carina at heatmap dot com

CRO HACK
💄 The Uncomfortable Truth About Beautiful Websites: Pretty ≠ Profitable