HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

Configure Hotjar

ūüďė

This topic describes how to:

  • Tag Hotjar recordings with¬†Optimizely¬†experiment & campaign data
  • Create specific Hotjar Heatmaps for your experiment & campaign
  • Integrate Hotjar with Optimizely for Hotjar Heatmaps & Recordings.

What does this integration let you do? 

This integration lets you tag Hotjar Heatmaps and Recordings with Optimizely experiment and campaign information.

  • For Hotjar Heatmaps: 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 can drill down per variation and get a better understanding of your visitors' scrolls, clicks and moves.¬†
  • 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 can filter recordings per variation.

The Hotjar integration is owned by Hotjar. Currently, only Hotjar Recordings & Feedback is supported by the integration. Development on the integration to enable Heatmaps is ongoing/on the roadmap. If you have any questions regarding the Hotjar integration, please reach out to Hotjar's Support Team.

Set up the integration with Hotjar Heatmaps

Pre-requisite 1: Add and enable the Hotjar Heatmaps and Recordings integration to your account. You can get the extension here.

Pre-requisite 2:  Enable the force variation parameter by going to the Settings tab in Optimizely, then make sure the Disable force variation parameter box is unchecked. 

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

  2. Write down the IDs; you need them later.

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

    If you do not see this, this means the integration is not enabled in your account. See Pre-requisite 1 to figure out how to enable it.  

  4. Make sure the Heatmaps field is set to "ON" and enter an Event prefix. This can be any string and you should use a short name of your experiment name. This will not appear in Hotjar and is only used by Optimizely to trigger the right heatmap matching your experiment. Avoid the use of special characters. Example of the acceptable prefix: homepageRedesign.

  5. Head to Hotjar and create one heatmap per variation.

  6. On Page Targeting, select Trigger a JavaScript snippet and select Event in the "Enter Page URL" section. For the value of the Event, enter the prefix you picked before + an underscore ( _ ) + the variation ID. Example of correct prefix: homepageRedesign\_8575810288.

  7. In the Page Targeting section in Hotjar, in the "Custom Screenshot URL" field, enter the URL of a page where the experiment is running and append to this URL Optimizely's force variation parameters. The final URL should look something like this: www.example.com/my-page/?optimizely\_x=\[variationId\]

  8. Generate the heatmap and start the Optimizely experiment. 

ūüďė

Note

If you are running a personalization campaign with a holdback that is not set to 0%, create a Hotjar Heatmap for the holdback. When creating this heatmap, input the Event in Hotjar as follows: your prefix + underscore ( _ ) + holdback. For example if the prefix is homepageRedesign then the Event will be homepageRedesign_holdback. Also, leave the "Custom Screenshot URL" field in Hotjar empty.

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 on GitHub.

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

To enable this integration, go to the experiment you want to tag recordings with, and set the Recordings field to ON. Check the Tracked box and click Save. 

This experiment will now tag all visitors with Optimizely experiment & campaign information and this tag will show up in your Hotjar recordings.