Button Tracking

Button tracking helps analyse user interactions, track conversions and optimise the website experience. With JENTIS you have several options for tracking buttons. Either via the CSS class, or via the text in the button.

Creat a variable

In order to be able to read the inner text of an HTML element for the trigger, we first have to create a variable. Don’t worry, it’s very easy. To do this, click on the menu item “Variables” in the Server Side Manager menu. You will then see the following screen. In the “Client Side” tab, select “Click Trigger Properties“.

Now fill in the fields – you can freely choose the name and group. It is important that the “Element property” field is filled correctly – including uppercase and lowercase letters.

Save the variable. Now you can your new variable immediately in the following trigger.

Create trigger – Var  1

In variant 1 we read the text in the button for which we want to define click tracking. This is handy for those who don’t have direct access to the website code. In the Tag Manager, select Triggers under Server-Side Manager in the menu on the left. Click on the button at the top right and create a new trigger. Give your trigger a name and optionally a description. Select “SELECTORACTION” for the status and “Click” for the action. You’re almost done – but what’s important is that you then enter the following text in the CSS Selector field: “a, a *“. This specifies that you search for all text within an a href tag or nested a href tags.

Trigger conditions – Var 1

At the moment the trigger would still output all a href tags, so we now need to specify more precisely which links should be triggered. In our example, we trigger all buttons that contain the text “Kontakt” or “Contact”:

To do this, select “Click Inner Text” as the variable, “contains” as the operator and the text string “Contact” as the value. This means that the trigger should be active for all links in which the text contains “Contact”. In addition, in the example we clicked on “OR” to set another condition – namely that the trigger also includes the English variant. Save your trigger!

Create a trigger – Var 2

In the alternative variant 2, we do not read the button via the text it contains, but rather via the class that was assigned to it. We don’t need to create a variable for this. We simply look to see what unique CSS properties our button has. In this example, the id=”main_learnmore” – for a specific button – and we use that to enter it into the CSS selector field with a diamond in front of it. In this variant we do not need to make any further trigger definitions.

Create a tag

Now go to “Tags” in the left menu bar, make sure that the correct container is selected and click on “Add new tag” at the top right.

Then select the tool you want to add the tag to. In our example this is GA4. In the following screen, select the tag “Custom Event” and enter any name in the field below. In our example this is “GA4-button-contact”. Click on “Next” at the bottom right.

In the next screen you just have to choose any name for Event name that you can easily recognize. Then click on “Next”.

Connect tag and trigger

It’s almost done – in the next step you just have to link the previously created trigger to the day. To do this, select the trigger that you created previously:

Go to the Publishing menu item to test, preview and publish your new button tracking. More information on how to publish can be found here.