How to implement heatmap tools like Hotjar with Google Tag Manager

Author:

Implementing heatmap tools such as Hotjar using Google Tag Manager (GTM) allows you to collect user behavior data like clicks, taps, and scrolls without altering your website’s code manually. Here’s how to set up Hotjar with GTM:

Step 1: Create a Hotjar Account and Set Up Your Site

  1. Sign up for a free or paid Hotjar account.
  2. Add your site to Hotjar by creating a new site entry within your account.
  3. Hotjar will provide you with a tracking code snippet unique to your site. You’ll use this code in GTM to deploy Hotjar.

Step 2: Create a New Tag in Google Tag Manager

  1. Log in to your GTM account and select the container for the website where you want to install Hotjar.
  2. Go to Tags and click on New.
  3. Name your tag (e.g., “Hotjar Tracking Code”).
  4. Click on Tag Configuration and choose Custom HTML.

Step 3: Add the Hotjar Tracking Code

  1. Copy the Hotjar tracking code provided in your Hotjar account.
  2. Paste the code into the Custom HTML tag in GTM.
  3. Make sure the code snippet looks something like this:
    html
    <script>
    (function(h, o, t, j, a, r) {
    h.hj = h.hj || function() { (h.hj.q = h.hj.q || []).push(arguments) };
    h._hjSettings = { hjid: YOUR_HOTJAR_ID, hjsv: 6 };
    a = o.getElementsByTagName('head')[0];
    r = o.createElement('script'); r.async = 1;
    r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
    a.appendChild(r);
    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
    </script>

    Replace YOUR_HOTJAR_ID with your actual Hotjar site ID.

Step 4: Configure the Trigger

  1. Click on Triggering and choose the trigger that will fire the tag.
  2. Select All Pages if you want Hotjar to track all pages on your site. This is the standard setup for comprehensive tracking.
  3. Click Save.

Step 5: Preview and Test the Setup

  1. Click Preview in GTM to test the configuration.
  2. Navigate to your site with the GTM preview mode enabled.
  3. Use Hotjar’s dashboard to verify that the tracking code is installed correctly:
    • Go to Hotjar > Sites & Organizations > Tracking Status.
    • Check for the status indicator showing that Hotjar is receiving data from your site.

Step 6: Publish the Tag in GTM

  1. Once you confirm that the tag is firing correctly in preview mode, go back to GTM.
  2. Click Submit and publish the container.
  3. Add a version name and description to document the change.

Step 7: Verify Data Collection in Hotjar

  1. Log in to your Hotjar account and check that data (e.g., heatmaps, session recordings, or feedback) is being collected:
    • Go to Heatmaps or Recordings.
    • Start analyzing user interactions to see how visitors engage with your content.

Tips for Using Hotjar Effectively

  • Page Targeting: Use Hotjar’s heatmap tools to create specific heatmaps for important pages, like landing pages or checkout flows.
  • Adjust Sample Rate: If you have a high-traffic website, you might want to adjust the sample rate in Hotjar’s settings to manage data volume.
  • Privacy and Compliance: Ensure your Hotjar implementation is compliant with data protection regulations (e.g., GDPR). Inform visitors about data collection through your privacy policy and provide options for opting out.

Advanced Implementation

  • Custom Triggers: If you only want to fire the Hotjar tracking code on specific pages (e.g., product pages), create a Page View trigger with URL conditions in GTM.
  • Multiple Heatmaps: You can set up different heatmaps in Hotjar for various pages to analyze different segments of your site.
  • User Segmentation: Combine Hotjar with Google Analytics to understand user behavior in different segments by tagging Hotjar recordings with user properties set in GTM.

Troubleshooting Tips

  • Tag Fails to Load: Ensure that your site ID is correctly inserted into the Hotjar script in GTM.
  • Data Not Displaying: Verify that your site is accessible and that no JavaScript errors are blocking the script from running. Check your browser’s console for any issues.
  • Debug Mode: Use GTM’s debug mode and Chrome’s developer tools to confirm that the script is loading and running without errors.

By following these steps, you can successfully deploy Hotjar on your website using GTM, enabling you to gather valuable insights into user behavior and improve your site’s user experience.

Categories: Digital Marketing