Integrate Kameleoon with Hotjar

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

2 min

Intermediate

Was this content useful?

Hotjar is one of the easiest-to-use experience analytics platforms enabling marketers to understand why their visitors behave in the way they do and to see how these visitors are really using their website, through a combination of heatmaps, scrollmaps, session replays and user feedback (polls, surveys..) tools.

With our Hotjar integration, Kameleoon will automatically flag all your heatmaps, scrollmaps and session replays with additional tags to enable you to segment your analysis based on each experiment variation.

Key benefits

  • Understand why visitors leave your website with the help of engaging polls or surveys designed by Hotjar.
  • Analyze how your visitors behave when exposed to an experiment by watching session recordings on Hotjar based on a large number of filtering options.
  • Identify areas for optimization thanks to Hotjar’s heatmaps and prioritize your experiment roadmap in Kameleoon.

Enable Hotjar integration on Kameleoon

First of all, you’ll need to have Hotjar installed on your website.

Note: Please note that we don’t recommend triggering the Hotjar snippet from Kameleoon, as each tool manages its own consent management policy.

In your Kameleoon account, click on “Administrate” in the left-hand menu, then on “Sites”.

On the card for your website, click on “Configuration”: you’ll now access the configuration of your website on Kameleoon.

Unfold the “General” section.

The “Global custom script” insert will enable you to link Kameleoon to Hotjar. Any JavaScript code you add in this insert will be executed every time the page is loaded. This feature is usually used to add complex tracking code or integration to other solutions.

To activate the bridge between Kameleoon and Hotjar, please copy and paste the code below into the Global script section.

 
window.hotjar_triggered_campaigns = window.hotjar_triggered_campaigns || [];
 

 var processCampaignForHotjarPlatform = function(campaign)
 

 {
 

     var campaignId = campaign.id;
 

     var associatedVariationId = campaign.associatedVariation.id;
 

     var campaignName = campaign.name;
 

     var associatedVariationName = campaign.associatedVariation.name;    
 

         Kameleoon.API.Core.runWhenConditionTrue(function(){
 

           return typeof hj != "undefined";
 

         }, function(){
 

                 if(hotjar_triggered_campaigns.indexOf(campaignId) == -1){
 

                         var tag_name= campaignId+"-"+campaignName+"-"+associatedVariationId+"-"+associatedVariationName;
                         tag_name = tag_name.replaceAll(' ','');
 

                         hj('event', tag_name.substring(0, 250));
                         console.log(tag_name.substring(0, 250));
                         //hj('tagRecording', [tag_name.substring(0, 250)]);
 

                         hotjar_triggered_campaigns.push(campaignId);
 

                         console.log("Hotjar tracking sent for campaign: "+campaignId);
 

                 }
 

         }, 500);
 

 }
 

 // We loop over the experiments
 
 Kameleoon.API.Experiments.getActive().forEach(processCampaignForHotjarPlatform);
 
 window.addEventListener("Kameleoon::ExperimentActivated", function(event) {
 
     processCampaignForHotjarPlatform(event.detail.experiment);
 

 }); 

// We loop over the personalizations

Kameleoon.API.Personalizations.getActive().forEach(processCampaignForHotjarPlatform);

window.addEventListener('Kameleoon::PersonalizationActivated', function (event) {

        processCampaignForHotjarPlatform(event.detail.personalization);

});

This code will send data to Hotjar whenever a visitor is being targeted by an experiment or a personalization. By default, we send the campaign ID, name, Variant ID and name, but you can adapt the code to your requirements.

For instance, if you don’t use Hotjar’s session recording feature, you can remove the line:

hj('tagRecording', [tag_name.substring(0, 250)]);

Or, if you don’t have the personalization module, you can remove this part of the code:

Kameleoon.API.Personalizations.getActive().forEach(processCampaignForHotjarPlatform);

window.addEventListener('Kameleoon::PersonalizationActivated', function (event) {

        processCampaignForHotjarPlatform(event.detail.personalization);

});

This bridge is based on the Events that Kameleoon puts at your disposal. Learn more about the Kameleoon Activation API

You can click on “Validate” to apply any changes to your configuration.

This custom bridge is based on the Hotjar JavaScript API. To find out more, please refer to the documentation below:

Heatmaps

To analyze how your visitors behave when exposed to an experiment by using Hotjar’s heatmaps, you may need to setup the trigger name in Hotjar by using the convention name:

campaignId+”-“+campaignName+”-“+associatedVariationId+”-“+associatedVariationName

You can find the experiment and variation details (ID and Name) from your Kameleoon Experiments dashboard by hovering the experiment name.

  • In this article :