How to Use JavaScript to Trigger Heatmaps – Hotjar Documentation

This feature is only available on the Plus and Business plan.

To see if one of our paid plans suits your site better, check out everything our Plus and Business plans have to offer in Hotjar Plans.

JavaScript triggers are great for our Heatmaps 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 JavaScript Trigger from your page targeting panel in Heatmap setup.

Enter a name you would like to use as a trigger.

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

Click Done.

Add the trigger code to your website.

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

hj('trigger', '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 JavaScript trigger for you.

Once the JavaScript snippet has been added and the Heatmap is set up, a Heatmap screenshot should trigger each time a user lands on that specific version of the site.

Usage Examples

If you wanted to use JavaScript 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 the JavaScript snippet to this function:

function open_signup_overlay() {
    // Code to open your overlay
    
    // Hotjar Heatmap trigger.
    hj('trigger', 'popup_heatmap');
}

Example 2: If you want the Heatmap to trigger 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('trigger', 'split_test_a');
    } else if (version === 'B'){
        hj('trigger', 'split_test_b');
    }
}

You can also set up JavaScript Triggers through Google Tag Manager.

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

Articles in this section