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;
}
};
});
});
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;
version
Get the version of the extension.
/**
* @type {string}
*/
wtSmart.extension.get()['extension_name'].version;
isActivated
Get the status, if the extension is enabled (if it is implemented).
/**
* @returns {boolean}
*/
wtSmart.extension.get()['extension_name'].isActivated();
activate
Activate the extension (if it is implemented).
wtSmart.extension.get()['extension_name'].activate();
deactivate
Deactivate the extension (if it is implemented).
wtSmart.extension.get()['extension_name'].deactivate();
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_
};
});
});
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_
};
});
});
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_
};
});
});