Event tracking automatically tracks clicks on internal or external links.

Type

The "link" setting uses the link target URL of all links as the action tracking name. It is not necessary to change the link.

If the "standard" setting is selected, only the links that are explicitly "marked" on the page will be tracked on click. By default, the "data-name" attribute is used to mark the desired links. Only links containing the data-name attribute will be tracked on click. In that case, the value of the data-name attribute is used as the value of the event (instead of the link target URL when using "link").

Attribute

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

ShadowRoot

If you use web components (shadow DOM elements) on your website where you want to enable action 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 action name with event parameters. The key in this object is the ID for the action 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>
XML 
wtSmart.extension.action.config({
    parameter: {
        20: 'data-div',
        21: 'data-li',
        22: 'data-ul',
        23: 'data-group'
    }
});
JS

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 action 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: '?'
    }]
});
JS

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 action 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 thusly 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="javascript:") 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.

Thusly you should tag all links that will remain on the current page with the defined attribute, e.g. slider, tabs, anchor, javascript actions, etc.

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

Methods and properties

name

Get the name of the extension.

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

version

Get the version of the extension.

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

config

Set and get the current configuration of the extension.

  • type: Possible settings for action tracking are "link" and "standard".
  • attribute: The attribute is used for this purpose to enter the desired name.
  • shadowRoot: Specify the CSS selectors of your shadow DOM elements to be tracked.
  • parameter: Define here additionally action parameters.
  • extend: Enter all URL parameters to be used for the event name.
  • replace: You have the option of filtering out parts from the link target.
  • ignore: You can exclude links from tracking by using this property.
  • withHash: The URL hash is used for the event name.
  • 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 thusly delay the user from leaving the current page for a very short time.
  • delayDuration: 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 property. We recommend a delay of 200-500 milliseconds.
  • noDelayAttribute: Thusly you should tag all links that will remain on the current page with the defined attribute.


/**
 * @param {{
 *      [type="link"]: string,
 *      [attribute="data-name"]: 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);
JS

isActivated

Get the status, if the extension is enabled.

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

activate

Activate the extension.

wtSmart.extension.action.activate();
JS

deactivate

Deactivate the extension.

wtSmart.extension.action.deactivate();
JS

update

The links contained in page content reloaded by Ajax (e.g. when showing layers) can also be marked for automatic event tracking. To do this, call the "update" method as soon as new content is reloaded.

wtSmart.extension.action.update();
JS

Example

<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>
XML 
// 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 link on the page
wtSmart.extension.action.update();
JS