In the this article, we are going to guide how to set-up Google Analytics OnClick Event Tracking through Google Tag Manager (GTM) to track all Image Click, PDFs Downloads, “add to cart” button clicks, form submissions, or video views by the users on website.

For Better implementation let’s start with a below steps:-

  • Compile a list of events that we want to track
  • Set-up event triggers for each event we want to track
  • Set-up tags for each event to send data related to those events to Google Analytics

In this guide, we recommend Google Tag Manager for event tracking is best for these reasons:

  • This approach does not require the addition of any code onto the website, making implementation significantly easier if we don’t have a technical person on our team.
  • Google is constantly changing their tracking mechanism, and they are releasing their new tracking code library. Using Google Tag Manager will help us avoid the hassle of going into the code base again and change the tracking mechanism every time they have an update.
  • GTM gives an user friendly interface to view which events are being tracked. This interface will help us to stay in organized form if we want to track a lot of events on the website.

1. Compile a List of Events

There are multiple approach to Compile the list events for the website like “macro and micro conversion” and “track everything” approach.

In “track everything” approach follows the tracking of every single event that happens on our website. While in “macro and micro conversion” approach, which advocates for only tracking macro and micro conversion events on the website.

The events that our customers have to go through to either make a purchase or submit a lead form. They could also be micro conversion events that indicate increased audience engagement of your audiences. These may include button clicks such as signing up for a newsletter or looking through product information on our website is called as macro conversion events.

2. Setting up event triggers

Google Tag Manager tracks all events and page visits on the web property automatically. However, it doesn’t record any of this data unless we tell it to do so. Triggers are the way that we can tell GTM to track the specific events and pageviews that we want to send to Google Analytics or other services.

To identify the events that we want to track, it is helpful to understand conceptually how these buttons are coded on the website, and how we will select these elements.

On the website, all elements are coded with HTML tags with the structure mentioned below figure
html element

Enable The Element Selector in Google Tag Manager
Now that we have understood of how we can select our events. Google Tag Manager allows us to identify events on the website based on the events’ various attributes (they call these attributes “variables”). We can get a list of all its built-in variables under the “variable -> configure” button of Google Tag Manager.

variable confiqure

In the above figure, Google Tag Manager offers a very comprehensive list of built-in variables for us to identify events, from clicking an element to submitting a form. To achieve this, we will use the “Click Element” variable. We can enable it in the screen above by checking the box next to “Click Element” (we can also enable other boxes in the Clicks category to enable more options during event selection).

Setting up/Create the Trigger via CSS/ID
Go to the “Trigger” section of Google Tag Manager and select “New.” Then click on the Trigger Configuration box and select Click — >> All Elements.

In the setup screen, select “Some Clicks”, meaning we only want to track certain clicks happening on the website.

In the configure options following, select Click Element, Matches CSS Selector, and type in the unique CSS selector we identified.

If the CSS selector was not unique despite extending the parameters, we should identify the events that we do not want to track, and create another rule in this screen with the option “does not include CSS selector.”

With everything configured, it should look like the screen below:
css selector

Setup the trigger via id selector configured as like the screen below:

Lastly, save all the configurations and we are ready to set the tag!

3. Configure the Tag

This the most complex part of this process is over. Now it’s all non-technical smooth sailing here!
Configure the tag

Selecting events will enable a few more options to tell Google Analytics what this event is. Here is my recommended way of organizing the events, but feel free to change the structure:

  • Category: This is the overall category of the event, whether it is a check out event, an engagement event, or so on.
  • Action: This is the action that occurred during this event, such as “click_add_to_cart”, or “click_video.”
  • Label: This is where you place additional information about the event, such as what product is being clicked, what video is being watched, etc.
  • Value: If you are using sophisticated micro conversion value assignment in your analytics pipeline, you can assign a value to this event. Otherwise, I recommend leaving this blank for now.

After filling out the all relevant information on this page, click save and finish the the Trigger settings.

Connect Tag with the Trigger

This step is very simple. Select the “Trigger” box on the tag creation screen, and select the trigger to just set up in the previous steps. Click on Save Button, and the tags are configured!

Trigger Configuration

4. Debugging and Preview the Tags

All the events should be configured and firing correctly on Google Analytics. However, just like every technology, this almost never happens with your first try.

That’s why we need Google Tag Manager’s preview function to identify whether the event tracking is configured properly and in working state.

After that setting up all of the events we intend to track by click on the “Preview” button on the top right corner to enter into the preview mode.
preview tag debug

Afterwards, with the Google Tag Manager tab, open a new tab for the website. we find a debugger section at the bottom part of the screen that looks like the below figure
google website tab

The left side of this section describes all action we have taken on the website, while the right side tells what tags are going to be fired (or did not fire) in each of the actions that we have taken.

Aftermath click on each of them on the website to check whether the tag we have configured is firing correctly. If it is not, go back and double check all the steps to make sure everything is correctly configured, and try again until it works.

After everything is correctly configured, go back once again to Google Tag Manager, and submit and publish all the changes.

Share This Story!

About The Author

You may also like