Track a Google Analytics Event on Click
  • 31 Mar 2022
  • 3 Minutes to read
  • Contributors
  • Dark
    Light

Track a Google Analytics Event on Click

  • Dark
    Light

Websites often feature interactive elements, where a user will scroll, type in, mouse over or click on something. All those events can be a meaningful trigger to analyze how your content is discovered by visitors. Therefor a frequently stated requirement is to track such interactions with JENTIS Tag Manager (JTM). In this guide we will show you how to track a click on an element.

Prerequisites

For demonstration we will have the following goal as an outcome in our data analysis system: Google Analytics (Universal Analytics). Here we will use an Event that is tracked on a certain clicks on a websites element.

Event CategoryA generic and broadly descriptive name.Website Clicktracking
Event ActionThe interaction type as a static: “click”.click-action
Event LabelThe clicked elements inner text value.My Buttons Text

To setup this event tracking we will need to implement the following parts in our JTM account:

  1. Create a trigger element with a CSS selector
  2. Create a variable that contains the clicked elements inner text value.
  3. Create a Google Analytics event tag in JTM.
  4. Preview your JTM implementation.

This steps are described in detail in the following sections.

Create a CSS Selector based Click Trigger

To create a trigger in your JTM account navigate to the Server Tag Manager section and open the Triggers list. Here you can now click on the “+” icon to add a new trigger.

For our desired GA event we propose the following trigger setup. It will contain a descriptive name, the predefined (JTM internals) State “SELECTORACTION”, a CSS selector value and action. Additionally we define a condition on Page Title value that must contain “Homepage”, just as an example in this guide.

The CSS selector value must follow the general syntax described in more detail on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

For our example we will select an element on the website that has the class “myClickClass”. The according action on that element will be “Click”.

Now we click “Create Trigger” to activate that element in our JTM. Before we actually use this trigger to activate a tag we will first add a dynamic value.

Create a Frontend Variable with Click-Element Value

When a click interaction on the website is triggered it is really helpful to know what exactly is going on. So to find out we will create a Frontend Variable element in our JTM. This will tell us what the clicked elements inner text was, so we can be sure everything is tracking as expected.

A frontend variable is a function that is evaluated at every state (defined moment in time on the website visit). So we need to get the clicked elements inner text with some help of a JavaScript function. Therefor we navigate to the Data Sources section and select Frontend Variables. Click the “+” icon to create a new Frontend Variable element.

This is the content of our JavaScript function:

function(){
  var selector = ".myClickClass";
  var nodes = document.querySelectorAll(selector);
  if(nodes && nodes.length > 0)
    return nodes[0].innerText;
  else
    return null;
}

Now we have a dynamic value that corresponds to our clicked elements inner text. This we can use in a tag, such as our Google Analytics event, that will create in the next step.

Create a Google Analytics Event Tag

To put together all the lose parts we have created so far we need a tag. So we again navigate in the JTM to the Server Tag Manager section to create a new tag.

In the tag creation process we will define a name (pick any), select the connected Tracking Service (Google Analytics), template (event) and a trigger. Where the trigger is selected from the list to the one previously created in the step above.

Now to finalize the configuration of our new tag we need to map the parameters to meet our goal in the beginnen.

The event category, action and value have all a static value. As defined in the prerequisites step. The label is a dynamic value that maps to the Frontend Variable that we just defined in the last step.

Now we are ready to go and click “Create Tag”.

Preview this implementation

The preview of any implementation is a major part of the JTM workflow. So we have a detailed guide just on this step in this own section: JTM Preview Mode.

In the preview of the click element we will follow the manual, as linked above. There we open the preview window and the website with our element to be tracked. On click we will see a SEND DATA log in our browsers developer tools.

The last step is now to publish this new integration and we will start receiving data.


Was this article helpful?