# Click Trigger Properties

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 retrieve information from such elements.\
You can access values like the anchor text, the `href` value, or CSS classes of the clicked link — and even iterate up and down the DOM to extract information from parent or child elements.

Let’s explore this feature in detail in your **JENTIS Tag Manager**.

### Creating a Contextual (Click) Variable

1. Navigate to **Server Tag Manager → Variables** in your JENTIS Tag Manager account.
2. Click **Add new Variable** and select **Click Trigger Properties** as the type.

<figure><img src="https://2315305008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy15ncufYr341K5U8q6Of%2Fuploads%2FRylFZ9w5deG51xZqqkX7%2Fimage.png?alt=media&#x26;token=8287ae55-2eb1-4ea1-a642-f7b3253ecbb8" alt=""><figcaption></figcaption></figure>

Now you can fill in all general properties (name, group, etc.).\
The most interesting part follows in the **Element Properties** section.

### Element Properties Navigation — How To

With the **element property value**, you can precisely select what information is relevant for your configuration.\
An element property can reference a **CSS class**, an **attribute**, or any other value in the element’s DOM structure.

<figure><img src="https://2315305008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy15ncufYr341K5U8q6Of%2Fuploads%2FlQF09Q2v03ebjAAWE2Cc%2Fimage.png?alt=media&#x26;token=9c249903-a093-4df5-9dd6-074b02c576e8" alt=""><figcaption></figcaption></figure>

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

#### Console log

When clicking on your website element defined in the tag or trigger, the DOM element is logged in the browser’s developer console.\
This allows you to inspect the actual object structure for debugging.

#### Element property

Define which exact element property to retrieve from the DOM object (string format).

#### Is complex object

If enabled, you can specify a **more complex object path** (e.g. `childNodes.0.ownerDocument.charset`).\
This lets you traverse the full DOM hierarchy.\
Only activate this if you’re comfortable with JavaScript objects and DOM structures.

### Regular Properties (Complex Object OFF)

When **Is complex object** is disabled, you can access standard values without special syntax.

Examples of accessible values:

* Properties in the JS root node (e.g. `innerText`, `nodeName`, `offsetHeight`)
* Attributes of the HTML element (e.g. `class`, `id`, `data-target-id`)

**Example:** Retrieve the `class` value of the clicked element.\
Leave *Is complex object* disabled and set the element property to `class`.

JENTIS will first look for a property named `class` in the JS root node; if not found, it checks the HTML attributes.\
So for the following element:

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

* `"class"` → returns `its-a-class`
* `"innerText"` → returns `Submit Data`
* `"data-id"` → returns `1`

### Complex Object ON — Advanced Syntax

When **Is complex object** is enabled, you can traverse up and down the DOM tree.

Example HTML:

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

```

Goal: access the parent element’s class value (`my-parent`).

Configuration example:

<figure><img src="https://2315305008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy15ncufYr341K5U8q6Of%2Fuploads%2FzdtClHNi1dKbEDQxeATg%2Fimage.png?alt=media&#x26;token=494c688f-fbf2-43f1-abda-887e19e7f259" alt=""><figcaption></figcaption></figure>

Element property (complex object notation):

```
parentNode.attributes.class.value
```

This notation references the full JavaScript DOM structure and gives you fine-grained access to any property.

### Detailed Complex Object Selector Guide

It can be helpful to log the element in the console and explore its properties interactively.\
When console logging is enabled, you’ll see output similar to:

<figure><img src="https://2315305008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy15ncufYr341K5U8q6Of%2Fuploads%2F79eigjchbYwrjOJp0qzd%2Fimage.png?alt=media&#x26;token=6538ab09-3d7e-4ee8-b989-64d54244675b" alt=""><figcaption></figcaption></figure>

You can see that the element object has an **attributes** property containing details such as `class` and `data-id`.

Access hierarchy via dot (`.`) notation:\
For arrays, reference indexes like `childNodes.2.ownerDocument.charset`, which retrieves the `charset` from the third child node.

With this approach, there are virtually **no limits** — you can access any desired value of a clicked element.

### Summary

The **Click Trigger Properties Variable** empowers you to capture detailed context for user interactions directly from the DOM.\
Whether you need the text, class, or parent attribute of a clicked element, this feature enables flexible and precise event enrichment inside your JENTIS Tag Manager.
