How to track button or link click using Google tag manager

Google tag manager replaces the hard-coded tags with dynamic tags that are easier to implement and update. Instead of updating code on your website, you use the work space interface of tagmanager.google.com to decide what needs to fire and on what page or what action. Once submitted, Google Tag Manager adds the appropriate tracking code to your site.

In this post let's take an example of a download button in your website. We need to know how many people clicked that button and also from which page.

Google Tag Manager consists of three main parts:

1)Tags

2)Triggers

3)Variables

Before going into details about the tags, triggers and variables, we need to install google tag manger.

PART 1:

First login to you google tag manager account (https://tagmanager.google.com/)

After login, you will get a screen similar to the screenshot below:

Fill in the account name and click continue.

Now set-up container will be active, give a container name and click on web under where to use and click on create.

You will see Google tag manager terms of service agreement. Just click on yes and you are ready to use google tag manager.

You will be presented with a page showing install google tag manager:

Copy the code appropriately in the head and body section of every page of your website.

PART 2:

Let's see the three main parts Variables, Triggers and Tags that we mentioned previously in details.

VARIABLES:

Click on the “Variables” link in the left navigation and then click on configure:

Enable all items under clicks

TRIGGERS:

Now click on "Triggers" in the left navigation and click on "New" to create a new trigger.

Give a name to the trigger and click on trigger configuration to choose a trigger. Under click, choose "All Elements".

Click on some clicks and select the options from drop down. In this example I selected "Click Text" and gave "Download" as Text. Sample code for my button is given below.

<button type="button">Download</button>

Like wise you can choose classes, element, ID, URL etc., for which you want the trigger to be fired. Here our trigger fires when user clicks on button with text "Download". We can add more conditions to the trigger to make it more specific like adding class, id and text. Consider the below code snippet.

<a id="myID" class="class1 class2 class3" href="#">Content</a>

The trigger will fire if and only if all the conditions are met.

So go on and create triggers for all the buttons and links that you need to track.

TAGS:

Click on "Tags" in the left navigation and click on "New" to create a new tag.

Give a name to the tag and click on the tag configuration and choose Universal Analytics.

Under Track type drop down, select Event and fill in the fields appropriately, You can give a new name to each field or you can select from a list of existing variables by clicking the icon next to each field.

Under Google Analytics Settings, select "New Variable" from the drop down and add "Analytics ID for your google analytics account"

The tag configuration is done. Lets add triggers to this tag. Click on the choose a trigger section which is below tag configuration section. Select the triggers you want under this tag and add them to the tag. After adding all the triggers for the tag, save the tag.

You can preview before submitting the changes by clicking on preview and once you feel everything is working fine, go ahead and click on submit. Give a version name and click on publish.

All the events that are triggered when a user clicks, can be seen in your google analytics under the the categories you have given to your tags.

In our next article let's see How to check if the events creation is correct or not ? and how to debug using preview in google tag manager. Click here