Available for Observe and Ask with the 
, 
or 
plans. See the Hotjar pricing page for plans and pricing.
Hotjar Events enable you to send events to Hotjar based on actions or changes happening on your site. These events then be used inside Hotjar for triggering Hotjar's tools or filtering Recording and Heatmap data. See our guide on What are Events? for more details.
With Google Tag Manager (GTM), you can use Events and Triggers within GTM to send events to Hotjar, avoiding the need to manually place additional code on your site. This is done by creating a Custom HTML tag in GTM containing the code associated with the Event. You can learn more in Google’s documentation about Custom tags and Triggers.
In this article, we’ll step through sending Events to Hotjar with GTM by using an example where we send an event when a user clicks anywhere on a page.
- How to create a Custom HTML tag to send an event to Hotjar
- How to verify that an event is being sent to Hotjar
We do not offer Support in troubleshooting issues with Events in GTM
This article is available to help guide you on what you might need to do in order to send events to Hotjar via GTM. It is up to you and your development team to implement this functionality as it best meets your requirements.
How to create a Custom HTML tag to send an event to Hotjar
Google Tag Manager should be installed on your site before you follow this guide
If you don't have Google Tag Manager installed yet you'll need to get that set up first. Use Google's Setup and install Tag Manager article to learn how.
Create a new Custom HTML tag in GTM.
From the Tags section, click New.
Click on Tag Configuration, then choose Custom HTML.
Include the script that will send the event to Hotjar in the HTML field.
In this example, we're sending an event to Hotjar called ‘click’. Below is the script that we will include in the HTML section of the Custom HTML tag. This means that whenever the GTM tag fires, an event will be sent to Hotjar via our Events API called 'click'.
<script>
hj('event', 'click');
</script>
The Hotjar Tracking Code will need to be loaded on your page before your event code
When using a GTM Custom HTML tag, the code window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; must be added inside the same <script> tags as your Event code, right above the Event. For example:
<script>
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('event', 'click');
</script>If you don't wrap the code inside <script> tags, it may show on your site as text since GTM will inject it as regular HTML.
Click on Triggering and apply the relevant trigger to fire the tag
Within the Triggering section you can also click on the + icon to add a new trigger.
In this example, we will trigger the tag to fire when a user clicks on 'All Elements'.
This means that the Custom HTML tag will fire when a user clicks anywhere on the page. When the tag fires, the ‘click’ event will be sent to Hotjar.
Click on Save to confirm your Custom HTML tag setup.
Click the Submit button.
Ensure that the changes are being applied to the Live environment and click Publish.
See the next section on How to verify that an event is being sent to Hotjar, to test the event is being sent to Hotjar when the tag fires.
How to verify that an event is being sent to Hotjar
In the example above, we set up a Custom HTML tag to send an event to Hotjar based on a page click. We can now use an example of creating a Survey that will appear when a user clicks anywhere on the page to demonstrate how to test sending events to Hotjar.
Follow the steps in How to Set Up a Surveys until you get to the Targeting section.
In the Targeting section, select Specific pages and choose Event from the dropdown menu.
Enter the event name in the Event field, in this case it's click.
Finish creating the survey and set its status to Active.
Visit the page where your GTM container loads and enable Hotjar's debug logs.
You can enable debug logs in the Console tab of Developer tools by adding ?hjDebug=1 to the end of the URL where your tag is due to fire. This will let you see if the event is successfully being sent.
When a click is made anywhere on the page, the Survey appears and we can see the command that triggered the event within the Developer Tools console.
After setting up events to be sent to Hotjar using GTM, you'll begin seeing the events available for use in Hotjar’s tools. From here, you can currently do the following with Hotjar Events:
- Filter Recordings by Events.
- Filter Heatmaps by Events.
- Create a Recording Segment that includes the filtered event.
- Target Surveys and Feedback widgets to trigger based on Events.
- Start session capture based on the triggering of Events.