How to Send Events with Google Tag Manager

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

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, 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>

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

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.

Back to top

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.

Back to top

See also

• What are Events?
• Events API Reference
• When to use Events and User Attributes