Hotjar is a popular web analytics and user feedback service. It provides tools for flow owners and marketers to understand how users interact with their websites or, in our case, with their flows. Hotjar offers features such as heatmaps, session recordings, and surveys to gather insights into user behavior and preferences.
There are two ways to connect your heyflow to Hotjar:
By injecting the Hotjar tracking code into the head section of your flow
Via GTM (in case your code section is not accessible)
Connect Hotjar via Head Code
First of all, you’ll have to create your Hotjar account, which is very straightforward and will not be covered in this article.
To learn more about custom Head Code in Heyflow, please check out this help article.
Once your Hotjar account created, you can access your dashboard which, if you access it for the first time, look as follows:
Here you can then simply copy the tracking code and insert it into the head section of your flow:
If you want to only load the script when the user accepted the cookies, add this to the script tag:
<script type="text/plain" data-cookieconsent="marketing">
Save the head code and republish your flow.
If you’ve already been using Hotjar, you should head over to “Integrations” (on the upper right), then click on “Organizations and sites” (on the top left), and choose “+ New Site”:
Here you then add your flow’s URL, and click on “add site”:
You then click on “Install tracking code”, which will allow you, after choosing “Install it manually”, to copy the code and paste it into the head section of your flow.
After pasting the code, we recommend you do a testrun of your flow once, and refresh your Hotjar page. You should then see that the tracking code is active.
The next step is to verify the installation of the tracking code. After heading back to “Organizations and sites”, click on “install tracking code”. You’ll then see that the verification is very straightforward, by simply clicking on “Verify installation”:
Congratulations, your heyflow is now connected to Hotjar! After the first submissions have come in, you will then also be able to see the first recordings, etc…
Connect Hotjar via GTM
If you can’t access your code section in Heyflow, don’t worry, there is another way of connecting your heyflow to Hotjar: Google Tag Manager (GTM).
To learn more about the basic setup in GTM, please check out this help article.
1. The first step in GTM, is to head over to your Tags section, and click on “New”:
2. Click on “Tag configuration”, and search for the Hotjar tracking code tag:
3. Adding the Hotjar Tracking Code Tag to your workspace, you’ll notice that you need one specific ID to complete the setup: The Hotjar Site ID.
This site ID can be retrieved from the URL (after sites/), when accessing the main page in Hotjar.
4. Simply copy and paste the ID into your tag in GTM.
5. Next, you’ll have to link a trigger to this tag. Hence, click on Triggering…
… and choose the standard “All Pages” Trigger:
6. After finishing this setup, save the tag and don’t forget to click on “Submit” in GTM (upper right).
Congratulations, you have successfully connected your heyflow to Hotjar via GTM!