How to Use Events for Manual Heatmap Targeting

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.

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');

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).

Back to top

Usage Examples

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

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');
}

Back to top

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');
    }
}

Back to top