Enhanced E-Commerce Bridge via JENTIS State

Many websites use the Google Tag Manager's window.dataLayer to manage tracking and events. With JENTIS, it's possible to integrate seamlessly into this existing infrastructure. This guide outlines how to connect JENTIS to the dataLayer using a JENTIS State, enabling reactive tracking based on dataLayer.push() events.

💡 Product Note: JENTIS can automatically react to asynchronous data layer pushes (like gtm.init), enabling detailed tracking and tag activation based on external systems like GTM or other frontend tools.

Overview

To receive and respond to events from your website's dataLayer, follow these steps:

1. Connect JENTIS to the dataLayer (via a State)

2. Create variables that read from dataLayer objects

3. Create triggers and tags that activate based on those variables

Step 1: Connect JENTIS to the dataLayer

We'll first configure a JENTIS State that listens to events in the global window.dataLayer. This ensures JENTIS observes events both retrospectively (already pushed items) and in real time (new push() calls).

Example: We want to react to event: "gtm.init" and track associated values like event_category.

Setup Instructions

1. Go to JENTIS Tag Manager > States

2. Click on "+ Add New State"

3. In the "JavaScript Code" field, paste the following code:

function(initState){
    var RELEVANT_EVENTS = ["gtm.init"];
    var IGNORE_CASE     = true;
    var DATALAYER_NAME  = "dataLayer";
    var dl = window[DATALAYER_NAME] || [];

    if(Array.isArray(dl) && 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(let 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);
        }
    }
}

Step 2: Create Variables

To use values from the dataLayer, you need to create variables.

Example: Read event_category

1. Go to JENTIS Tag Manager > Variables

2. Click "+ Add New Variable"

3. Select "GTM Data Layer Value" as the template

4. Enter the key: event_category

🔁 Occurrence Pointer:

• first: first match in the array

• last: most recent push

• state context: safest choice to refer to the data of the currently observed state

Step 3: Create a Trigger

1. Go to JENTIS Tag Manager > Triggers

2. Click "+ Add New Trigger"

3. Choose the JENTIS State you created

4. Optionally, add a condition (e.g., Event Category equals newsletter)

Step 4: Create a Tag

Create a tag that uses the variable and is triggered by the above trigger.

Example:

• Tool: Google Analytics 4

• Template: Event

• Trigger: previously created trigger

• Parameters:

  • event_category: reference the variable you created

Once done, preview and publish the setup.

Summary

This approach (Option A) connects JENTIS to existing GTM-style dataLayer pushes using a state. It ensures full compatibility with asynchronous pushes and provides a flexible, scalable way to map existing tracking setups into JENTIS. For even deeper integration, consider Option B, which uses code snippets directly within JENTIS instead of custom states.