Track Hotjar in Google Analytics with GTM

Everyone who knows Hotjar, knows how excellent this tool is. In this blogpost I would like to explain how you could track Hotjar visitors in Google analytics using a custom dimension. There are a lot of reasons why you would like to do this. But the main reason is that it combines the best of both. Google Analytics extends Hotjar and vice versa with additional data for each visitor.

Every time a new visitor visits your website Hotjar sets a cookie called _hjUserId. Hotjar describes the function of this cookie as follows:

This cookie is set as soon as a user loads a page which contains the Hotjar code. The cookie contains a universally unique identifier (UUID) which allows Hotjar to track the same visitor across multiple pages and sessions.

Whooops, Hotjar has updated their script a bit. They are no longer storing this information in a cookie. We have to make a slight customization.

An example of an overview of Hotjar user id’s and their recordings. There could be multiple recordings for one user.

hotjar user ids

The information about the user is stored in a cookie. With the EditThisCookie extension for Chrome we could retrieve the value of this cookie.

hotjar cookie

This fictitious cookie value contains a fictitious Hotjar user id. The first part represents the user id we need.

To retrieve the cookie value we are going to create a new 1st Part Cookie variable. You could give it a name what ever you like, but the Cookie Name should be _hjUserId.

hotjar google analytics 2

The value we are going to retrieve looks something like e79u554fd-f35e-4d2a-a53c-b9bd9a1dfe70.

Update:

To retrieve this part, we can create a new Custom JavaScript variable. Call it hotjarUserId, we need this on a later moment.

Schermafbeelding 2016-03-14 om 19.55.48

When our page is loaded we will see the variable hotjarUserId is filled with the information we need.

Schermafbeelding 2016-03-14 om 20.10.52

To retrieve the first part we have to create another Google Tag Manager variable. This time we need a Custom JavaScript variable.

Schermafbeelding 2016-03-14 om 20.13.49

We are going to split the cookie value on the hyphen sign. If we succeed we have to return the first array (hotjarUserId) value. Else we return 0 as user id.

Now we have to create our Custom dimension slot in Google Analytics. Go to Admin and choose for Custom Dimensions at the property level.

custom dimension google analytics

Create a new Custom Dimension. Give it a name and set the scope to User.

custom dimension user level

After you create a new custom dimension you need to get the index number. You will find this in the Custom dimension menu after you have created one. In my case the index is 10. In your case it could be something else, this doesn’t matter.

Schermafbeelding 2015-11-17 om 23.24.54

Now we have to make a little customization in our Google Analytics tag. At step 3 we have to add a Custom Dimension. That’s why we need our index number. The Dimension Value should be the Hotjar user id that we have stored in our Hotjar – User Id Custom JavaScript variable.

custom dimension google tag manager google analytics

Create a new trigger for this Google Analytics tag. Choose Page View and trigger type Window Loaded. Fire it on All Page Views.

Schermafbeelding 2016-03-14 om 20.15.58

After a couple of ours your Hotjar User id’s will be displayed in Google Analytics. You wil find it as second dimension. Another method is creating a Custom report to retrieve the representation of the data you want!

P.s. Sorry for the large number of Hotjar links, but I try to refer you to get an awesome Hotjar price 😉

Was it interesting? Share it, so someone else can read this too!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

8 thoughts on “Track Hotjar in Google Analytics with GTM”

  1. Unfortunately for your great blogpost, HotJar stopped using cookies as they started Cross Domain recording.
    Do you have any suggestions how to find the HotJar UserID in another way?

  2. Do you need to create a new analytics tag for this or just add the custom dimension to the existing tag and the custom trigger to the all pages trigger? New to tag manager and a bit confused about this.

      1. Hi Marthijn,

        I just stumbled upon your article and am giving this tracking a try. I was wondering if adding this second trigger to the GA pageview tag won’t fire a second pageview for the same page so there will be double pageviews? Thanks in advance :).

  3. Hi,

    Just wondering if this is still a valid solution, since “function() {return hj.property.get(‘userId’);}” doesn’t return a valid value for me.

  4. Hi Marthijn, i tried your custom JS variable method but get the dreaded ‘undefined’ return when i check the hotjarUserID variable i preview mode. Hotjar tag firing OK. didnt try cookie, jus skipped straight to setup the custom JS variable. Any hints you cold give me?

  5. oops, looks like hotjar change their user id again.

    Now they can’t be matched.

    Hotjar seem to have gone back on the user ID. I tried implementing it about a month ago in GTM, and it looks like the ID changes on each page load.

    My question to HJ support:

    My question regards accessing Hotjar User ID in page DOM.
    This used to be available as a ‘userId’ variable in hj.property, then hj.pageVisit.property, but now it is not.
    The variable ‘key’ available in hj.pageVisit.property has the same format as User ID, but is reset on page reload.

    Is there a way of retrieving the user ID now?

    This is what I got from them:

    I’m told that we may provide this ability again in the future, though I don’t have an ETA for it at the moment, as we’re currently focusing on improving other aspects of Hotjar.

    Checking our current requests for this, it unfortunately seems that not a lot of users are voting on this feature – this is why it’s pivotal for us to get this feedback on our “Suggest a Feature” tool.

Leave a Reply

Your email address will not be published. Required fields are marked *