Connecting to your Websites Datalayer

The first step is to get JENTIS to listen to the Datalayer on the website. We will create the integration in a way that will check all existing events in a window.dataLayer array and later react to all new pushes, as the website is loaded and users interact with it's triggering events.

The configuration needs some conceptual decision from you:

• Which events to listen to: all events, or just some specific event names?

• Are those event names case sensitive?

• What is the datalayers name?

This information should be quite easy to define. In our example, we will look for the “gtm.init” event, which is a case-sensitive definition. The datalayer is named dataLayer as in all default GTM installations.

This is the code to be copy-pasted in a JENTIS State. Navigate for this setup to the “States” in your DCP:

(navigate to "Server Tag Manager": States and click on the “Add New State”-Button)

Paste the following code into the “Javascript Code” input box:

function(initState){
    //define events to listen to as single String values in array
    //keep empty to listen to all events
    var RELEVANT_EVENTS = ["gtm.init"]; 
    var IGNORE_CASE     = true;
    var DATALAYER_NAME  = "dataLayer";

    var dl = window[DATALAYER_NAME] || [];
    if(Array.isArray(dl) && dl.length && dl.length > 0) {
        dl.forEach(arrayItem => {
            initiateRelevantStates(arrayItem.event, arrayItem);
        })
    }

    var originalPush = dl.push;
    dl.push = function(args){
        originalPush.call(window[DATALAYER_NAME], args);
        initiateRelevantStates(args.event, args);
    }
    window[DATALAYER_NAME] = dl;

    function initiateRelevantStates(event_name, event_object){
        if(Array.isArray(RELEVANT_EVENTS) && 
           RELEVANT_EVENTS.length > 0 &&
           typeof event_name != "undefined"){

            if(IGNORE_CASE){
                event_name = event_name.toLowerCase();
                for(i = 0; i < RELEVANT_EVENTS.length; i++)
                    RELEVANT_EVENTS[i] = RELEVANT_EVENTS[i].toLowerCase();
        }
        if(RELEVANT_EVENTS.includes(event_name)){
            initState(event_object);
        } 
    } else if(typeof event_name != "undefined")
        initState(event_object);
    }
}

Every time the website's application pushes a “gtm.init” event to the data layer, a JENTIS State is observed. Thus, all triggers connected to this state and their conditions are checked, which is exactly what should be configured next.

Please note that in the code, the initialization function call initState() a event_object Property is submitted, containing the datalayer's object that was pushed with it {event:"gtm.init",property_key:"property_value"}.

This gives consistent and reliable information on when this state was observed (regardless of whether this event will be observed when it is submitted via push function or if it was already in the data layer array before JENTIS was initialized on your website). As we will see in the next steps, this will become important.