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:
1. Go to the Heatmap membership area
2. Click "All Websites"
3. Find your site in the list and click "View Snippet"
4. A modal will open containing both the Heatmap Tracking Code Snippet and Heatmap Conversion Code Snippet.
Image showing where to access the Shopify Snippets on your Heatmap account
Important Note for Third-Party Page Builders
If your Shopify store uses third-party page builders such as Replo, Gempages, Zipify, Webflow, Pagedeck or other builders outside of core Shopify pages, you'll need to add the tracking snippet to all pages created with those tools. Consult your page builder's documentation for instructions on adding tracking code code.
Step-by-Step Installation Guide
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
Image showing creating a new tag in GTM
3. Configure the Tag
Name your tag (e.g., "Heatmap.com Tracking")
Click on "Tag Configuration"
Choose "Custom HTML" as the tag type
Image showing Selecting Custom HTML under ‘Tag Configuration"
4. Add Heatmap.com Tracking Code
In the HTML field, paste your Heatmap Tracking Code Snippet from your heatmap Account.
Image showing getting the Heatmap Tracking Code Snippet from your Heatmap Account, pasting in the Custom HTML field
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
Image showing how to access the ‘Add Trigger’ button and select ‘All Pages’
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
Image showing Publishing the configuration
Installation of the Heatmap Conversion Code Snippet on GTM
We want to inject the Heatmap Conversion Code Snippets (not the Heatmap Tracking Code Snippet) only when an event is triggered. Below are the steps to have this done in GTM
Step 1: Set Up a Custom Trigger
Go to “Triggers” in GTM and click on “New”
Select “Custom Events” as the trigger type.
Name the event as “Purchases” or “PurchaseEvents.”
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 2: Create a Custom Tag
Go to “Tags” in GTM and create a “New Tag.”
Name this tag something descriptive, like “Heatmap Conversion Code Snippet”.
Copy and paste your conversion/revenue tracking code snippet into the tag configuration.
Set the trigger for this tag to the Purchase Trigger created in Step 1.
Save the tag configuration.
Step 3: 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.”
Step 4: Verifying Installation
To ensure Heatmap.com is installed correctly:
Visit your website and perform some actions and complete a test purchase.
Check the “GTM Preview Mode” to confirm that the Purchase Trigger fires the custom tag correctly after a purchase.
Log in to your Heatmap.com dashboard after 12 - 24 hours of publishing your changes to verify seeing data populating on your dashboard.
If you don't see data within 24 hours, please contact our support team.
Troubleshooting
Common issues include:
- 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.