Event tracking

Event tracking automatically tracks clicks on internal or external links.
Use the code generator to create individual code that you can then integrate directly into the website.

Configuration

Type

Event tracking lets you track events or clicks on any html element. Event tracking requires that JavaScript is active in the visitor’s browser. If the visitor has not activated JavaScript , the event on your website will be executed normally, i.e. your website’s functionality will not be affected by event tracking.

Possible settings for event tracking are standard, link, or advanced.

• standard: Tracks only html links that are explicitly labeled in the page source code. The default attribute used is "name"; the value given is used as event name in Intelligence.

• link: Automatically tracks all html links on a page with the target URL being used as event name in Intelligence.

• advanced: Enables tracking of all possible elements on the page via a specified selector, incl. buttons and other elements that are not specifically marked as links via the href tag.

Attribute

If you already use the "data-name" attribute for other functions, you specify any other attribute to generate the name of an event. It is defined in the configuration with the property "attribute".

Advanced

Used to specify the event tracking selectors when advanced event tracking is enabled.

• selector: Used to specify the element to be tracked with <tag>[<attribute>] (e.g. button[name]).

• eventName: Used as event name in Intelligence. It is possible to use a fixed value as well as a value from an attribute. Attributes need to be marked with "${}". Values can also be concatenated (e.g. ${name}_fix_${class}). Default value for event name is "noEventNameGiven".

ShadowRoot

If you use web components (shadow DOM elements) on your website where you want to enable event tracking, you can do this via the 'shadowRoot' property. For this you can specify all CSS selectors of your shadow DOM elements.

Parameter

You can define an object with additional attributes to extend the current event name with event parameters. The key in this object is the ID for the event parameter, and the value is the attribute, which contains the additional value for the event parameter. The inheritance of the attributes is supported.

<div data-group="list data">
    <ul data-ul="ul data">
        <li data-li="li data 1">
            <div data-div="div data 1">
                <a href="//www.domain.com/link/to/an/other/page.html">Link</a>
            </div>
        </li>
    </ul>
</div>

wtSmart.extension.action.config({
    parameter: {
        20: 'data-div',
        21: 'data-li',
        22: 'data-ul',
        23: 'data-group'
    }
});

Extend

Use this parameter if you want to include URL parameters in your link URL names as displayed in the analysis. The pixel checks any parameter listed here and if it detects it in a link URL, it will extend the event name (link URL) with the specified parameter. This can only be used when the tracking type is set to "links".

WithHash

Use this parameter if you want to use a hash URL as an event name. If this is not set to true, the pixel will ignore the hash in the URL when generating the event name. This can only be used when the tracking type is set to "links".

Replace

Note that no parameters are accepted in "extend" whose values differ for individual visitors, such as a session ID. If these values are not appended via the parameter but appear in the middle of the URL, or, as usual with Java servers, a ";" is appended to the file name, you have the option of filtering out these additions from the link target with a regular expression.

A typical URL for a Java server might appear as follows:

http://www.webseite.com/teaser_a.htm;jsessionid=1CBE7F79EF7D681569A3BF30DD0C5D72.jp64&page_id=1

To exclude this session ID in the tool from the event ID, filter it out of the URL. To do this, enter a regular expression that places the session and the parameter in the link. You can also enter a string to replace the located term.

wtSmart.extension.action.config({
    replace: [{
        pattern: /;jsessionid=[a-zA-Z0-9\.]+[#|?|&]?/g,
        replacement: '?'
    }]
});

Ignore

Use the property "ignore" to define a regular expression that excludes the individual links from being tracked. This is useful, for example, for anchor and JavaScript links. They appear in the tool as, for example, an event with the name "javascript(void)" and do not allow any meaningful analyses, as it is unclear which click was responsible.

Delay

In order to track all events that occur on a page, it is necessary to delay the user navigating to the next page. In order to do so, the tracking pixel will delay the click event and thus delay the user from leaving the current page for a very short time. This feature is deactivated by default. It can be activated via the property "delay". The default delay time is set to 200 ms (milliseconds). In case you deem 200 ms too much/too little you can adjust the delay via the parameter "delayDuration". We recommend a delay of 200-500 milliseconds.

In order to evaluate if the link will not leave the current page the following factors are taken into consideration:

• The "href" attribute of the link is undefined or empty.

• The link is a JavaScript link (href="'#'") or an anchor (href="#").

• The link has the attribute "target=_blank", which will be opened in a new tag.

Alternatively, you can use the property "noDelayAttribute" in order to explicitly tag internal links. If this property is set, all links on the current page are considered external links.

Thus, you should tag all links that will remain on the current page with the defined attribute, e.g., sliders, tabs, anchors, Javascript events, etc.

Please keep in mind: Only activate this feature if you require very high data quality for your event tracking. This feature artificially delays the website when a user clicks on a link that would leave the current page.

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

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

/**
 * @param {{
 *      [type="link"]: string,
 *      [attribute="data-name"]: string,
 *      [advanced=[]]: {selector: string, eventName: string}[]
 *      [shadowRoot=[]]: string[],
 *      [parameter={}]: {[number]: string},
 *      [extend=[]]: string[],
 *      [replace=[]]: {
 *          pattern: RegExp,
 *          replacement: string
 *      }[],
 *      [ignore=/^(?:)$/]: RegExp,
 *      [withHash=false]: boolean,
 *      [delay=false]: boolean,
 *      [delayDuration=200]: number,
 *      [noDelayAttribute=""]: string
 * }} [config]
 *
 * @returns {object}
 */
wtSmart.extension.action.config(config);

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

wtSmart.extension.action.activate();

wtSmart.extension.action.deactivate();

wtSmart.extension.action.update();

<div data-group="list data">
    <ul data-ul-parent="parent ul data">
        <li data-li-parent="parent li data 1">
            <div data-div-parent="parent div data 1">
                <a href="http://www.knigge.de/?wt_mc=newsletter.2015.09.01.messe1&pageType=messe1#messe1" data-wt="test 1">Link</a>
            </div>
        </li>
        <li data-li-parent="parent li data 2">
            <div data-div-parent="parent div data 2" data-foo="foo.bar">
                <a href="http://www.knigge.de/?wt_mc=newsletter.2015.09.01.messe1&pageType=messe2#messe2" data-wt="test 2">Link</a>
            </div>
        </li>
        <li data-li-parent="parent li data 3">
            <div data-div-parent="parent div data 3">
                <a href="http://www.knigge.de/?wt_mc=newsletter.2015.09.01.messe1&pageType=messe3#messe3" data-wt="test 3">Link</a>
            </div>
        </li>
    </ul>
</div>

// is action tracking activated
var isActivated = wtSmart.extension.action.isActivated();

// set action tracking config
wtSmart.extension.action.config({
    type: 'link',
    attribute: 'data-wt',
    parameter: {
        2: 'data-wt',
        8: 'href',
        9: 'data-foo',
        20: 'data-div-parent',
        21: 'data-li-parent',
        22: 'data-ul-parent',
        23: 'data-group'
    },
    extend: ['pageId', 'pageType'],
    replace: [{
        pattern: new RegExp(';jsessionid=[a-zA-Z0-9\\.]+[#|?|&]?', 'g'),
        replacement: '?'
    }],
    ignore: new RegExp('^javascript'),
    withHash: true
});

// get action tracking config
var actionConfig = wtSmart.extension.action.config();

// activate action tracking
wtSmart.extension.action.activate();

// deactivate action tracking
wtSmart.extension.action.deactivate();

// initialize new shadow DOM elements on the page
wtSmart.extension.action.update();

Code Generator

Use the code generator to create individual code that you can then integrate directly into the website.