Rich-text Reply

Hotjar tracking code

gd 07-22-15
Accepted Solution

Hotjar tracking code

[ Edited ]

Hi

 

I am NOT a coder, so this is a really low-level query!

 

I want to tag my hotjar recordings with the optimizely test/variation name.  Hotjar provide a code snippet for doing this:

 

hj('tagRecording', ['tag1', 'tag2']);

 I just need to know how to add it to my variant (I am happy that it only tags the variant, not the entire experiment)

 

Presumably I need to be in edit code, but there is already a bunch of jquery code there, with * prefixes.

 

So how do I add this javascript line to the jquery code?

 

Apologies is this is a really dumb question Smiley Frustrated

 

 

Thanks

gd
Level 2

Re: Hotjar tracking code

[ Edited ]

Hi @gd,

 

Great question, and we're glad to see you're aligning a powerful third-party tool like Hotjar with Optimizely.  For the Community's benefit, here is Hotjar's tagging documentation.

 

You're right - you're going to need to write a little bit of code to do this, but we can actually do it in one spot for every variation on the experiment instead of one time for each variation, and that's with our Experiment JavaScript feature.  We'll still assign the right variation name for each visitor.

 

In order to get the current running experiment(s) and variation(s), you'll need to parse our data object, and specifically, the state object within it.  optimizely.activeExperiments lists all active experiments being seen on the page right now, and then optimizely.variationNamesMap lists the variations the visitor has been bucketed into for all experiments, not just the ones on this page.  So you need to pull out the variations for just the experiments from optimizely.activeExperiments.

 

For reference, here is a culled-down description of the most valuable parts of the data object, and here is sample code on how to parse this data.

 

What the sample code does is convert optimizely.activeExperiments's response, which is an array, and optimizely.variationNamesMap's response, which is an object, into strings.  This makes the values easier to pass to other variables and manipulate in general, and this is good because Hotjar restricts tags to no more than 50 alphanumeric characters.

 

Let's say only one experiment is running on the page.  I'll argue it makes sense to concatenate the experiment and variation names into a single tag.  So you'd place this code in Experiment JavaScript:

 

/* _optimizely_evaluate=force */
function getExps() {
  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]);
}
/* _optimizely_evaluate=safe */

The output of the code is a tag where the value is the experiment name, underscore, and variation name.

 

If you have multiple running experiments, I'll argue it makes sense to assign one tag per experiment/variation.  Use this code:

 

/* _optimizely_evaluate=force */
function getExps() {
  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 */

This would allow you to assign tags for up to 20 experiments on a single page.

 

If and when you give this code a shot in your experiment, please let me know if you need nay further assistance with it.  Thanks!

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 
gd 07-23-15
 

Re: Hotjar tracking code

Hi Harrison 

 

Thanks for the detailed and idiot-friendly reply!

 

I've added the second piece of code to each of my live experiements, but so far nothing has been tagged in Hotjar.

 

Any ideas why it would be working?

 

 

thanks

 

 

 

gd
Level 2

Re: Hotjar tracking code

Hi @gd,

 

I apologize, I realize now there were two pretty big misses in the code I provided you yesterday.

 

First, I updated my reply shortly after I posed it to include the optimizely_evaluate=force and =safe comments - this will ensure the code runs earlier on the page.

 

Second, I realize the code I gave you doesn't actually execute the function, it simply defined it.  So given these two changes, please modify your code to this:

 

/* _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 */

Once you've installed that, please let me know if you see the tags being applied.  Thanks.

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 
gd 07-24-15
 

Re: Hotjar tracking code

Hi Harrison

 

That's now working.

 

Many thanks

GD

gd
Level 2
Eva 04-05-16
 

Re: Hotjar tracking code

Hi Harrison,

I've tried using your solution but the tags aren't showing up in HotJar. I've deployed the code in your second post with Experiment Javascript and added nothing else. Am I doing something wrong, missing a step?
Eva
Level 2

Re: Hotjar tracking code

Hi Eva,

Is Hotjar installed on your page above Optimizely? This is required for the integration to work.

Sincerely,
Harrison
Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 
Jason-GSell 10-10-17
 

Re: Hotjar tracking code

I'm very pleased to say that after many requests there is now an official Optimizely/Hotjar integration available. 

 

If you use Hotjar Business and Optimizely X, you can enable Hotjar's integration to align visitor analytics and feedback with your Optimizely experiments.

When you enable the integration, Hotjar will automatically add control and variation tags to recordings when you're running an experiment on a page. You'll be able to see which recordings are part of different experiments and variations and filter recordings by variation. This will help you select the recordings you want to watch when you're reviewing experiment results.

 

To get the Hotjar integration up and running, follow Hotjar's integration guide.

If this solved your question, please accept it as a solution!
Optimizely