From Friday July 1, 2022 we're moving accounts that were created before April 20, 2022 to our updated pricing model.
Under the updated pricing model, we've grouped Surveys and Feedback into a separate product called Ask that’s priced based on the number of responses you want to collect across Surveys and Feedback. Heatmaps and Recordings will be grouped into a separate product called Observe and will still be priced based on the number of daily sessions.
Both products, Observe and Ask, will have the Basic (free), Plus, Business, and Scale plans available, and the selected plan can be different for each product.
See the Updating our pricing model blog post for all the details on this update.
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'll need to get that set up first. Use Google's Setup and install Tag Manager article to learn how.
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. The Hotjar Tracking Code can be installed via GTM using the:
You can also use GTM to Send Events to Hotjar and Set User Attributes
After installing Hotjar, you can also use GTM to send Events and User Attributes. Learn more in our articles How to Set Up User Attributes and How to send Events to Hotjar with Google Tag Manager
Hotjar + GTM installation integration
As soon as you have created the Site in Hotjar, you will be presented with the first step if Hotjar has auto-detected your site has a GTM container. If you do not see the first step, choose the GTM installation.
Visit your Sites page and click on Install tracking code.
Click on Start setup within the Install with Google Tag Manager box (shown if GTM is installed on your site).
Select the Google account that has the GTM container you want to publish Hotjar into.
Seeing some slightly different screens?
Google controls all of the steps that involve logging into GTM and granting permission to Hotjar. The exact flow and page appearance may change, but the steps should not change much.
Select all the access permissions for Hotjar and click Continue.
Select your GTM account and your GTM tag container, then click Create and Publish Tag.
Make sure you pick the GTM Container that is installed on your site
Hotjar will tell you here if you do not have any containers in this Google account. If you do not, follow the instructions in the official Google documentation.
Click Confirm and Create.
Wait a few minutes for Google to respond, then click Verify Installation.
Follow the Verify Installation prompt.
You should see a message confirming the installation. If you do not, check our guide to verifying Hotjar is installed. Feel free to contact us if you need any help!
Hotjar Tracking Code tag in GTM
As soon as you have created the Site in Hotjar, you will be presented with the first step if Hotjar has auto-detected your site has a GTM container. If you do not see the first step, use the following method of installation from inside Google Tag Manager.
From your GTM dashboard, 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 into Hotjar: http://insights.hotjar.com/sites/**[SITE_ID]**/overview.
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 tag in GTM
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 View 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.
Once Your Tracking Code is Installed
You can start using any of the Hotjar tools: Heatmaps, Recordings, Surveys, and Feedback. Have a look at the guides below to get started.
Next Steps
- Add Team Members to your Organization.
- Add Sites to your Organization.
- Understand the difference between Accounts, Organizations, and Sites.