How to enable Hotjar heatmaps or surveys for a variation

Introduction

This guide will tell you how to enable Hotjar heatmaps or surveys of your different experiences. If you are interested in enabling Hotjar recordings please read the following Guide.

For more use cases regarding this integration, you can read our Hotjar blog article.

Enable Integration

To integrate with Hotjar's manual heatmaps, you need first to enable the Hotjar integration in your Experience Summary screen: 

Create a Javascript Event in Hotjar

To enable Hotjar surveys or manual heatmaps on a specific variation you need to create a Javascript event. With the event, you will be able to trigger the survey or heatmap with a javascript code inside your variation in your experience.

Surveys

For the Surveys, create a new Survey and under "Targeting" select "Specific Pages" and then add your event:

Give it a name e.g. convert_survey.

Finish the rest of the survey setup: Question, Appearance and Behavior, and let’s head to Convert to add the custom JavaScript code that will show the survey on the specific event we want.

Heatmaps

For the Heatmaps, create a new manual Heatmap and under "Page Targeting" select "Users who trigger a custom event":

Give it a name e.g. convert_heatmap and finish the rest of the heatmap setup.

Let’s head to Convert to add the custom JavaScript code that will show the heatmap on the specific event we want.

Add Custom Javascript in Convert

Then after you create your event, go into your Convert experiment variation and add Custom Javascript to the variation you want to enable the heatmap for.

Then add the following code, replacing "convert_heatmap" with the name of the event that you have added to Hotjar:

convert.$( document ).ready(function() {    
       hj('event', 'convert_heatmap');
       console.log('Triggering hotjar manual heatmap');
});

View Heatmaps or Surveys

Once the variation is shown to a visitor, it will add the interaction to the heatmap.

Or the survey will popup

Troubleshoot

You can enable Convert Chrome Debugger and see if this integration (Convert-Hotjar) is enabled. A new line will be added like this: