Custom Extensions

1 Overview

This page explains how to create and use custom extensions for the Smart Pixel. These extensions allow you to integrate JavaScript logic to manipulate or enhance your tracking setup. Unlike built-in extensions, custom extensions are fully configurable and provide maximum flexibility.

Note: This extension type is not part of the default Smart Pixel configuration. It is intended for developers who want to extend or customize tracking behavior.

2 How to Create Your 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.

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

3 The Trigger Method

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

4 Methods and Properties

// Get name and version
wtSmart.extension.get()['extension_name'].name;
wtSmart.extension.get()['extension_name'].version;

// Check if extension is active
wtSmart.extension.get()['extension_name'].isActivated();

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

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

5 Examples

5.1 Load JavaScript File After First Page Request

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

5.2 Capture Clicked Link URL

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

5.3 Add Browser Language to Page Name

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