Handling Click Trigger Events using GA and GTM

Introduction

Google Analytics Event tracking is a very useful feature that allows us to track and record interactions with elements of our web application.

There are different ways where Event tracking can be used to measure visitor engagement on our site. Under Click Element, some of the typical uses for event tracking are :

• Tracking outbound link clicks to other websites
• Monitoring the clicks on unique elements of a page, such as the “submit” call to action on our form page

By adding snippets of code to our application design, we can track event interactions to understand how many times the user has clicked on a button and the location of that page from which the button is clicked.

Before moving forward with the configuration

To use event tracking we will need to have Google Analytics installed on our web application. This can be achieved by adding Google Tag Manager code to our site and then configuring Google Analytics tags, triggers and variables.

Integrating GTM and GA

When we want to track click events with built-in GTM functionality, we must have:

• At least one trigger enabled on a page. When we do this, we will be able to see those events in GTM's Preview and Debug console
• Enable variables (e.g. if we want to track clicks, we will need Click Variables, like Click ID, Click Classes, etc.)
• Update the trigger (to make it precise with the variable)
• Create a tag (in our case, it’s Google Analytics:GA4 event) and assign the trigger to that tag

Working with React

In React, we add the event triggers where the component is present. We use window.datalayer to record the event and send it to GA. In our example, our site has a list of coupons and we are tracking the number of times the user has used the coupon by clicking on use button of the coupon. The following changes are made in code.

ga.ts

export const pushConversionEvent = (category: string, location: Location) => {
  const extractedTitle = location.pathname.split("/").slice(1).shift();
  window.dataLayer.push({
    event: "cxp_click_count",
    category,
    title: extractedTitle?.toUpperCase() ?? location.pathname,
  });
};

In our code, the event name is "cxp_click_count". We have added a sub-component called category to specify the types of clicks on our site. The title component is used to extract the location path of the site. This will be helpful to view the location of the button that is clicked by the visitor.

The next step is to call this function at the location of where the button is created. The code snippet would look like this :

const location = useLocation()
  const onSubmit = () => {
    pushConversionEvent('cxp_use_coupon', location)
  }

<CouponUseButton onClick={() => {
                onSubmit()
              }}

To verify that the data is being recorded in the dataLayer, we can check it in the browser console with "window.dataLayer". After the user has clicked the coupon use button, the dataLayer will list the event name with it's subcategory. We can also view the title component and page url. It is viewed as :

Setting up the GTM

We set up the GTM where the event is recorded with the title component and this can be viewed in GA. As mentioned earlier, we will set up the tags, variables and triggers in GTM according to the events made in react component.

In our first step, we create a configuration tag. This will help us configure GTM. The fields can be filled as below :

The Measurement ID can be found in the GA Account. It is under Admin > Property > Data Streams. Select the appropriate stream and it will be listed under web stream details.

We can continue with creating variables. In certain cases, when we want all clicks under same event name and we see that, when a user clicks on multiple buttons that are present on the same page location, it is hard to track the button click in gtm. The variable helps in differenciating these button clicks. The fields can be filled as below :

Here, the variable name is used to differenciate the many sub-categories under the same event name if any are needed in our application for future use.

For the title component, we create another variable. The fields can be filled as below :

The next step is to create a tag. The fields can be filled as below :

Here, we are using the tag type Google Analytics: GA4 for our click event. In the events parameter, we specify the title and category. GTM uses these to match these events with the triggers made on our site. We also add the configuration tag that we had created earlier.

Finally, we create the trigger. The fields can be filled as below :

We can save all the changes and proceed with the preview option to view the events triggered. After the events have been triggered correctly, we submit it in GTM.

To summarize, Google Analytics events greatly extend the capability of the tool. It gives an overall simplified graph layout of it's triggered events. Google Tag Manager is also a great tool that allows us to send events to GA. The built-in functionality covers a lot of user interactions that can be recorded. We have thus reviewed the step-by-step procedure of creating a click trigger event using React, GTM and GA.

Happy exploring!