What is hotjar?
Hotjar is a website heatmaps and behavior analytics tool. It helps you to see how visitors are using your website.
The main functions of Hotjar are
- user sessions recording,
- creating heatmaps
- creating clickmaps
- feedback surveys
Each of these has a different objective and can work as separately as a single analysis tool but give best results when mixed and used together.
At the time of writing this article, Hotjar has notified that funnels and form tracking will be retired by 14 December 2020. This is a shame, since funnels those were crucial functions for power users. On the other hand there are some alternatives that we can use to get the same result.
Will Hotjar work on my website?
From the technical point of view the only requirement is that your website needs to support JavaScript. This means Hotjar will not work on AMP.
Apart from this, there are no other requirements in particular.
How to install Hotjar manually (static code) ?
- Go to your hotjar dashboard, find the code snippet and copy it.\
- Go into your code editor and find the head section. Paste the code snippet before the </head> tag. For example in wordpress you can go to the header.php file and find drop the code before the end of the head tag.
- Ready! Now we can see if it works.
How to install Hotjar with Google Tag Manager?
- The first step is to copy the Hotjar code ID.
- Then go to your Google Tag Manager > Tags section and click add Tag.
- Find the hotjar template
- Add your site ID and for the trigger please select “all pages”.
- Publish the container.
- Add all the heatmaps you need and want inside Hotjar’s inference.
How to install Hotjar on a Single Page Application website (for example React website) ?
With SPA (single page applications) the installation process is a bit different. We need to use the stateChange function instead of a standard pageView. In the default configuration, Hotjar is loaded with every page reload. On the other hand, web frameworks like React don’t refresh the whole page, but they use VirtualDOM events to refresh only a section of the page. Thanks to this the website is faster, but it’s a bit trickier to trigger tracking events.
To track SPA we need to create a stateChange event that Hotjar will detect and tell the script “this should be treated as a new page”.
<script>
hj('stateChange', '{{PathName}}');
</script>
PathName – is a fragment that you want to send to Hotjar. This can be anything like “Thank-you” // string
To start tracking your SPA application please these steps:
- First of all go to the your Hotjar’s account Sites & Organizations > Site settings and change the tracking URL changes to track fragments:
- Whenever you want to signal a URL change to hotjar please execute the code below. This will send the information of a custom Page Path to Hotjar.
<script>
hj('stateChange', '{{PathName}}');
</script>
How to use Javascript triggers for Hotjar heatmap tracking?
Hotjar gives you the option of using Javascript triggers. This is useful when your website has an unconventional structure or you are doing A/B tests. Using Google Tag Manager and triggers can take the load off your IT department.
One of my clients wanted to get an overall heatmap for similar product pages but there was a problem with his URL structure. To make this happen I used JavaScript triggers to fire when the user entered the product page. In the end a very big issue was resolved in 5 minutes.
To enable a trigger please select a Custom HTML tag in Google Tag Manager and use the code below.
<script>
hj('trigger', '{{triggerName}}’);
</script>
triggerName – The name of your trigger. It can be anything for example “productPage” // string
Checking if Hotjar is installed properly?
The easy option is to use the Verify installation button.
Another way to verify if Hotjar’s code is triggering correctly is using the inspect tool in chrome. Go to Inspect->Network, in the search bar please type “hotjar” and refresh the page. You should be able to see Hotjar’s snippet triggering and sending data.
Bringing It All Together
Hotjar is an extremely useful tool for improving your website. The installation is easy but can be tricky at times. There are tons of resources if you get stuck. In particular I recommend Hotjar’s installation documentation, but if this still is not enough don’t hesitate to drop me a message.
