Setting up your Heatmap Script on a Headless Shopify Website will be slightly different than a traditional Shopify store. To fully enable heatmap functionality on your Headless Shopify store, you'll need to install a few scripts to properly track all customer interactions and revenue data.
What Changes for Headless Sites?
Tracking Code Snippet - You'll still use the same Heatmap Tracking snippet; however, instead of relying on Shopify to inject the snippet, you'll need to add it directly into your website's global head section.
Conversion Code Revenue Snippet - If you are using Shopify Checkout, you can still install the Heatmap Revenue Snippet through Settings > Customer Events, as shown in this guide.
Important: If your store uses a fully custom checkout (not Shopify Checkout), please contact our customer support at support@heatmap.com so we can provide you with a customized base revenue snippet code.
Accessing your Heatmap Tracking Code Snippet & Heatmap Conversion Code Snippets:
In order to access your code snippets, you can follow these steps:
Go to the Settings tab within your portal.
Click "Snippet"
Here you will see two codes available to copy
theme.liquid file is the Heatmap Tracking Code Snippet for Sessions
Pixel is the revenue Heatmap Conversion Code Snippet
Installing your Heatmap Tracking Code Snippet & Heatmap Conversion Code Snippets:
It's very simple to install the Heatmap Tracking Code Snippet & Heatmap Conversion Code Snippets on your Headless Shopify store.
Installing the Heatmap Tracking Code Snippet
The Heatmap Tracking Code Snippet is what tracks the user interactions on your website. Typically, this script would be installed in the global header of your Shopify theme; however, with a Headless Shopify site, you will need to install this script on every single page of your website. It's usually placed inside the <head> section of each page, and enables basic tracking and heatmap generation.
To ensure the successful installation of your heatmap tracking code snippet, please follow these steps:
Log in to your Shopify admin panel
Go to "Online Store" > "Themes"
Click "Actions" > "Edit code" for your current theme
Copy and paste the heatmap tracking code snippet within the <head> section of each page of your website.
⚠️ Important! Please note heatmap's snippet must be the first snippet at the top of your header for maximum data accuracy.
If you have other snippets above, this may reduce accuracy of data collection.
Click "Save" on the top right corner of your theme file.
Installing the Heatmap Conversion Code Snippet Pixel
The Heatmap Conversion Code Snippet ties user interactions to revenue for every session. These instructions will only work with a Shopify Checkout. If you are using a Custom Checkout, please contact support@heatmap.com.
Follow these step-by-step instructions to ensure proper installation:
In your Shopify admin, click "Settings" in the bottom left corner
Select "Customer Events" from the left side menu
Click "Add Custom Pixel"
Name the pixel "heatmap-revenue"
Remove the copy included by default in the text area.
Copy and paste the pixel code provided in Heatmap for the Heatmap Conversion Code Snippet.
Click the "Save" button in the top right corner
Activate the pixel by clicking "Connect"
Snippet Installation Verification
After installation and official verification on the heatmap platform, wait about 12 hours for data to start appearing in your heatmap dashboard.
To verify your snippet:
Log in to your Heatmap.com account and go to the Settings tab within your portal.
Click "Snippet"
Click the "Verify My Snippet" button in the bottom right corner.
You'll receive a pop-up validating if the snippet was installed correctly. If you don't see any data after 24 hours or believe there is a data collection issue, double-check that both snippets are correctly installed.
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.