> For the complete documentation index, see [llms.txt](https://docs.jentis.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jentis.com/~/revisions/PjbB57kVcVEntvd68nHP/developer-guide/clicktracking-variables.md).

# 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 <a href="#clicktrackingvariables-creatingacontextual-click-variable" id="clicktrackingvariables-creatingacontextual-click-variable"></a>

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:

<figure><img src="https://docs.jentis.com/__attachments/845611104/image-1671092185841.png?inst-v=51858fdf-3184-45e9-9143-a0a09c4239be" alt="image-1671092185841.png"><figcaption></figcaption></figure>

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 <a href="#clicktrackingvariables-elementpropertiesnavigation-howto" id="clicktrackingvariables-elementpropertiesnavigation-howto"></a>

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.

<figure><img src="https://docs.jentis.com/__attachments/845611104/image-1671092351015.png?inst-v=51858fdf-3184-45e9-9143-a0a09c4239be" alt="image-1671092351015.png"><figcaption></figcaption></figure>

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.

{% hint style="info" %}
Complex Object

Activate this last option only if you are confident with DOM and Javascript objects.
{% endhint %}

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

### Regular Properties - Complex Object OFF <a href="#clicktrackingvariables-regularproperties-complexobjectoff" id="clicktrackingvariables-regularproperties-complexobjectoff"></a>

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**&#x20;
* 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:&#x20;

```
<-- 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 <a href="#clicktrackingvariables-complexobjecton-advancedsyntax" id="clicktrackingvariables-complexobjecton-advancedsyntax"></a>

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:

<figure><img src="https://docs.jentis.com/__attachments/845611104/image-1671092476421.png?inst-v=51858fdf-3184-45e9-9143-a0a09c4239be" alt="image-1671092476421.png"><figcaption></figcaption></figure>

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.&#x20;

### **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:

<figure><img src="https://docs.jentis.com/__attachments/845611104/image-1657187555333.png?inst-v=51858fdf-3184-45e9-9143-a0a09c4239be" alt="image-1657187555333.png"><figcaption></figcaption></figure>

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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.jentis.com/~/revisions/PjbB57kVcVEntvd68nHP/developer-guide/clicktracking-variables.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.