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 experience analytics platform that allows marketers to understand why their visitors behave the way they do and to see how visitors are really using their website by combining 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 allow 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.
  • Analyse how your visitors behave while they are exposed to an experiment by watching session recordings on Hotjar based on a large number of filtering options.
  • Identify area of optimization thanks to Hotjar heatmaps and prioritize your roadmap of experiments in Kameleoon.

Enable Hotjar integration on Kameleoon

As a first step, you will need to have Hotjar installed on your website.

Note: Please note that we do not recommend triggering the Hotjar snippet from Kameleoon as each tool manages its own consent management policy.

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

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

Unfold the “General” section.

The “Global custom script” insert will allow you to link Kameleoon to Hotjar. Any JavaScript code you add in this insert will be executed each 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 in 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;

                        hj('trigger', tag_name.substring(0, 750));

                        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. You can adapt the code to your needs.

For instance if you do not 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 Kameleoon Activation API

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

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

  • In this article :