Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

Integrate Optimizely with Hotjar

This article is about Optimizely X
 
THIS ARTICLE WILL HELP YOU:
  • Integrate Optimizely with HotJar
  • Tag HotJar recordings with Optimizely experiment & campaign data
  • Create specific HotJar HeatMaps for your experiment & campaign

This article will show you how you can integrate HotJar with Optimizely for HotJar HeatMaps & Recordings. 

This integration is currently in beta

What does this integration let you do? 

This integration lets you tag HotJar HeatMaps and Recordings with Optimizely experiment and campaign information.

  • For HotJar Recordings: you may want to see if your visitor's behavior has changed because of changes in a variation. With Optimizely experiment information in your HotJar recordings you'll be able to filter recordings per variation.

  • For HotJar HeatMaps: Similarly, you may want to see if changes in a variation lead to visitors scrolling further down or clicking on re-designed elements. With Optimizely experiment and campaign information in HotJar HeatMaps, you are able to drill down per variation and get a better understanding of your visitors' scrolls, clicks and moves. 

Set up the integration with HotJar HeatMaps

Pre-requisite: The HotJar HeatMaps and Recordings integration needs to be added to your account and enabled. You can get the extension here: https://github.com/optimizely/addons-library/tree/master/Integrations/Analytics

  • In Optimizely, get your experiment's variation IDs. You can get them by going to the experiment in the Optimizely UI, clicking onto the experiment you want to integrate, and clicking on API Names. You will find the variation IDs in the Variations section. 

  • Write down the IDs, we will need them later.

  • In Optimizely, head into the experiment you want to integrate HotJar with, click on the Integrations tab. You should see the following: 

If you do not see this, head to the Troubleshooting section. 

  • Make sure the HeatMaps field is set to "ON" and enter a Javascript trigger prefix. This can be any string and we recommend using a shortname of your experiment name. This will not appear in HotJar and is only used by Optimizely to trigger the right heatmap recording matching your experiment. We recommend to avoid the use of special characters. Example of acceptable prefix : homepageRedesign.

  • Head to HotJar, and create one heatmap per variation.

  • On Step 3: Page Targeting, select "Trigger a Javascript snippet" and select "Javascript trigger" in the "Enter Page URL" section. For the value of the Javascript trigger, enter the prefix you picked before + an underscore ( _ ) + the variation ID. Example of correct prefix: homepageRedesign_8575810288. 

  • Generate the heatmap and start the Optimizely experiment 

Set up integration with HotJar Recordings

Pre-requisite: The Hotjar HeatMaps and Recordings integration needs to be added to your account and enabled. You can get the extension here: https://github.com/optimizely/addons-library/tree/master/Integrations/Analytics 

This integration will add a tag to HotJar Recordings. This tag will be labeled with Optimizely experiment, audience and variation information.

To enable this integration, head to the experiment you'd like to tag recordings with, and set the "Recordings" field to "ON". Check the "Tracked" box and Save. 

That's it! This experiment will now tag all visitors with Optimizely experiment & campaign information and this tag will show up in your HotJar recordings.