Kameleoon

The Kameleoon extension makes it easier for you to analyze the displayed A/B test and variants. Mapp Intelligence integration on your website is required for a successful setup. Using the extension, the information from Kameleoon tests is sent directly to Mapp Intelligence.

This document describes the technical integration and configuration of the extension on your website.

For a detailed description of the Kameleoon system, visit the company’s website at www.kameleoon.com.

Configuration in Mapp Q3

Data is recorded using one event parameter. This must be saved in Mapp Q3 under Configuration > Custom parameters > Event parameters.

Although you can choose your own names for them, We recommend using the following configuration:

Parameter	Datatype	Amount Parameter Values
Kameleoon Variation	Text	Single Value

Integration

Download

You can find the package on our Github page.

Browser

The Kameleoon extension file should ideally be integrated directly into the header area of the page after the Smart Pixel.

<html>
    <head>
        <title>Homepage</title>
        <script type="text/javascript" async src="js/smart-pixel-loader.min.js"></script>
        <script type="text/javascript" async src="js/smart-pixel-kameleoon.min.js"></script>
    </head>
    <body>
        The content of your website is placed here.
    </body>
</html>

XML

Node

$ npm install @webtrekk-smart-pixel/kameleoon

BASH

var webtrekkSmartPixel = require('@webtrekk-smart-pixel/core');
var webtrekkKameleoon = require('@webtrekk-smart-pixel/kameleoon');
 
var wtSmart = webtrekkSmartPixel.use(window, window.document);
wtSmart.push(webtrekkKameleoon.use());

JS

RequireJS

requirejs(['wtSmart', 'wtSmartKameleoon'], function(wtSmart, wtSmartKameleoon) {
    window.wtSmart = window.wtSmart ? window.wtSmart : wtSmart.use(window, window.document);
    window.wtSmart.push(wtSmartKameleoon.use());
     
    // do tracking stuff here
});

JS

Methods and properties

name

Get the name of the extension.

/**
 * @type {string}
 */
wtSmart.extension.kameleoon.name;

JS

version

Get the version of the extension.

/**
 * @type {string}
 */
wtSmart.extension.kameleoon.version;

JS

config

Set and get the current configuration of the extension.

parameterIdVariation: Enter the parameter ID of the respective event parameter you created in Mapp Q3, for example, "7". As a predefined action name the plugin automatically uses "kameleoon_<<Test Name>>_<<Test ID>>."
withPersonalization: If you activate this feature, the personalization will be tracked.
useVariationInActionName: To better filter results if a visitor sees both versions in one visit, you can save the test and variant name as event name instead of parameters ("kameleoon_<<Test Name>>_<<Test ID>>_<<Variation Name>>").
trafficDeviationThreshold: If you want to stop tracking a variant that exceeds the specified amount of traffic, configure this option.

/**
 * @param {{
 *     parameterIdVariation: string,
 *     withPersonalization: boolean,
 *     useVariationInActionName: boolean,
 *     trafficDeviationThreshold: {
 *         min: number,
 *         max: number
 *     }
 * }} [config]
 *
 * @returns {object}
 */
wtSmart.extension.kameleoon.config(config);

JS

isActivated

Get the status, if the extension is enabled.

/**
 * @returns {boolean}
 */
wtSmart.extension.kameleoon.isActivated();

JS

activate

Activate the extension.

wtSmart.extension.kameleoon.activate();

JS

deactivate

Deactivate the extension.

wtSmart.extension.kameleoon.deactivate();

JS

Example

// is kameleoon activated
var isActivated = wtSmart.extension.kameleoon.isActivated();
 
// set kameleoon config
wtSmart.extension.kameleoon.config({
    parameterIdVariation: '17',
	withPersonalization: true,
	useVariationInActionName: false,
    trafficDeviationThreshold: {
        min: 1,
        max: 99
    }
});
 
// get kameleoon config
var kameleoonConfig = wtSmart.extension.kameleoon.config();
 
// activate kameleoon
wtSmart.extension.kameleoon.activate();
 
// deactivate kameleoon
wtSmart.extension.kameleoon.deactivate();

JS