Extensions

General

The Smart Pixel allows various extensions to be embedded, either directly integrated in the pixel or as additional JavaScript files.

With the help of extensions, third-party tracking scripts can be embedded to fill additional Mapp Intelligence parameters or change data before sending it, for example.

The extensions give you access to all our parameters and functions in the Mapp Intelligence tracking script to make your work easier.

This document describes the process of integrating plug-ins into the Mapp Intelligence pixel environment as well as utilization of the functionality.

Structure of an extension

Your extension is a JavaScript function containing any code that you require. The extension must return an object with the following properties and methods:

name: Contains the extension name.
version: Contains the extension version.
trigger: Method that is automatically executed before and after each tracking request.

If you want to offer the option to enable and disable the extension you can implement for example the following methods:

isActivated: Get the status, if the extension is enabled.
activate: Activate the extension.
deactivate: Deactivate the extension.

window.wtSmart = window.wtSmart || [];
window.wtSmart.push(function(wtSmart) {
    wtSmart.extension.push(function(wtSmart) {
        var name_ = 'extension_name';
        var version_ = 'extension version';
        var isActivated_ = false;

        /**
         * @param {{
         *      mode: string,
         *      type: string,
         *      counter: number,
         *      data: object,
         *      instance: wtSmart,
         *      utils: wtSmart.utils
         * }} config
         */
        var trigger_ = function(config) {
            if (isActivated_) {
                // ...
            }
        };

        return {
            name: name_,
            version: version_,
            trigger: trigger_,
            isActivated: function() {
                return isActivated_;
            },
            activate: function() {
                isActivated_ = true;
            },
            deactivate: function() {
                isActivated_ = false;
            }
        };
    });
});

JS

The 'trigger' method

The 'trigger' method was executed with one argument, this object contains the following informations:

Property	Data Type	Description	Example
mode	string	Type of tracking request	page, form, media, action
type	string	Contains the status of tracking request	before, after
counter	number	Contains a number that shows how often this type of request has now been executed	5
instance	wtSmart	Contains the Smart Pixel	wtSmart
utils	wtSmart.utils	Contains the Smart Pixel utils	utils.event.unregister
data	object	All information set in this object will be directly added to the tracking request URL	{ ba: 'foo.bar' }

Methods and properties

name

Get the name of the extension.

/**
 * @type {string}
 */
wtSmart.extension.get()['extension_name'].name;

JS

version

Get the version of the extension.

/**
 * @type {string}
 */
wtSmart.extension.get()['extension_name'].version;

JS

isActivated

Get the status, if the extension is enabled (if it is implemented).

/**
 * @returns {boolean}
 */
wtSmart.extension.get()['extension_name'].isActivated();

JS

activate

Activate the extension (if it is implemented).

wtSmart.extension.get()['extension_name'].activate();

JS

deactivate

Deactivate the extension (if it is implemented).

wtSmart.extension.get()['extension_name'].deactivate();

JS

Examples

In the following example extension, the file javascript.js is loaded after the first-page request.

window.wtSmart = window.wtSmart || [];
window.wtSmart.push(function(wtSmart) {
    wtSmart.extension.push(function(wtSmart) {
        var name_ = 'extension_example_1';
        var version_ = '1.0.0';

        var trigger_ = function(config) {
            if (config.mode === 'page' && config.type === 'after' && config.counter === 1) {
                var url = 'http://domain.de/demo/javascript.js';
                config.utils.include(url);
            }
        };

        return {
            name: name_,
            version: version_,
            trigger: trigger_
        };
    });
});

JS

The example plug-in displayed below is used to mark each link on the page. The link URL will be passed on as soon as a link is clicked.

window.wtSmart = window.wtSmart || [];
window.wtSmart.push(function(wtSmart) {
    wtSmart.extension.push(function(wtSmart) {
        var name_ = 'extension_example_2';
        var version_ = '1.0.0';

        var trigger_ = function(config) {
            if (config.mode === 'page' && config.type === 'before' && config.counter === 1) {
                for (var i = 0; i < document.links.length; i++) {
                    config.utils.event.register(document.links[i], 'click', function(evt) {
                        alert(this.href);
                    });
                }
            }
        };

        return {
            name: name_,
            version: version_,
            trigger: trigger_
        };
    });
});

JS

The following example shows how to extend the page name to include the browser language prior to each request.

window.wtSmart = window.wtSmart || [];
window.wtSmart.push(function(wtSmart) {
    wtSmart.extension.push(function(wtSmart) {
        var name_ = 'extension_example_3';
        var version_ = '1.0.0';

        var trigger_ = function(config) {
            if (config.mode === 'page' && config.type === 'before') {
                var browserLang = "";
                if (typeof(navigator.language) === "string") {
                    browserLang = navigator.language.substring(0,2);
                }
                else if (typeof(navigator.userLanguage) === "string") {
                    browserLang = navigator.userLanguage.substring(0,2);
                }

                var pageName = wtSmart.page.data.get().name;
                wtSmart.page.data.add(browserLang + '.' + pageName);
            }
        };

        return {
            name: name_,
            version: version_,
            trigger: trigger_
        };
    });
});

JS