Custom Extensions

The Smart Pixel offers powerful flexibility by enabling you to integrate custom extensions. Depending on your needs, these extensions can either be directly embedded within the pixel or added as external JavaScript files.

By leveraging extensions, you can seamlessly integrate third-party tracking scripts, enrich Mapp Intelligence parameters, or modify tracking data before it is sent. This allows for advanced customization and ensures your tracking setup aligns perfectly with your requirements.

Extensions provide full access to Mapp Intelligence parameters and functions, simplifying your workflows and empowering you to achieve more with less effort.

How to Create Your Extension

Structure of an Extension

Creating a custom extension is straightforward. An extension is essentially a JavaScript function that contains the code you need. The function must return an object with specific properties and methods to ensure proper functionality:

• name: The name of the extension.

• version: The version of the extension.

• trigger: A method that automatically executes before and after each tracking request.

Additionally, you can implement optional methods to manage the activation status of your extension:

• isActivated: Retrieves whether the extension is enabled.

• activate: Enables the extension.

• deactivate: Disables the extension.

Here is an example of how to structure your 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;
            }
        };
    });
});

The ‘Trigger’ Method

The trigger method is called with a configuration object that includes the following properties:

Methods and Properties

name

Retrieves the name of the extension.

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

version

Retrieves the version of the extension.

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

isActivated

Checks if the extension is currently active.

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

activate

Activates the extension.

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

deactivate

Deactivates the extension.

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

Examples

Example 1: Loading a JavaScript File

This example demonstrates how to load a JavaScript file 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_
        };
    });
});

Example 2: Tracking Link Clicks

The following example marks each link on the page. When a link is clicked, its URL is passed to the tracking system.

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_
        };
    });
});

Example 3: Adding Browser Language

This example extends the page name with the browser language before 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_
        };
    });
});