Updated 30th of July 2021.

This is the 4th time I write about tracking Hotjar User ID in Google Analytics using Google Tag Manager. Some people were complaining that the setup didn’t work (they were having issues with storing the Hotjar User ID in the Session Cookie. Because of this, in this last update, I have tried to simplify this by using a GTM Template for setting the cookie.

I have also deleted some comments that no longer are relevant.

Updated 14th of May 2019.

This is the 3rd time I write about tracking Hotjar User ID in Google Analytics using Google Tag Manager. Hotjar have had a history of changing how to access the User ID, and that is why this is the 3rd time I write about the subject.

The advantage of tracking the Hotjar User ID in Google Analytics, is that you now can use Google Analytics to identify behavior that Hotjar can help you answer.

The first thing you should do if you haven’t done it yet is to head over to Hotjar, and create an account.

Google Analytics setup

Head over to Google Analytics and create a Custom Dimension with Scope set to Session. The S: as I use in the Dimension name, simply means that this is a Dimension with the Scope set to Session.

Google Tag Manager Setup

We are going to create 4 Variables, 2 Tags and 1 Trigger.

We are also going to store the Hotjar User ID in a Session Cookie. For simplicity I’m using the Cookie Creator Template for setting the Session Cookie, and I use the Template as is. This means the Session Cookie name will use the default allowed template cookie name which is _my_cookie_name.

For setting a more useful cookie name, read the documentation of the template (for some reasons the template is made in a way that you have to alter the template to use your own cookie name).

Google Tag Manager Variables

No	Variable Name	Variable Type	Built in / Custom
1	Hotjar - timerEventNumber	Data Layer Variable	Custom
2	Hotjar - timerLimit	Custom Javascript	Custom
3	Hotjar - UserId - CJS	Custom Javascript	Custom
4	Hotjar - UserId - Cookie	1st Party Cookie	Custom

We need to create 4 different GTM Variables.

1. Getting the Hotjar userId from Hotjar
2. Getting the Hotjar User ID from the Session Cookie
3. Hotjar – timerEventNumber
4. Hotjar – timerLimit

The method we are going to use to trigger these tags are somewhat special, we are going to use Tag Sequencing with the Cookie Creator Tag.

If you aren’t familiar with Tag Sequencing, I recommend that you read Understanding Tag Sequencing In Google Tag Manager by Simo Ahava.

1. Getting the Hotjar userId from Hotjar

The Hotjar userId contains a value similar to this: 41d7c48b-8689-42dd-9a79-83690993f2ee. Create a Custom Javascript Variable, and add the code below. This code will grab the first part of the Hotjar userId (41d7c48b), which is the User ID you find in Hotjar. We will later save this ID to a Session Cookie.

Name the Variable Hotjar – UserId – CJS.

This code have been changed several times. I credit Alex Asigno (see comment field) for this version.

2. Getting the Hotjar User ID from the Session Cookie

Create a 1st Party Cookie Variable, and add _my_cookie_name as the Cookie Name (_my_cookie_name is the default allowed cookie name in the Cookie Creator Template). This variable will grab our modified Hotjar User ID that we have stored as a Session Cookie.

Name the Variable Hotjar UserId – Cookie.

3. Hotjar – timerEventNumber

This is a “nice to know” variable for our tracking. We are going to use a Timer trigger for our Hotjar User ID tracking, and the timerEventNumber will tell us how many times the Timer has to “ping” Hotjar before we get the Hotjar userId.

Create a Data Layer Variable, name the Variable for timerEventNumber. In the field Data Layer Variable Name, add gtm.timerEventNumber as the value.

4. Hotjar – timerLimit

A Timer Trigger can be limited. We are going to “ping” for the Hotjar ID up to 6 times. However, if the Hotjar UserId already exists in the hotjarId cookie, we will not run the trigger. This is done by setting the timerLimit to 0.

Create a Custom Javascript Variable, and add the code below, and call the variable for Hotjar – timerLimit.

Google Tag Manager Trigger

We need to create a Timer Trigger for our tracking. This Trigger will check if the Hotjar userId is avilable, it will store the modified Hotjar UserId from the variable Hotjar UserId to a Session Cookie, and then the ID will be tracked in Google Analytics.

Name the Trigger Hotjar – Timer.

Interval setting

This is the number of milliseconds between firing events. I have set the timer to check for the Hotjar userId every 2 seconds (2000 milliseconds).

Limit setting

This is the maximum number of times to fire the event. Insert the Hotjar – timerLimit Variable here.

Enable This trigger setting

This setting tells the Timer when it should be triggered. The condition checks if our modified Hotjar UserId is stored in the Session Cookie. If it exist, the Trigger will NOT be enabled.

Fire On setting

The setting is the same as above. If the Hotjar UserId is found in the Session Cookie, the Timer will not fire.

Google Tag Manager Tags

We need to create 2 different GTM Tags.

1. 1 Cookie Creator Tag for storing the Hotjar User ID to a Session Cookie.
2. 1 Google Analytics Tag for tracking the ID from the Session Cookie.

Tag 1: Google Analytics Event tracking of Hotjar User ID

This is the Tag that is going to track the Hotjar UserId to Google Analytics. Create a Google Analytics Event Tag with the Non-Interaction Hit set to True.

In the Label field, add the Variable {{Hotjar UserId – Cookie}}.

In the Value field, add the Variable {{Hotjar – timerEventNumber}}.

You should also add the Variable {{Hotjar UserId – Cookie}} as a Dimension to your Google Analytics Settings Variable. I have only added the dimension directly to this tag for demonstration purposes. Note that I also use a Variable for the Dimension Index Number.

Do NOT add any Triggers to the Tag. Our tag “Hotjar – Store UserId to Cookie” will trigger this tag as a Cleanup Tag. The screenshot below only shows how things will look when we are finished with our setup.

Tag 2: Hotjar – Store UserId to Cookie

Create a Cookie Creator Tag and name it Hotjar – Store UserId to Cookie.

• Install the Cookie Creator Template.
  • For further information about the template, read the documentation.
• Set up the Cookie Creator Tag and name it Hotjar – Store UserId to Cookie.
  • Cookie Name: _my_cookie_name
  • Cookie Value: {{Hotjar – userId – CJS}}
  • Trigger: Hotjar – Timer

The image shows settings for this Tag. As you can see we are using Tag Sequencing, and the Trigger is the previous made Hotjar – Timer Trigger. Here is the explanation of what’s going on:

• The Timer Trigger will every 2 seconds check if the variable Hotjar User ID contains a Hotjar userId, unless our modified User ID is already stored in a Session Cookie.
  • If Hotjar User ID is undefined, this tag fails and further sequences are aborted. Then new attempts will be done every 2 second until it has a userId, or 6 attempts have been done.
• If it’s not undefined, our modified Hotjar User ID is stored to a Session Cookie.
  • In addition, this will trigger our GA – Event – Hotjar tag as a Cleanup Tag.
  • The GA – Event – Hotjar tag will track our modified Hotjar User ID from the Session Cookie.

If you haven’t done it already, head over to Hotjar, create an account, set up the tracking described in this blog post, and use Google Analytics to identify behavior that Hotjar can help you answer.

Some final words

The content of this blog post was last updated 30th of July 2021, so if you have visited this blog post before, some of the content and solutions are different.

We live in a world of consent and privacy. Make sure you have the right consent to do this type of tracking.

I have deleted some comments that are no longer relevant.