With the Teaser Tracking plugin, Mapp Intelligence enables you to perform extensive analyses of your onsite teasers.

Through the integration of this plugin, teaser views and clicks are recorded automatically on your website. What's more, by configuring other parameters, such as html flagging for the teaser, you can describe it in detail and evaluate it together with your web analytics data.

To analyze the effect of an individual teaser, engagement and conversions are calculated in addition to views and clicks. The engagement measurement for a special teaser is initiated as soon as the teaser is clicked. The engagement value is increased by 1 for every page opened following a teaser click. This continues until a web page target is reached or the user ends their website visit.

Values recorded by the plugin are recorded for each specific teaser – either with aggregated daily values or, if available, in Live Analytics for the configurable periods. If other details are required, you can enter these yourself as custom event parameters.

Once the parameters have been activated they will need to be configured for tracking. This is done in the Mapp Q3 tool under "Configuration > Custom Parameters > Event Parameters". Create one new parameter for each teaser and then select the predefined configuration for each one for the teaser tracking.

The following list shows all recordable parameters and their predefined IDs:

  • Event parameter 520: Teaser - Placement
  • Event parameter 521: Teaser - Name
  • Event parameter 523: Teaser - Views
  • Event parameter 524: Teaser - Clicks
  • Event parameter 525: Teaser - Page Engagement
  • Event parameter 526: Teaser - Content
  • Event parameter 527: Teaser - Type
  • Event parameter 528: Teaser - Conversions

Browser support

The teaser-tracking plugin uses "querySelector" to find the configured teasers. This method is supported by the following browsers:

  • Internet Explorer version 8 or higher
  • Microsoft Edge
  • Firefox version 3.5 or higher
  • Google Chrome
  • Safari version 3 or higher
  • Opera version 10 or higher

Methods and properties

name

Get the name of the extension.

/**
 * @type {string}
 */
wtSmart.extension.teaser_tracking.name;
JS

version

Get the version of the extension.

/**
 * @type {string}
 */
wtSmart.extension.teaser_tracking.version;
JS

config

Set and get the current configuration of the extension.

  • viewPercent: Specify what percentage of the height and width of a teaser element must be visible in a user's viewport in order to recognize the teaser as "viewed". By default, teasers are sent when the HTML element is 100% visible in the user's viewport.
  • viewTime: Specify how long a teaser element has to be visible in the user's viewport in order to recognize the teaser as "viewed". By default, teasers are sent when the HTML element is visible in the user's viewport for 1000 milliseconds.
  • attribution: You can choose the attribution model, which will be used in connection of teasers to conversions or website goals.
    • first: Only the first teaser will be connected to the conversion or website goal.
    • last: Only the last teaser will be connected to the conversion or website goal.
    • all: All teasers will be connected to the conversion or website goal.
  • maxSendTeasers: Request limiting.
    • session: Define a limit for sending teasers within the browser session. By default, a maximum of 10000 teasers is permitted during the browser session. Enter "-1" for the value to enable capturing all teasers within a browser session.
    • page: Define a limit for sending teasers on a single page. By default, a maximum of 1000 teasers is permitted on a single page. Enter "-1" for the value to enable capturing all teasers on a page.
  • extendClickSelector: Here you can define an additional CSS selector which extends the list of clickable teaser elements within the teaser. By default, all links, areas, buttons, and input fields of type "submit" within the teaser element are marked for teaser click tracking. This configuration is related to each teaser you add via "wtstp_ttv2.push".
  • maxCookieSize: Here you can define the maximum size of the teaser tracking cookie. By default, 4000 characters are used. If you define "-1", no more teaser cookies will be set, which also deactivates the teaser conversion and engagement tracking.
  • clearConversions: Determines whether the cookie used to save the teaser information should be deleted following a successful conversion.
  • autoEngagements: Used to determine whether the teaser engagement information should be sent manually or automatically. If it is to be sent manually, the "wtstp_teaserEngagements" variable must be set on the desired pages.
/**
 * @param {{
 *      [viewPercent=100]: number,
 *      [viewTime=1000]: number,
 *      [attribution="all"]: string,
 *      [maxSendTeasers]: {
 *          [session=10000]: number,
 *          [page=1000]: number
 *      },
 *      [extendClickSelector='']: string,
 *      [maxCookieSize=4000]: number,
 *      [clearConversions=true]: boolean,
 *      [autoEngagements=true]: boolean
 * }} [config]
 *
 * @returns {object}
 */
wtSmart.extension.teaser_tracking.config(config);
JS

isActivated

Get the status, if the extension is enabled.

/**
 * @returns {boolean}
 */
wtSmart.extension.teaser_tracking.isActivated();
JS

activate

Activate the extension.

wtSmart.extension.teaser_tracking.activate();
JS

deactivate

Deactivate the extension.

wtSmart.extension.teaser_tracking.deactivate();
JS

update

Recalculation of the view port for dynamic elements.

wtSmart.extension.teaser_tracking.update();
JS

Example

// is teaser tracking activated
var isActivated = wtSmart.extension.teaser_tracking.isActivated();
 
// set teaser tracking config
wtSmart.extension.teaser_tracking.config({
    viewPercent: 100,
    viewTime: 1000,
    attribution: 'all',
    maxSendTeasers: {
        session: 10000,
        page: 1000
    },
    extendClickSelector: '.clickable',
    maxCookieSize: 4000,
    clearConversions: true,
    autoEngagements: true
});
 
// activate teaser tracking
wtSmart.extension.teaser_tracking.activate();
 
// recalculation of the view port
wtSmart.extension.teaser_tracking.update();
 
// deactivate teaser tracking
wtSmart.extension.teaser_tracking.deactivate();
JS

Initialisation of the teaser elements

To flag the teaser elements you want to measure, add the configuration to the "wtstp_ttv2" array. The configuration for a teaser element is divided into "selector", "exclude", "data" and "conversion".

Under "selector", enter the teaser element to be measured. You can either pass this directly as an HTML element or pass the respective CSS selector for the element. All links, areas, buttons, and input fields of type "submit" within one teaser element will be marked for teaser click tracking.

If your teaser element is inside a shadow DOM element, specify the CSS selector of the shadow DOM element. If you have defined a CSS selector as the "selector", it will refer to the "shadowRoot" selector you have defined.

Within "exclude" it's possible to define Links and Buttons, which should not be configured for teaser click tracking. You can set the HTML Element directly or the CSS selector of the element.

Within "extend" it's possible to define an additional CSS selector which extends the list of clickable teaser elements within the teaser. By default, all links, areas, buttons, and input fields of type "submit" within the teaser element are marked for teaser click tracking. This configuration overwrites the global configuration "extendClickSelector" and only refers to the currently added teaser.

Under "data", enter the teaser information for the teaser element. As mandatory information, pass the teaser name "name" or the teaser placement "rank" here. You can also pass additional teaser information here. This would be:

  • content: Teaser - Content
  • variant: Teaser - Variant

You can define with "conversion" when a teaser should be connected to a conversion or website goal. Following configuration can be set:

  • type: Conversion Type (default - "product")
    • view: Teaser should be connected to conversion, if user saw the teaser.
    • click: Teaser should be connected to conversion, if user clicked the teaser.
    • product: Teaser should be connected to conversion, if user clicked the teaser and product is bought with the same name as the teaser name.
  • goal: Conversion Goal (default - "both")
    • order: Teaser should only be connected to conversion.
    • goal: Teaser should only be connected to website goal.
    • both: Teaser should be connected to conversion or website goal.
  • value: Conversion Value (default - conversion value is the same as the product cost)
    • percentage of order value: Percentage of order value (i.e. 5%).
    • fixed value: Fixed value (i.e. 15).
window.wtstp_ttv2 = window.wtstp_ttv2 || [];
window.wtstp_ttv2.push(
    {
        selector: "li.item:nth-of-type(2)",
        shadowRoot: "#women-collection",
        exclude: [
            "li.item:nth-of-type(2) a:last-child"
        ],
        selector: "span",
        data: {
            name: "New Women Collection",
            rank: "Main Page Banner",
            content: "Women Collection",
            variant: "campaign"
        },
        conversion: {
            type: "view", // view, click, product | default > product
            goal: "order", // order, goal, both | default > both
            value: "10%" // x% > of order value, x > fix value | default > product price
        }
    }
);
JS

Additional Functionality

View tracking with dynamic teaser fade-in

Teasers whose visibility is controlled via a "zIndex", a rotation of different teaser elements or using some other dynamic method, must also be flagged if they are to be displayed (regardless of whether they are in the visible monitor area or not).

To do this the "seen" parameter must be provided in the "data" configuration object. It merely controls type recognition of the teaser during data entry/recording. View Tracking will be deactivated for this Teaser. Click-, Engagement- and Conversion-Tracking will still be activated.

window.wtstp_ttv2 = window.wtstp_ttv2 || [];
window.wtstp_ttv2.push(
    {
        selector: "li.item:nth-of-type(2)",
        exclude: [
            "li.item:nth-of-type(2) a:last-child"
        ],
        data: {
            name: "New Women Collection",
            rank: "Main Page Banner",
            content: "Women Collection",
            variant: "campaign",
            seen: true
        },
        conversion: {
            type: "view", // view, click, product | default > product
            goal: "order", // order, goal, both | default > both
            value: "10%" // x% > of order value, x > fix value | default > product price
        }
    }
);
JS

View tracking

The visibility of teasers rotated on a page or whose visibility is controlled with the help of a "zIndex" cannot be recognized automatically. You can, however, record the views using manual view tracking.

If you use a "zIndex" to flag teaser visibility, you will need to inform the plugin when a teaser is viewed. With this type, the teaser is only flagged with click, engagement, and conversion tracking.

If you want to manually track the teaser views, call the following method with the teaser configuration:

window.wtstp_ttv2 = window.wtstp_ttv2 || [];
window.wtstp_ttv2.push(
    [
        "view",
        {
            name: "New Women Collection",
            rank: "Main Page Banner",
            content: "Women Collection",
            variant: "campaign"
        }
    ]
);
JS

If the teaser should be connected to the conversion if it was viewed, use the parameter "cType".

window.wtstp_ttv2 = window.wtstp_ttv2 || [];
window.wtstp_ttv2.push(
    [
        "view",
        {
            name: "New Women Collection",
            rank: "Main Page Banner",
            content: "Women Collection",
            variant: "campaign",
            cType: "view"
        }
    ]
);
JS

Via tha parameter "cGoal" and "cValue" can be configured which goal should lead to conversion and which value should be tracked.

window.wtstp_ttv2 = window.wtstp_ttv2 || [];
window.wtstp_ttv2.push(
    [
        "view",
        {
            name: "New Women Collection",
            rank: "Main Page Banner",
            content: "Women Collection",
            variant: "campaign",
            cType: "view",
            cGoal: "goal",
            cValue: "15"
        }
    ]
);
JS

Adjustment of the conversion pages

With the "wtstpt_easerConversions" variable you can define further conversion targets in addition to your order confirmation page. On these pages the "wtstp_teaserConversions" variable must be set in the source code.

<script type="text/javascript">
    var wtstp_teaserConversions = true;
</script>
XML

Adjustment of the engagement pages

If you wish to measure engagement manually you will need to set the variable "wtstp_teaserEngagements" on the respective engagement pages.

<script type="text/javascript">
    var wtstp_teaserEngagements = true;
</script>
XML