Plan availability
Available for Recordings and Heatmaps with Observe 
, Observe 
, or Observe 
Available for Recordings and Heatmaps with Observe , Observe
Available for Surveys with Ask , Ask , or Ask
With Hotjar Events you can 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.
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 our browser developer tools to confirm that the event is being sent to Hotjar successfully.
Enable Hotjar Debug mode.
Any page that has the Hotjar Tracking Code installed on it can utilize our debugging logs. To utilize this feature, add the following parameter to the end of your webpage URL when you open it in your browser: ?hjDebug=1
Examples:
https://www.hotjar.com/?hjDebug=1
https://www.hotjar.com/?utm=123&hjDebug=1
Open your browser’s Developer Tools and click on the Console tab.
- To do this in Chrome, on the menu bar click View > Developer > Developer Tools
- To do this in Firefox, on the menu bar click Tools > Browser Tools > Web Developer Tools
Once the Developer Tools menu opens in the browser, select the Console tab.
Refresh the page.
We recommend reloading the page after you've enabled debug mode and opened your developer tools, to ensure that you're seeing all the relevant logs that occur when the page loads. You should see multiple colored log entries that look similar to these:
Trigger the event on the page.
Perform the action needed to trigger the event. If you followed the example outlined earlier in this article, you can click anywhere on the page to trigger the event. If the event was sent successfully, you'll see it appear in the Console tab like this:
If you saw your event appear successfully in the browser Console, then you're all done! If you did not see it appear, you may need to revisit your GTM configurations to ensure the event code was implemented correctly.
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 widgets to trigger based on Events.
- Start session capture based on the triggering of Events.