Hotjar userId tracking in Google Analytics with Google Tag Manager v2

Hotjar Recordings Dashboard

I have written about tracking Hotjar User ID in Google Analytics before, but I found that this solution wasn’t accurate enough for my needs, so I came up with the approach described in this blog post. It’s more accurate, but it’s also more complex.

The problem is that it can take a while before we can access the Hotjar User ID. My previous solution is tracking the User ID on Window Loaded, but I found that this isn’t accurate enough for my needs. The method described in this blog post is using the Timer Trigger in Google Tag Manager for improved accuracy.

Tracking Hotjar in Google Analytics using Google Tag Manager

The first thing you should do if you haven’t done it yet is to head over to Hotjar, create an account, and add the Hotjar-script to a Custom HTML Tag in Google Tag Manager. Then we are going to track the Hotjar userId in Google Analytics.  It’s especially Hotjar Recordings that makes it useful to track the User ID.

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

Google Analytics setup and tracking

After you have added Hotjar to GTM, 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 Analytics Hotjar Dimension

Google Tag Manager Variables

We need to activate the Container ID and HTML ID variable, create 2 different GTM Variables, and in addition we are going to create a “nice to know” variable.

Activate Container ID and HTML ID variables

GTM Variables - UtilitiesThe method we are going to use to trigger these tags are somewhat special, we are going to use Tag Sequencing with a Custom HTML Tag, and because of that you need to activate the Container ID variable and the HTML ID variable.

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

Variable 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 Local Storage.

Name the Variable Hotjar User ID – Get.

Variable 2: Getting the Hotjar User ID from Local Storage

Create a Custom Javascript Variable, and add the code below. This code will grab our modified Hotjar User ID that we have stored in Local Storage.

Name the Variable Hotjar User ID – Local Storage.

 

Variable 3: timerEventNumber

This is a “nice to know” variable for our tracking. We are going to use a Timer Listener as a 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.

GTM timerEvent Number

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 User ID from the variable Hotjar User ID – Get to Local Storage, and then the ID will be tracked in Google Analytics.

Name the Trigger Hotjar – Timer.

GTM - Hotjar Timer Trigger

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. I have set this value to 6. On average in my tracking it takes about 1.8 Timer Events before the Hotjar userId is tracked.

Enable When setting

This setting tells the Timer when it should be triggered. The first condition tells the trigger that in my case it should only be triggered on the checkout and on the confirmation page. This means that you will have to adapt this rule to your needs. Should the Trigger be enabled on all pages or some pages in your case?

The second condition checks if our modified Hotjar User ID is stored in Local Storage. If it exist, the Trigger will NOT be enabled.

GTM - Hotjar Timer Trigger: Enable When setting

Fire On setting

The setting is the same as above. If the Hotjar User ID is found in Local Storage, the Timer will not fire.

GTM - Hotjar Timer Trigger: Fire On setting

Google Tag Manager Tags

We need to create 2 different GTM Tags.

  1. 1 Custom HTML Tag for storing the Hotjar User ID to Local Storage.
  2. 1 Google Analytics Tag for tracking the ID from Local Storage.

Tag 1: Google Analytics Event tracking of Hotjar User ID

Google Analytics Event Tracking of Hotjar User ID

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

I always use Variables for values where it’s “natural”, so my Tracking ID is therefor stored in a Variable called {{Google Analytics ID}}. Replace this with your own Tracking ID.

In the Label field, add the Variable {{Hotjar User ID – Local Storage}}.

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

You should also add the Variable {{Hotjar User ID – Local Storage}} as a Dimension to this Tag (next image). Note that I also use a Variable for the Dimension Index Number.

 

GA - Event - Hotjar ID tag - Dimensions

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

GA - Event - Hotjar ID tag - Trigger

Tag 2: Store Hotjar User ID to Local Storage

Create a Custom HTML Tag and name it Hotjar – Store User ID to Local Storage. Add the code below to the Custom HTML Tag.

Hotjar - Store User ID to Local Storage settings

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 – Get contains a Hotjar userId, unless our modified User ID is already stored in Local Storage.
    • If Hotjar User ID – Get 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 local storage.
    • In addition, this will trigger our GA – Event – Hotjar ID tag as a Cleanup Tag.
    • The GA – Event – Hotjar ID tag will track our modified Hotjar User ID from Local Storage.

Tracking Hotjar User ID from Returning Visitors

In the beginning of this blog post we set the Google Analytics Dimension Scope to Session. This means that this solution will not track Visitors that already have a Hotjar User ID stored in Local Storage. To track Hotjar User ID from Visitors that have already stored a User ID in Local Storage, you must add the Variable {{Hotjar User ID – Local Storage}} as a Dimension to other Google Analytics Tags as well. I track this as a Dimension in my Enhanced Ecommerce Checkout and Purchase tag also.

Why don’t I set the Scope to User instead of Session you may ask? Then I don’t have to add this as a Dimension to other Google Analytics Tags. The reason for this is simply that I turn Hotjar on and off, and I have no interest in tracking the Hotjar User ID if Hotjar is turned off. If I turn Hotjar off, I also disable Hotjar tracking in GTM.

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.

7 Comments on "Hotjar userId tracking in Google Analytics with Google Tag Manager v2"

  1. Very useful, thanks Savio!

    Those copying / pasting names of variable/trigger/container names might run into an issue when previewing the tag in the last step “Tag 2: Store Hotjar User ID to Local Storage” because “{{Hotjar User ID – Get}}” uses a hyphen, while the earlier steps formatted itself to a dash.

  2. Loryn Thompson | June 14, 2016 at 4:33 pm | Reply

    Hey Eivind, thanks so much for putting this together! It’s always best to link your analytics tools together whenever possible 🙂

    I’m curious, though — could I achieve the same (or similar) result by pushing the Hotjar ID to the data layer, setting up a data layer variable, and adding it as a custom dimension on a pageview, making sure that the Hotjar tag fires before the pageview tag? Just wanted to avoid adding an extra event to my setup, if possible, or at least understand why it wouldn’t work for my own edification 🙂

    Also, do you know if the Hotjar ID is set for every user that visits a page with the Hotjar code, or only if the user has data saved to Hotjar (poll, recording, etc.)?

    Thanks for your help!

    • Eivind Savio | June 16, 2016 at 9:18 pm | Reply

      Hi Loryn

      Unfortunately you get access to the Hotjar ID a long time after the pageview tag has fired. You will not be able to grab the ID on DOM Ready, but you may be able to grab the ID on Window Load (and you wouldn’t track pageviews on Window Load).

      You could however use my “timer method” and set the Hotjar ID into Local Storage (or a cookie), and on the next pageview you will be able to grab the ID from Local Storage or the cookie, and send it to a dimension. This method means that you will not be able to track Hotjar ID for “bounces”, only for users with more than 1 pageview.

      Is the Hotjar ID set for every user…?
      I haven’t studied this in detail, but some quick tests indicates that the Hotjar ID is only set when a user has data saved to Hotjar (poll, recording, heatmap).

      Regards,
      Eivind

  3. Hi Eivind,

    first of all, great idea and find!
    I’ve integrated this as a test in Google Analytics and see the first ID’s dripping in.
    The only difference I made is set the custom dimension to ‘Hit’ level as this is an ID tied to a user (due to privacy concerns).
    I understand choosing the ‘session’ level but that might mean you could get stuck on the login/logged-out user (if you only use the hotjar ID for user ID tracking, which I’m doing in this test).

    Do you have any idea what triggers the hotjar ID in particular?
    I’ve been testing the tracked hotjar ID’s and haven’t found them in Hotjar (yet? have you noticed a lag in hotjar?)

    gr,
    dries

    • You will not be able to match all Hotjar ID’s vs. those collected in GA. However, I’m able to match most of them. Your Hotjar plan may also play a role here. I checked this today on a paid Hotjar account. I could find most Hotjar ID’s tracked in GA that I was interested in (and nailed down some checkout issues). 🙂

  4. I have been noodling on this for awhile. You make my day. There is rich information by matching up GA behavior with Hotjar’s recording. It will provide much better analysis for UX and CRO issues. Thank you very much 🙂

Leave a comment

Your email address will not be published.


*