Google Tag Manager should be installed on your site before you follow this guide
If you don't have Google Tag Manager installed yet you can find out how in the Google Tag Manager support article about installing it.
This guide outlines how to add Hotjar via the official Google Tag Manager integration which is suitable for many common Hotjar setups, but it can also be added manually as a Custom HTML tag.
Google Tag Manager integration
Click Add a new tag.
Click the tag icon & select Hotjar Tracking Code from the list.
Enter your Hotjar Site ID into the text field.
To get your Hotjar Site ID, look at the URL of your browser while you're logged in to Hotjar: http://insights.hotjar.com/sites/**[SITE_ID]**/dashboard.
You can also navigate to your Sites & Organizations list from the Settings menu. From here you will see a listing of the Sites and Organizations you have access to, along with their IDs.
Set up a trigger to control Hotjar.
Once you click in the Triggering area, you can choose what pages the Tracking Code will appear on.
Select All Pages for the trigger.
Single Page Applications should only use the "Page View" trigger type
Google Tag Manager's state change triggers conflict with Hotjar's own system for detecting changes in single page applications. For more information, take a look at the Google Tag Manager article about the Page View trigger.
Save your workspace.
Click the Submit button on the upper right-hand side of the page.
Click on the Publish button to publish the tag.
Verify your installation within Hotjar.
Keep the Tracking Code in mind when making design changes
If after you install the Tracking Code, your website undergoes a major design change check to ensure your Tracking Code is still installed.
Custom HTML installation
In addition to installing Hotjar by using the handy “Hotjar Tracking Code” tag type, you can install our Tracking Code on GTM as a Custom HTML tag.
Go to your Sites list and click on the Tracking Code button for the Site you want to track.
Click Copy to Clipboard.
In Google Tag Manager, click on the Add a New Tag button.
Click where it says Choose a tag type to begin setup…
Select Custom HTML from the list.
Paste the code you previously copied from Hotjar into the text field.
Click Choose a trigger to make this tag fire...
Click All Pages.
This is important - if you choose any other trigger, Hotjar won’t function correctly.
Name the tag and then click the Save button.
Submit your changes.
Make sure your live environment is selected, and click Publish.
Continue onto the next step to make sure Google Tag Manager and Hotjar are working together properly.
Switching from the “Hotjar Tracking Code” tag type to the “Custom HTML” tag type
Go to your Sites list and click on the Tracking Code button for the Site you want to track.
Click Copy to Clipboard.
In Google Tag Manager, click on the Tags section.
Click on the tag you want to edit.
Click on the current Tag Type to change it.
Select Custom HTML from the list.
Paste the code you previously copied from Hotjar into the text field.
Click the Save button in the top right corner.
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 7 features: Heatmaps, Recordings, Forms, Funnels, Polls, Surveys, and Incoming Feedback. Have a look at the guides below to get started.
- Creating Your First Heatmap Report
- How to Start Recordings
- Creating Your First Form Report
- Creating Your First Funnel Report
- Creating Your First Poll
- Creating Your First Survey
- Starting to use Incoming Feedback
Managing Your Hotjar Account
- Add team members to your organization.
- Add sites to your organization.
- Understand the difference between Accounts, Organizations, and Sites.
- Use Hotjar for your clients.