How to send Events to Hotjar with Google Tag Manager

If you use Google Tag Manager on your site, you can send Events to Hotjar using GTM. To do this, you can create a Custom HTML tag in GTM containing the code associated with the Event.

• How to create a Custom HTML tag to send an Event to Hotjar
• How to verify that an Event is being sent to Hotjar

In a standard implementation, if you wanted to send an Event to Hotjar you’d need to write a function that will send an Event when a certain action has taken place. For example, you might send an Event when the Sign In button is clicked.

If you run GTM on your site, you can use Events and Triggers in GTM to send these Events to Hotjar, avoiding the need to write a function or place additional code in your site. You can learn more in Google’s documentation about Custom tags and Triggers.

For the purpose of this article, we’ll be using a simple example where we will send an Event to Hotjar when a user clicks anywhere on a page.

How to create a Custom HTML tag to send an Event to Hotjar

Create a new Custom HTML tag in GTM

From the Tags section, select New

From Tag Configuration, choose Custom HTML

Include the script that will send the Event to Hotjar

In this example, we're sending an Event to Hotjar called ‘click’. This is the script that we will include in the HTML section of the Custom HTML tag:

<script>
  hj('event', 'click');
</script>

This means that whenever the GTM tag fires, an Event will be sent to Hotjar via our Events API called ‘click’. You can then filter Recordings based on this Event, or target Feedback Widgets.

Apply the relevant trigger to fire the tag

From the section 'Triggering', click on the + icon to add a new trigger.

For 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 Event ‘click’ will be sent to Hotjar.

Save your Custom HTML tag and publish the GTM container

Save the changes that were made to the Trigger and the Custom HTML tag.

Click the Submit button:

Ensure that the changes are being applied to the Live version and click Publish:

You can now test to verify that the Events are being sent to Hotjar when the tag fires.

NOTE: The Hotjar event code should run after the Hotjar script is loaded

If there's a chance that your event would fire on the page before your Hotjar Tracking Code, you would need to add this line of code right before your event code:

window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};

 

---

How to verify that an Event is being sent to Hotjar

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. 

Let's walk through an example of how we can test this. 

After following the steps in the above section to set up a Custom HTML tag that will send an Event to Hotjar based on a page click, we can now set up a Survey that will appear when a user clicks anywhere on the page. 

In the Targeting section of the Survey configuration, we can target the Survey to appear based on the Event 'click'. 

After the Survey has been saved and activated, we can visit the page where the GTM container loads.

In this case, the GTM container loads the Custoom HTML tag on the page https://hj-activation.herokuapp.com/.html

To enable debugging on this page to verify that the Event fires, we can amend the URL in the browser to include ?hjDebug=1. The resulting URL is https://hj-activation.herokuapp.com/.html?hjDebug=1

When a click is made anywhere on the page, the Survey appears and we can see the command that was processed to trigger the Event.

 

Once the Event is being sent to Hotjar, you can also filter Recordings based on the Event.