While we recommend adding the heatmap code snippets directly to your website, some website owners prefer tag managers such as Google Tag Manager (GTM). This guide will walk you through the process of installing Heatmap.com using GTM.
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:
The Heatmap Tracking Code Snippet for tracking sessions
The Heatmap Conversion Code Snippet for tracking revenue
For purposes of this guide, we will use Shopify snippets as an installation example.
Installing your Heatmap Tracking Code Snippet & Heatmap Conversion Code Snippets
Installing the theme.liquid Heatmap Tracking Code Snippet
1. Access Google Tag Manager
Log in to your Google Tag Manager account
Select the container for the website where you want to install Heatmap.com
2. Create a New Tag
Click on "Tags" in the left sidebar
Click the "New" button to create a new tag
3. Configure the Tag
Name your tag (e.g., "Heatmap.com Tracking")
Click on "Tag Configuration"
Choose "Custom HTML" as the tag type
4. Add Heatmap.com theme.liquid file Tracking Code
In the HTML field, copy & paste your theme.liquid file Heatmap Tracking Code Snippet from your heatmap Account.
5. Set Trigger
Click on "Triggering"
Select "All Pages" to have Heatmap.com track all pages on your site
If you want to limit tracking to specific pages, create a custom trigger
6. Save and Submit
Click "Save" to save your new tag
Click "Submit" to push your changes live
7. Publish Your Changes
Review your changes
Click "Publish" to make your tag live on your website
Installing the Heatmap Conversion Code Snippet Pixel
We want to inject the Heatmap Conversion Code Snippets (not the theme.liquid Heatmap Tracking Code Snippet) only when an event is triggered. Below are the steps to have this done in GTM
Step 1: Get Your Site ID
Log in to your Heatmap dashboard.
Go to Settings → Snippet.
Scroll down to the Conversion Code Snippet section.
In the auto-generated code, look for the number passed into
initializePixel(XXXX), which will give you your Site ID.
Example: initializePixel(4309) → your Site ID is 4309.
Copy this number, you’ll need it for the snippet below.
Step 2: Set Up a Custom Trigger
Go to “Triggers” in GTM and click on “New”
Select “Custom Event” as the trigger type.
Name the event as “Purchases” or “orderCompleted” to match your platform's purchase event.
Set the condition so that the event is triggered only when the event name equals Purchase.
Save the trigger with the name “Purchase Trigger.”
Step 3: Create a Custom Tag
Go to “Tags” in GTM and create a “New Tag.”
Name this tag something descriptive, like “Heatmap Conversion Code Snippet”.
Under Tag Configuration, select Custom HTML and paste the code below, replacing [YOUR HEATMAP SITE ID] with your Site ID from Step 1.
<script>
function heatmapLoadConversionSnippet(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false;
script.defer = true;
document.head.appendChild(script);
}
heatmapLoadConversionSnippet(
`https://dashboard.heatmap.com/conversions.js?siteId=[YOUR HEATMAP SITE ID]&dataLayer=populate`
);
</script>
Set the trigger for this tag to the Purchase Trigger created in Step 2.
Save the tag configuration.
Step 4: Publish the GTM Container
Review your setup and go to “Submit” in GTM to publish the changes.
Name the version something relevant, like “Heatmap Conversion Code Snippet”
Click “Publish.”
Snippet Installation Verification
To ensure your snippets were correctly installed via GTM, we recommend the following steps:
Visit your website, interact with it as a user would, and complete a test purchase.
Open "GTM Preview Mode" to confirm that the Purchase Trigger correctly fires the custom tag after a purchase.
Verify your snippet in the Heatmap Portal after confirmation in GTM. You should be able to see data populate after about 12 hours of data. 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.
Troubleshooting
Common issues:
Data not appearing: Ensure your GTM container is properly installed on your website
Partial data: Check if your trigger is correctly set to fire on all desired pages
Best Practices
Use Google Tag Manager's preview mode to test your tag before publishing
If you have multiple domains, create separate tags for each in GTM
Regularly check your GTM setup to ensure all tags are firing correctly
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.