Integrate Kameleoon with Smartlook

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

2 min

Intermediate

Was this content useful?

Smartlook records users on websites and in mobile apps. With features that allow you to find useful information even in thousands of recordings in no time.

Smartlook is a session replay tool for websites as well as iOS & Android apps. You can use it to generate heatmaps and analyze how people interact with your website or mobile app.

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

Key benefits

  • Analyse how your visitors behave while they are exposed to an experiment by watching session recordings on Smartlook based on a large number of filtering options.
  • Identify area of optimization thanks to Smartlook heatmaps and prioritize your roadmap of experiments in Kameleoon.

Enable Smartlook integration on Kameleoon

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

Note: Please note that we do not recommend triggering the Smartlook 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 Smartlook. 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 Smartlook, please copy and paste the code below in the Global script section.

window.smartlook_triggered_campaigns = window.smartlook_triggered_campaigns || [];

var processCampaignForSmartlookPlatform = function(campaign)

{

        var campaignId = campaign.id;

        var associatedVariationId = campaign.associatedVariation.id;

        var campaignName = campaign.name;

        var associatedVariationName = campaign.associatedVariation.name;

        var properties = {

                "test/variation": campaignId+" - "+campaignName+" - "+associatedVariationId+" - "+associatedVariationName,

        };

        

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

                return typeof smartlook != "undefined";

        }, function(){

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

                        smartlook('track', "Kameleoon campaign", properties);

                        smartlook_triggered_campaigns.push(campaignId);

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

                }

        }, 500);

}

// We loop over the experiments

Kameleoon.API.Experiments.getActive().forEach(processCampaignForSmartlookPlatform);

window.addEventListener("Kameleoon::ExperimentActivated", function(event) {

        processCampaignForSmartlookPlatform(event.detail.experiment);

});

// We loop over the personalizations

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

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

        processCampaignForSmartlookPlatform(event.detail.personalization);

});

This code will send data to Smartlook whenever a visitor is being targeted by an experiment or a personalization. By default, we send the experiment and variation names, campaign ID and name, associated variation ID and name. You can adapt the code to your needs.

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

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

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

        processCampaignForSmartlookPlatform(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 Smartlook JavaScript API. To know more, please refer to this documentation.

  • In this article :