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: 

mceclip1.png

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:

mceclip4.png

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":

mceclip0.png

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.

mceclip0.png

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.

mceclip2.png

mceclip1.png

Or the survey will popup

mceclip5.png

Troubleshoot

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

mceclip3.png

Need assistance? Start a conversation with our Support Team.
CONVERT MORE

Reliably Convert More Site Visitors, Even If Everything Else is Changing in Your Business.

START 15-DAY FREE TRIAL
✓ No Credit Card  ✓ Easy Set-Up  ✓ Access All Features

Comments