Use Cases for Client-Side Variables

Client-side variables in JENTIS let you access front-end information for tracking. This includes clicked elements, HTML attributes, and dataLayer values. The examples below cover common use cases.

JENTIS Data Layer Variable

Use this variable type to read a value pushed through the _jts.push API to the JENTIS Data Layer.

Following the JENTIS data model, you read a property from a specific document object.

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 in this example, use this configuration:

• Property key: “my_prop”

• Document name: “product”

• Merge option: first / last

To clarify the difference between “First Occurrence” and “Last (Latest) Occurrence” (for Merge option) this example uses the same document, “product”, twice. If you select “first” the variable returns the first matching value, which is 42. If you select “last” it returns the most recent matching value, which is 0.

GTM Data Layer Parameter

The global dataLayer is a common object used on many websites. You can read values from it with the “GTM Data Layer Value” client-side variable 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, use this configuration:

• Parameter name: “my_prop”

Optional parameters:

• Data layer name: By default, this is dataLayer, but you can change it if your site uses a different object on window.

• Event name: This field is empty by default, but you can set it to a specific event value, such as gtm.init, to return a value only from matching dataLayer entries.

• Occurrence pointer: Choose whether to return the first or last occurrence of the parameter when multiple values with the same key exist. In the example above, “first” returns 42 and “last” returns 0. The order depends on the sequence of items pushed into dataLayer. You can also read the value from a specific event based on the current JENTIS State context. For a full walkthrough, see Custom Data Layer Definitions.

Custom JavaScript Function Variable

Use this variable type to define a custom JavaScript function that runs in the front end and returns a value.

Make sure to always use the following syntax:

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

Do not use HTML or plain text in this field. Only JavaScript code is allowed.

Client-side to client-side variable references

This feature lets you access the value of another client-side variable within a client-side variable. This makes it easy to reuse existing values. You can also chain references across multiple variables.

Use the reference like this:

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

You can find a variable ID in the JTM edit view in the property field “ID”.

It is important to note that this functionality works only with the JENTIS wrapper scripts we provide.

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

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