How to Use Events for Heatmap Targeting – Hotjar Documentation

Events are not available in early releases of Continuous Heatmaps or on Basic Plans.

Depending on your plan, you may see Continuous Heatmaps by default and the functionality to trigger these session-based Heatmaps by Events is not yet available. However, users on a Business or Plus plan will still have access to Events with manual snapshot-based Heatmaps.

To learn more about Continuous Heatmaps and to find out if they are enabled on your plan, check out Continuous Heatmaps.

Events are great for Heatmap targeting if you are:

A/B testing
Targeting a popup modal
Triggering data collection after a Hotjar Survey is displayed

This feature is also available for Feedback Widgets and Recordings.

Select Event from your page targeting panel during the Heatmap setup.

Enter a name you would like to use as an event.

screenshot of event targeting option

There is a restriction of 750 characters used in an event name. Only alphanumeric characters (a-z, A-Z, 0-9), underscores (_), and dashes (-) can be used in the event name.

Click Done.

Add the event code to your website.

In the example above, you've created an event called split_test_a. Next, you will need to add the event code to your website after the Hotjar Tracking Code:

hj('event', 'viewed_split_test_a');

Implementation is different for every site and involves a technical background

It is best to get your web development team involved so they can determine where to place the event code.

Once the event code has been added and the Heatmap is set up, a Heatmap screenshot should be captured and start tracking data when a user lands on that specific version of the site (as defined by your code).

Usage Examples

If you wanted to use events to trigger a Heatmap in other cases, here is some sample code to get you started:

This is code is for example purposes only

This is only a foundation, you’ll need to develop the code further before it will work in your unique situation.

Example 1: If you have a JavaScript function which opens a sign-up form overlay:

function open_signup_overlay() {
    // Code to open your overlay
}

You can trigger a Heatmap by adding your event code to this function:

function open_signup_overlay() {
    // Code to open your overlay
    
    // Hotjar Heatmap target event.
    hj('event', 'opened_signup_overlay');
}

Example 2: If you want the Heatmap to start collecting data when a user lands on a specific version of your site, you would add this line of code:

function checkTestVersion() {
    //code to check version...

    if (version == 'A'){
        hj('event', 'viewed_split_test_a');
    } else if (version === 'B'){
        hj('event', 'viewed_split_test_b');
    }
}

You can also set up Events through Google Tag Manager.

If you use Google Tag Manager to load the Hotjar script on your site, you can set up Events on the GTM tag that fires the Hotjar tracking code. Check out this guide on how to set up Hotjar Events in GTM.

Articles in this section