Dynamic Heatmaps FAQs

In this article:

Why can’t I see Dynamic Heatmap data on my embedded YouTube video?

YouTube videos, like other common embedded content like social media feeds or advertising plugins, are displayed in an inline frame (iFrame). An iFrame is an HTML document that’s placed within another HTML document.

Basically, it’s content (like a video) from a source (like YouTube) that is embedded into another source (like your website. Because the iFrame is typically hosted by a third party (e.g., YouTube) and not hosted directly on your website, tracking iFrames becomes an issue. It’s a blind spot that all conversion and analytics tools have due to the nature of iFrames. 

If you’re using an iFrame to embed a YouTube video or another element, you won’t be able to see data populate on it when looking at a Dynamic Heatmap. You’ll see the iFrame content on the page, but there will be no clicks, taps, moves or scroll data available. 

Click here to learn more about iFrames.


Can I see the moves Heatmap for mobile devices?

The moves Heatmap shows how a person moves around your website, including mouse movements and mouse hovering. Mobile visitors use your website differently than desktop visitors:

  • Instead of a mouse click, your mobile users will tap.
  • Instead of hovering over text with a mouse, they will generally use their fingers to scroll down the page.

As a result, the moves Heatmap isn’t available for mobile or tablet segments. Scroll heatmaps and click/tap heatmaps are available for all device segments, including mobile and tablet. 


How do I adjust the Dynamic Heatmap background?

By default, your Dynamic Heatmap will display the background overlay when opening up a Dynamic Heatmap. Here’s how to adjust the darkness of the background or remove the overlay completely. 

  1. Click on the Heatmap tab at the top of the Dynamic Heatmap
  2. On the right hand side of the screen, drag the opacity slider to adjust the brightness of the displayed data and reduce the darkness of the overlay
  3. Click the checked box next Show background to remove the background overlay altogether. This will completely remove the dark overlay without impacting the heatmap data

What does "improved performance" mean?

When you open a Dynamic Heatmap, you’re looking at a lot of data points. If you look at the bottom of the Dynamic Heatmap, you’ll see just how many data points are captured by Lucky Orange like this:

To generate your Dynamic Heatmap faster, especially with a large number of data points, we offer Improved performance. 

Improved performance is activated by default when you launch a Dynamic Heatmap.

However, this Improved performance feature doesn’t always play well with older computers including those that meet one of the following:

  • Limited RAM
  • Operating on Windows XP or earlier
  • Older PCs or Macs

If you meet one of these criteria, you will need to remove Improved performance. This won’t impact your Dynamic Heatmap and will only slow the population of data slightly. 

To remove Improved performance: 

  1. Click on the Heatmap tab at the top of the Dynamic Heatmap
  2. On the right side of the screen, select the checked box next to improved performance to deselect the option

How can I see a heatmap of more than one product page at a time?

If you want to analyze multiple product pages together, you'll need to modify the URL structure.

Follow these steps to modify your URL structure:

  1. Open a Dynamic Heatmap on your desired page
  2. Click Segments in the upper left corner
  3. Scroll past your segmentation filters
  4. Located below Options and the blue Save this segmentation button, you'll find the URL structure:
URL Structure in a Dynamic Heatmap
  1. Click your desired URL structure (host, path, query or fragment). Each part is illustrated in the graphic below.
URL Structure
  1. Change the matching type as needed:
    1. Matches exactly: This is best used for exact matches of URL structures. It is the default setting when the Dynamic Heatmap initially populates data.
    2. Contains: This is best used to search for part of a URL structure, such as a specific collection or UTM parameter
    3. Regular expression: This is best used with the wildcard (*) denotes a value in your links. See the example below for more information.
  2. Make sure the blue checkbox is shown next to Updates on RL change at the bottom of the Segmentation box. If not, click the checkbox to enable it.
  3. Click the green Update button to update your Dynamic Heatmap.

NOTE: The URL structure isn’t saved as part of segmentation, allowing for enhanced flexibility across all pages.

Examples of how to use URL structure changes

For our example, we'll look at how we can make different URL structure changes to example these four pages together:

  • www.mystore.com/products/shoes/view?id=ji3oafjs
  • www.mystore.com/products/shoes/view?id=jo42xfk&utm_source=facebook&utm_id=winterpromo#details
  • www.mystore.com/products/shoes/view?id=jm723sip&utm_source=facebook&utm_id=winterpromo#details
  • www.mystore.com/products/shoes/view?id=jm723sip&utm_source=facebook&utm_id=winterpromo#details

  1. To evaluate multiple product pages:
    1. Update Path to Match exactly with the query for products
Change URL structure by Path
  1. To evaluate shoe product pages:
    1. Updated Query to Regular expression with id=j*
Change URL Structure by Regular Expression
  1. To evaluate products featured on a specific source, in our example, Facebook
    1. Update Query to Contains with facebook


FAQ: How do I open a Dynamic Heatmap or Form Analytics of my Shopify Plus checkout?

Shopify Plus merchants who use Lucky Orange can access checkout page visitor behavior as outlined in this help doc. The Shopify Plus checkout page uses unique IDs for each visitor which prevents the checkout page from showing in the:

  • Top pages summary for Dynamic Heatmaps
  • Top form summary for From Analytics

Follow the instructions below to open the Shopify Plus checkout page in either Dynamic Heatmaps or Form Analytics.

  1. Click on Visitors from the left navigation.
  2. By default, Heatmaps will be selected. Select Form Analytics from the menu on the left to open Form Analytics.
  3. Click on the filters icon, located to the far right above the table.
  4. Select the dropdown by Visited Page.
  5. Type or scroll to /checkouts.
  6. This will show a list of all the checkout page instances because each one has a unique ID. Select any checkout-related page to Launch Heatmaps or checkout-related form to launch Form analytics.

The Dynamic Heatmap or Form Analytics will open to show the collective data for all of the interactions with the Shopify Plus checkout form. You can use Segmentation to further refine the data you're analyzing.

How do I use Historical View in a Dynamic Heatmap or Form Analytics?

If you've updated or redesigned your website or form and want to compare it to an older version you can use Historical View to compare the differences.

NOTE: Since Historical View is based on a version of the website that isn't currently live, interaction capabilities on elements may not be available.

To enable Historical View:

  1. Select a date range that corresponds to the previous page or form design. You will be limited to the data that is within your plan's data retention plan.
    1. From a Dynamic Heatmap or Form Analytics, click Segments in the upper left corner.
    2. Click Start Date to select the starting date.
    3. Click End Date to select the ending date. Pro tip: To refine it to one date, select the same End Date as Start Date.
  2. Click the checkbox next to Load historical view of this page.

You may need to refresh the page to update the website. Click the looped arrow in the footer of the Dynamic Heatmap or form Analytics to complete the refresh.