# 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:

```js
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jentis.com/data-capture/web-tracking-setup/set-up-gtm-data-layer/enhanced-e-commerce-bridge-via-jentis-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.