Install Hotjar using Google Tag Manager

If you’re interested in tracking website visitors and seeing that data as heat maps, then Hotjar is the right tool for it. The tool doesn’t only allow you to create heat maps but also lets you view things as scroll depth, create funnels, ask your visitor questions and more. To install Hotjar using the google tag manager is quite easy with the predefined tag or by using the custom HTML tag as well.

So what is Hotjar?

It’s very popular analytics and feedback tool used by many top-class tech and e-commerce companies.

Main features:

  • Analytics:
    • Record heatmaps (based on clicks, scroll, and mouse movement)
    • Record actual user sessions, see them on an individual level and see where they clicked, where they bounced, etc.
    • Track funnels
    • Track form engagement
  • Feedback:
    • Collect feedback
    • Run polls and surveys
    • Invite visitors to a live user test via screen sharing to see how they actually use your pages and what they are thinking.

How to Install Hotjar using Google Tag Manager as Custom HTML

  1. In your Hotjar Dashboard, click on the Tracking button in the top right corner.
  2. Click Copy to Clipboard.
  3. In Google Tag Manager, click on the Add a New Tag button.
  4. Click where it says Choose a tag type to begin setup
  5. Select Custom HTML from the list.
  6. Paste the code you previously copied from Hotjar into the text field.
  7. Click Choose a trigger to make this tag fire
  8. Click All Pages. (This is important – if you choose any other trigger, Hotjar won’t function correctly.)
  9. Name the tag and then click the Save button.
  10. Check in preview and debug mode if the created tag is firing. If the tag is firing correctly move to the next step.
  11. Submit your changes.

Make sure your live environment is selected and click Publish.

Once Your Tracking Code is Installed

You can start using any of Hotjar’s 8 features: Heatmaps, Recordings, Forms, Funnels, Polls, Surveys, and Incoming Feedback.

How to Install Hotjar using ready-made Hotjar Tag template

  1. In Google Tag Manager, click on the Add a New Tag button.
  2. Click where it says Choose a tag type to begin setup
  3. Select Hotjar Tracking Code from the list and paste the Site ID.

In the triggering section, choose All Pages.

Save the tag. Enable preview and debug mode, navigate to the website you’re working on and refresh the page.

After the Preview and Debug Console appears, click Page View event and check if Hotjar Tag fired.

Now go to another page of website and repeat the action. A Hotjar tag must fire on all pages, therefore, you should test it on at least 2-3 pages.

If everything is fine, publish the container, go back to Hotjar and click a green I have installed the tracking code button.

Hotjar will then verify the implementation.

Hotjar and Google Tag Manager: Final Words

It’s very popular analytics and feedback tool for digital marketers who want to analyze how visitors/users are browsing the website/app and converting or not.

Thanks to Google Tag Manager, it’s pretty easy to install Hotjar and track user behavior.