---
title: "Custom Extensions"
slug: "custom-extensions"
updated: 2025-03-27T10:47:53Z
published: 2025-03-27T10:47:53Z
canonical: "docs.mapp.com/custom-extensions"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

> [!WARNING]
> **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.

```javascript
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:

| Property | Data Type | Description | Example |
| --- | --- | --- | --- |
| `mode` | string | Type of request | `page`, `media`, etc. |
| `type` | string | When the trigger is fired | `before`, `after` |
| `counter` | number | Number of requests of this type | `1` |
| `data` | object | Data that will be added to the tracking request | `{ ba: 'foo.bar' }` |
| `instance` | wtSmart object | The Smart Pixel object | `wtSmart` |
| `utils` | wtSmart.utils | Utility functions | `utils.cookie` |

---

## **4 Methods and Properties**

InfoStatus

Retrieves the name of the extension.

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

```javascript
// 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:

```javascript
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.

```javascript
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.

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