Skip to main content
Skip table of contents

Listen to Datalayer Events

With the generic DataLayer () that is used on many sites there is an easy connection to JENTIS. Within this guide we will look into how to create that link.

Process Outline

To get JENTIS Tag Manager to receive the events from your websites DataLayer we must create a JENTIS State. Next we will also go ahead and make practical use of this. Creating an event in a tool: Google Analytics events based on events pushed to the DataLayer. The steps are:

  • connect JTM to the websites DataLayer

  • create variables that are connected to the DataLayer

  • create tags and trigger based on previous steps

Connecting to your Websites DataLayer

Now the first part is to get JENTIS listening to the DataLayer on the website. We will make the integration in a fashion that will check all existing events in a window.dataLayer object and later react to all new pushes, as the website is loaded and interacted with.

The configuration needs some conceptional decision from you:

  • on which events to listen to: all events, or just some special event-names?

  • are those events case sensitive?

  • what is the dataLayers name?

That should be quite easy to define. In our example we will look for the “gtm.init” event, that is a case sensitive definition. The DataLayer is named as in all default GTM installations: dataLayer.

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

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

image-1675777464680.png

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

CODE
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);
        })
    }

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

    function initiateRelevantStates(event_name){
        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();
        } else {

        }
    } else if(typeof event_name != "undefined")
        initState();
    }
}

Now every time a “gtm.init” event is pushed to the DataLayer by the websites application a JENTIS State is created. Thus activating all triggers connected to this state and their conditions are checked. Which is exactly what should be configured next.

Create Variables, Triggers and Tags

Now to actually react to this new states in JENTIS tracking we must have the configuration that is activated based on our requirements. This requires the variables (values), triggers (conditions) and the actual “data to be transmitted”-configurations (tags). Here are those steps in detail.

Create Variables

Often when we activate states based on DataLayer-events we also want to read something from the same source (dataLayer). That is where we need to create a JTM variable that reads those values.

Navigate to the Variables section in your JTM and create a new element (click the “Add New Variable”-Icon).

image-1675777698529.png

In this selection chose “GTM data layer value” as the variable template type.

The value to be read from the dataLayer is for example a parameter key “event_category”:

image-1675777738926.png

This will retrieve the value of “event_category” that was pushed to the dataLayer object accordingly in this example:

CODE
window.dataLayer.push({
  event:"gtm.init",
  event_category:"category_value"
});

 This is just for the visual example. Our JTM variable would report the value “category_value” from this according dataLayer.push.

Create a Trigger

To actually activate a tag in JTM a trigger is mandatory. So with our new data-route we created so far (listening to DataLayer-events) we must next put in the conditions.

(navigate to the Server Tag Manager: Trigger section and create a new object clicking the “Add New Trigger” button)

image-1687262485694.png

In the trigger configuration you must select the JENTIS State we previously created. Also add a condition if required, ie. looking for a value that is defined in the previously created variable “Event Category”.

Create a Tag

The final step in this process is now to create a tag. That will be activated when the previous triggers condition are met and that is based on the DataLayer events. So it is activated when the according dataLayer push appears and the triggers condition are met.

In that tag we should also go ahead and use the variable “Event Category” to put it to use.

Navigate to the Server Tag Manager: Tags and create a new element clicking on the “+”-Icon.

In our example we will use a Google Analytics tag with this configuration:

  • select the Tool from your JTM account (Google Analytics)

  • select a template: Event

  • select a trigger: the previously created trigger that is connected to our JENTIS State

Now also make sure to reference all variables that your tag will need, for example the one we created in the previous step “Event Category”. Please put it in the according tag in place.

That is all from the configuration and the next step is to preview and publish your new settings.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.