Integrate HotJar and Optimizely Experiments

by David Mannheim

posted on: November 25th 2015

We've been waiting for some time for HotJar to release their Optimizely integration and I know the guys there are working hard at achieving this. You can view their product roadmap here.

But did you know that you can integrate your experiments in Optimizely and HotJar Analytics already? (OK not terribly easily, but it's still achievable). It allows you to analyse your experiments through more than just data, which we should all be doing to better understand our user behaviour and how our experiments have influenced that behaviour, if at all.

Integrate HotJar Recordings with Optimizely

What we need to do here is drop a custom tag into each variation we're running in Optimizely. Naturally, if you start your recordings whilst an experiment is running HotJar will record a segment of your sessions. However, what the below custom tag does is automatically pull through your experiment ID and variation and 'tag' the recording in HotJar so you don't have to search for your variation. Great, right?

Here's how tags work:

Here is an article in Optimizely describing how to do this in Optimizely:

Essentially, all you need to do is append the below code to your variation code.

/* _optimizely_evaluate=force */
(function() {
  var returnVal = "";
  if (optimizely.activeExperiments.length > 0) {
    var experimentId;
    var experimentName;
    var variationName;
    var delimiter = "_";
    var namesCombo;
    for (var i = 0; i < optimizely.activeExperiments.length; i++) {
	  experimentId = window['optimizely'].data.state.activeExperiments[i];
	  experimentName = window['optimizely'].data.experiments[experimentId].name;
	  variationName = window['optimizely'].data.state.variationNamesMap[experimentId];
 	  namesCombo = experimentName + delimiter + variationName;          
	  returnVal += (returnVal) ? "|" + namesCombo : namesCombo;
	  hj('tagRecording', [returnVal.split("|")[i]]);
/* _optimizely_evaluate=safe */

Note: from experience and talking to the guys at Optimizely, the HotJar code needs to fire before the Optimizely code. We've had various issue with this especially within GTM.


Integrate HotJar heatmaps in Optimizely

This is slightly more tricky, but doable. HotJar heatmaps works on URLs and URL parameters as read here. As a result, we need to tell Optimizely to append a parameter to the variation. This brings with it various complications but we can get around these.

  • Append a parameter to your variation in Optimizely

What the below code does is tell Optimizely to append &z=1 to the variation. Yes, it's ugly within the URL as you'll see to your variation but it does work.

/* _optimizely_evaluate=force */
var oldurl = window.location.href + "&z=1";
/* _optimizely_evaluate=safe */
  • Remove the parameter from Analytics.

What you'll see is your variation appearing in Analytics as a separate page view. This isn't the biggest issue if your variation is on a single, low traffic page view such as /terms-and-conditions where your variation will segment your page view as /terms-and-conditions and /terms-and-conditions&z=1. What we need to do is search, replace and consolidate the &z=1 by informing Google Analytics to ignore that parameter.

  • Add heatmap to HotJar

Then just add your heatmap to HotJar (which is the easy bit!)

The above works really well until HotJar find a sexier implementation. We'll update you when this happens!

avatar for author

David Mannheim

David is an experienced conversion optimiser and has worked across a series of core optimisation disciplines including web analytics, user experience and AB & MVT testing.

Integrate HotJar and Optimizely Experiments

by David Mannheim Time to read: 2 min