Values and properties that are accessed or received on the frontend are considered Frontend Variables. In that context the frontend is defined as the web application in the runtime of a clients (website visitors) web browser. With JTM you can access all those properties with Frontend variables where each variable has a final (static) value per state. This concept is described in more detail in this section. The first step is to create Frontend Variable.

Frontend Variable Creation Process

To create a Frontend Variable you will need to navigate in JTM to the Data Sources area. Here you can create a new Frontend Variable or edit an existing one.

A Frontend Variable has the following properties:

  • Name: This is the value that will appear in the selection in a Tag configuration, here you should use a descriptive name.

  • ID: This is a technical reference that can be used to reference a trigger explicitly as this ID is unique per JTM account.

  • Description: Feel free to give a Frontend Variable a description to later better understand the motivation to this variable.

  • Scope: Any Fronend Variable will be accessible in the Jentis Data Model (Document Objects). Here you can select which document object will be associated with this variable. It will affect the persistency of the value, as user and session values are persisted according to their name. Event scope will make the Frontend Variable value accessible only on its associated event and not available in later use.

  • Code: You must use a JavaScript function and return a value, which then will be resolved on any given state.

Use Cases of Frontend Variables

Frontend Variables are a super capable functionality of JTM, here you can access anything frontend that is required for your tracking. This can be anything from clicked element, html attributes of tags or dataLayer parameter values. Some of this examples are described in detail here.

Access Global Scope JavaScript Variables

Fronend Variables can easy point any existing variable in global scope. This can be a document, window or any other object that a different application set.

The following code will return the document.location.path value (if global document is defined), which gives you access to the page path of the website the user navigated to.

  return document && document.location ? document.location.path : "";