Clicktracking Variables

The context is key whenever a user interaction is involved in tracking (an event). You probably want to know what element triggered the action, a button, an image, or something else. What was the text of that clicked element?

The Frontend Variable type "Click Trigger Properties" is the entry point to get information from those elements. All are available for the clicked links anchor text, the href-value, or CSS classes. You can even iterate up and down the elements to get the desired information from parent or child elements.

Let's look into this feature in your JENTIS Tag Manager in detail.

Creating a Contextual (Click) Variable

Navigate to the Server Tag Manager: Variables section in your JENTIS Tag Manager account. There click the "Add new Variable" button to add a new variable and select the "Click Trigger Properties" type:

Now you can add all the general properties (name and group) accordingly. A bit more interesting is the section on the element properties, which we will cover in more detail next.

Element Properties Navigation - How To

With the element property value, you can precisely select what is meaningful to your configuration. The element property can reference a CSS class of the element in context or any other value available in the DOM of the element. Which has a special syntax to query and specify what you are looking for.

After adding a name, there are 3 options to use:

• Console log: After clicking on your webpage on the element specified in the tag or trigger, the DOM element will be logged in the browsers' developer tools (in the console section), giving you the option to traverse the actual object for manual debugging purposes.

• Element property: Here, you can define which exact element you would like to retrieve from the DOM object. String format.

• Is complex object: If you set it to true, it enables you to define a more complex object path in the element property input field e.g.: childNodes.0.ownerDocument.charset. More on that in the following section.

Complex Object

Activate this last option only if you are confident with DOM and Javascript objects.

What is considered a complex object? What is not? Let's start with the easy part.

Regular Properties - Complex Object OFF

When the "Is complex object" selection is set to OFF, you can access the values of the element with no special syntax.

The following examples are values that you can access that way:

• a property in the JS root object (node) e.g.: innerText, nodeName, offsetHeight, etc.
  OR 

• attributes of the HTML element (e.g.: class, id, data-target-id, etc.)

Example: You would like to retrieve the "class" value of the clicked element. Leave “Is complex object“ on (default) false and write “class” to the input field.

This will automatically search for a “class“ named property in the JS root object (node), in this case, it won’t find any. Therefore it further jumps to the HTML attributes object and finds the class attribute. So the value of the variable is now "its-a-class", as in the example HTML below: 

<-- clicked element -->
<button class="its-a-class" data-id="1">Submit Data</button>

In this example, the value of this variable is “its-a-class“. If configured to return "innerText", this would return "Submit Data" and "data-id" would return "1".

Complex Object ON - Advanced Syntax

Now let's examine a more advanced option. Setting the "Is complex object" option to TRUE (active). Here you can access any value of the root object and traverse to parent and child elements.

The following should serve as a good example to examine in detail:

<-- clicked element -->
<div class="my-parent">
  <button class="its-a-class" data-id="1">
    <a href="#">Submit Data</a>
  </button>
</div>

Let's assume we want to access the clicked buttons (class: "its-a-class") parent class value. Which expects "my-parent" as the result.

This is what we would configure to achieve our goal:

The element property in the case of this "complex object" notation is:

parentNode.attributes.class.value

So we are accessing the exact JS Node object structure available here. Which is a very rich format and has many options to choose from. 

Detailed Complex Object Selector Guide

It can be very helpful to log the object into the console and simply navigate it in your browser to access a desired value.

You can log the element and simply navigate the object and properties available in the console in that case.

In the context of our example, the activated logging will have this output:

Here we can see the object (element) has the "attributes" property that holds further information such as "class" or "data-id" (as they are defined in the HTML example).

The properties hierarchy is accessed with dot (.) notation. Arrays are translated into the same structure, you can simply name the index, ie. "childNodes.2.ownerDocument.charset" - here you access the third element of childNodes via the index "2".

With that, you have no further limitations to access any desired value of an element.