States
  • 31 Mar 2022
  • 6 Minutes to read
  • Contributors
  • Dark
    Light

States

  • Dark
    Light

Tracking website interactions made easy is the goal of JENTIS. Here a rather abstract but very helpful concept comes into place: States. Every moment in time can be a State and with each JENTIS takes a snapshot of all properties and variables so you can retrace each data point. So all tracking with JENTIS will stay in contact with a State, as all Tags, Triggers and Variables all work in some context to a State. Here is a basic guide to dive into this concept a bit more deeply.

Users interacting with your website will open the website, wait for it to load, click somewhere and navigate. Generally speaking all websites are built differently, it can be a single page application or a classic link-per-link navigating website. Now it is up to you to just use the core web protocols (such as “DOM Ready” or “Window  Onload”) events and define those as States or create your own definitions. In any case: JENTIS comes with a lot built in definitions, so technical skills are not mandatory.

As the backbone of the tracking States provide a lot of clarity to your tracking setup. With each State you know exactly what variable had which value! With the asynchronous nature of JavaScript and timing being always a challenging task in tracking (talking “race conditions”) the States give you a solid foundation. Variables values will not change in a State, as they are constant per each State.

Look at this example, here a user visits a website and loading a page he runs into multiple states. Each variable (per Column) will have a defined value per state.

StateVariable Value:
“Page Title”
Variable Value:
“CSS Selector: Price Tag”
InitializationMy Page Titleundefined
Dom ReadyMy Page Titleundefined
Page LoadMy Page Title19.99
Button ClickMy Page Title19.99

Values in HTML and JavaScript Objects change. As this is the nature of dynamic websites. With States you can retrace and use each value of a variable as you need it. This gives control and clarity to your tracking implementation.

Read next:

  • States Technical Reference for more technical details on the implementation of States
  • Use Case – Data Layer Events to States for a guide on how to leverage your existing Data Layer and migrate quick and easy from Data Layer to Jentis

Technical Reference

States are a core concept of JENTIS. It is crucial to understand it if you want to better grasp how JENTIS works internally and what is the best way to interact with it as an application interface. All variables and values that Jentis tracks in the frontend and processes in the backend are ordered in a queue, where every single state is a certain milestone in a website visit.

Every State definition is a technical description. To define which signals play a relevant part in your tracking setup. Every account will have multiple State definitions: click and scroll events, tool initialization, Data Layer push events, Page Load, etc. So every State is an opportunity to react on events on your website.

With States you will be able to fine tune your JTM setup. You can either go with industry standards and make your tracking align to core concepts such as “DOM Ready” or “Window Load”. Or you can decide to synchronize states with your React, Angular or any other single page application, so all tracking is running smoothly and as a core part of your web application.

Web Navigation and JENTIS States

The concept of States in JENTIS revolves around the navigation of website visitors. Here protocols exists and define certain aspects and concepts, such as “DOM Ready”, “Window Load” or the initialization of an application (such as Jentis when the internal JS library is loaded). All of that is an abstraction of the navigation on the web, which itself follows more broad concepts.

A website visitor doesn’t know what and when a navigation happened exactly, if a click on a link opens a new website is just an AJAX call or a “real” page load. To a client this is not as relevant as to web applications or tracking. To flexibly react to all kinds of frameworks JENTIS created the States concept. States in JENTIS are an open framework that can handle all kinds of interactions, either of Single Page Applications or the reload on page navigation. And you can create your own State definitions!

The basic states are:

  • jts.init: This is triggered at the moment the JENTIS JS file is initiated.
  • jts.dom: This is triggered at the moment the DOMContentLoaded event occurs on a web navigation.
  • jts.load: This is triggered at the moment the window.load event occurs on web navigation.
  • jts.submit: This is a generic push functionality, which is the bare minimum to connect to JENTIS. Any application can use this state by simply calling _jts.push({“track”:”submit”});

Any application however can create its own states to customize the tracking of a website. There are also common use cases where States already are implemented to work with existing concepts like dataLayerfrom Google Tag Manager or a State for Single Page Applications virtual pageview actions. This will be described in the next steps.

Data Queue and State Processing

The core tracking process of JENTIS is divided into the following steps.

  1. Receive data: Data can be grabbed via CSS selectors or references to other objects in a browsers runtime. Either data is fetched (Frontend Variables, where you define what value to look for) or an external application pushes data (_jst.push). This step only receives data, not reacting to it, yet.
  2. Evaluate data: As a State definition is called (which is basically a callback function) the JTM will start the tracking process. This could be a DOM ready event or a click. Now all conditions of States are checked (frontend) and all Frontend Variables are resolved that are required in this state (based on your Tags and parameter setup in JTM, so only the required variables are actually resolved). If no condition is met to activate a tag in your setup, no data must be send server side and hence performance is saved.
  3. Submit data: If conditions are met in the previous data evaluation step this will trigger the next process. Now all data is evaluated (variable values will not change due to race conditions) and JENTIS will send all of the data to the server. Where the tools and business logic will be applied to cater to your requirements.
  4. Transform and load data: On your JENTIS server the data is received and can be processed according to your configuration of Tools, Tags and Triggers combined with Backend Variables, Functions and Enrichment Variables. With this you can model all data as required to the needs of individual Tags.

State Registry

Creating and customizing a state can be achieved in your JTM account. Navigate to the Components area to edit or create new State objects. Here you can edit existing State definitions or create new ones.

A States has the basic parameters such as name, description or id, as with all elements in JENTIS. The JavaScript code will define a function with a single input parameter (a function) and must call the input parameter at the end. The following example will help you to better understand this concept.

State Function Reference

A state is an anonymous JavaScript function with one input parameter. This function will determine a moment in time or interaction of a client and submit a callback.

Input Parameter: {function} initState

This function object must be called when the function (state) is determined to be activated.

Returns: void

Basic State Definition – DOM Ready State

The most basic use case for a state is the DOMContentLoaded handle. This will create a state in your JTM account that activates on the web browsers event. Further details on this api and specs can be found here: Window: DOMContentLoaded event – Web APIs | MDN

DOM Ready State JavaScript Function 1

function(initState) {
  document.addEventListener('DOMContentLoaded', (event) => {
    initState();
  });
};

With this state in place your JTM will react as soon as the event was triggered in a users browser. Activating all triggers, checking conditions and calculating all Frontend Variables values. So with this state you are ready to go, if this event fits your requirements.


Was this article helpful?