Use Cases for Client Side Variables

Client-side variables in JENTIS are a highly capable feature that allows you to access any frontend information needed for tracking purposes. This includes clicked elements, HTML tag attributes, or dataLayer parameter values. Detailed explanations of some examples are provided below.

JENTIS Data Layer Variable

Select this variable type to read a value that is pushed via _jts.push API to the JENTIS Data Layer: Push Data.

Following the fundamental JENTIS data model syntax you have a structure of a document (object) and its property (parameter key).\

Example

_jts.push({
  "track"   : "product",
  "name"    : "product A",
  "my_prop" : 42
});
_jts.push({
  "track"   : "product",
  "name"    : "product B",
  "my_prop" : 0
});

To read the value of my_prop as of this example the required configuration is:

• Property key: “my_prop”

• Document name: “product”

• Occurrence pointer: first / last

To make the difference between “Occurrence pointer” and “occurrence pointer” clear, we have chosen this example, where the same document (“product”) has multiple entries (product A and product B by name). If you select “first,” the Occurrence pointer will control the return value to get the first instance pushed (returns 42). In contrast, the occurrence pointer value “last” will result in a return value of “0” in this example.

Read more on such data layer customizations in the dedicated guide here Custom Data Layer Definitions .

GTM Data Layer Parameter

The global dataLayer is a generic object structure that holds information on many websites. You can access these with a client-side variable of “GTM Data Layer Value” type.

Example

dataLayer.push({
  "event"   : "a",
  "my_prop" : 42
})
dataLayer.push({
  "event"   : "b",
  "my_prop" : 0
});

To read the value of my_prop in this example the required configuration is:

• Parameter name: “my_prop”

Optional parameters:

• Datalayer name: Default “dataLayer” but you can configure this to listen to a different Datalayer object (on window scope).

• Event name: This field is empty by default but can be used to define a certain event value (e.g., “gtm.init”) to only return the value from a specific event in dataLayer.

• Occurrence pointer: Select if you would like to return the first or last occurrence of the parameter, if multiple parameters of that key are found. In the previous example “first” will return “42” and “last” will return “0”. The order is defined by the array (dataLayer) and order of events pushed. Where “last” is the most recent data pushed to the dataLayer. An additional option is to read the value from a specific event based on the JENTIS State context, which is described here in detail as a how-to guide: Listen to Datalayer Events

Custom JavaScript Function Variable

With this template, you can define a custom JS function that is executed in the front end to resolve a value.

Make sure always to use the following syntax:

function(){
  return "hello world!";
}

Do not use HTML text or tags in this field, as only JavaScript code is allowed!\

Client-side to client-side Variable References

This feature enables users to access the value of another client-side variable within a client-side variable. As a result, it is possible to reuse values from existing variables. Furthermore, even references of references of references are achievable.

The reference functionality can be used like this:

this.getFrontendVariable("<ID of client-side variable>");

The ID of a variable can be found in the edit view of the JTM in the property field “ID”.

Important to note that this functionality only works with the JENTIS wrapper scripts that we provide.

Full client-side variable example for gathering the screen resolution:

async function() {
    return this.getFrontendVariable("window_screen_width") + " x " + this.getFrontendVariable("window_screen_height");
}