Customizations

Customization JS

Principles

When you first time click on Customization JS, a JavaScript file skeleton is generated. Please consult XTagManager API to get all details about the way to use it, but also about the powerful helpers proposed for inline JavaScript in Configuration NAME columns.

 

Libraries

XTagManager API uses a set of libraries. You can create your own ones, and include them in the Customization JS as following:

/*#include std_doc.js*/

Inclusions are recursive, so that you can include a library in a library included in a library... finally included in the Customization JS.

By default, a Library is searched in the same folder than Customization JS, and if they don’t exist, in the Release Path or the Debug Path, depending on Minify activation (checked=Release).

When Minify is checked and a library is only present in Debug Path, the Debug version is used and minified on the fly. Libraries taken from Release Path are supposed to be already minified.

 

Tips & Tricks

Perimeters
Two Steps Registration Forms

Use Case

A registration form is made of two steps (register, success) without URL change, just an Ajax refresh. Both must be distinguished with two different page names.

Solution

In Customization JS, use stat_trigger.init for these pages (if not already done for all pages), and use the fnChanged parameter with a function spying a content no longer present or visible in the second step. Fall back into stat_trigger.urlChanged in any other case:

stat_trigger.init(null,

function()

{

    if (window.location.pathname==='/identity/userregistrationwork' && !stat_trigger.regdone)

    {

        stat_trigger.regdone=!document.querySelector('div.uniqueID-txt');

        return stat_trigger.regdone;

    }

    if (window.location.pathname==='/identity/IDMSSetPassword' && !stat_trigger.pwddone)

    {

        stat_trigger.pwddone=!document.getElementById('intPwdId');

        return stat_trigger.pwddone;

    }   

    return stat_trigger.urlChanged();

}

);

(function(){addPageEvent(document,'DOMContentLoaded',function(){pageStatInjection();});})();

Then, in Perimeters, differentiate both steps with this status:

PATH ROOT

LEVEL 2

PAGE NAME, EXCLUSION OR PATTERN

/userregistrationwork

115

userregistrationwork<js:(stat_trigger.regdone?'-success':'')>

/idp

115

 

/IDMSSetPassword

115

IDMSSetPassword<js:(stat_trigger.pwddone? '-success':'')>

*

115

 

 

Clicks & Events
Load Synchronization

Use Case

Some CTAs are still not available once page Load event triggered, so that they are missed by injection process.

Solution

In Customization JS, call stat_link.waitRefresh in activateOnLoad, and when they are too much delayed, do it from stat_trigger.doWhen (based on loader nodes presence).

    this.activateOnLoad = function(){

        if (window.location.pathname.indexOf('/products/')>0) {

            var fnLoader=function(){

                var a=document.querySelectorAll('.pd-tabs__preloader');

                return (a&&a.length>0);

            };

            stat_trigger.doWhen(function(){stat_link.waitRefresh('a,button');},

                                function(){return !fnLoader();},

                                fnLoader);

        }

        else {

            stat_link.waitRefresh('a,button');

        }

    };

 

Search

 

Mirroring JS

Principles

When you first time click on Mirroring JS, a JavaScript file skeleton is generated. Please consult GA Plugin namespace to get all details about the way to use it, but also about the powerful helpers proposed to enrich the Mirroring accordingly to your needs.

Libraries

By default, the generated Mirroring JS includes the GA Plugin and proposes some entry points to define your mirroring specificities. If you want applying them to several Configurations, copy this JS file in the Debug Path of your installation, give it a generic name, then use it by inclusion in your Customization JS:

/*#include std_ga.js*/

 


Copyright © 2020, Denis Rousseau - XTagManager