Tracking Button Clicks In Google Analytics Using Google Tag Manager

Button clicks on your site can also be tracked as Events in Google Analytics. The process is very similar to External Link tracking. In this example, let’s first create a new trigger. (Note: it does not matter if you create a tag first and then trigger or trigger first and then tag).

Step 1: Create a New Trigger of trigger type of “All Elements” under the Click section.  Since a button is not a link, click action of the button is captured by the “All Element” click.

Next, select “This Trigger Fires on “Some Clicks” as we are going to be enabling only the click of a button to a specific button.

Note: if you leave it as all clicks, then any click by user, anywhere on the site will be captured by the trigger.

When you select “Some Clicks”, you will have options to define which clicks you want to capture.  You specify the attribute of your button or buttons you want to capture. In my example, all the buttons have a class name that starts with “btn”, e.g. as shown below

Figure: Button class

We will use this information about the class to track buttons.  In the following configuration, we have configured a trigger if the clicked element contains the word “btn”. Which means it will be trigged on all the button clicks since all the buttons on the site have the class name that contains “btn”.

Figure: Trigger for Button click where click classes contain “btn”

Note: You can look at the name of the class by doing a view source on the webpage, which will show you the class of your buttons. If you do not have a class attribute attached to the button(s), then ask your developers to add it.

Another option to figure out what options you can use in the filter is to see what values get set when the button is clicked. To find the value, see the following steps

  1. 1. Put the Tag Manager in preview mode
  2. 2. Open the web page that contains the button in another tab
  3. 3. Hold Control key down and click on the button (this works in Microsoft Windows. If you are using another operating system such as Mac, then use the equivalent of Control Key + Click). This will ensure that the next page opens in another tab so that you can see all the events and variables in the preview window, else they will be lost if you click the button.
  4. 4. Now, click on “Click” event on the left-hand side to see the available variables. You can use one of the variables to specify the filter. As you can see below, I used Click Classes which contains “btn”

Figure: Variables available.

You can use these steps for any click or action, not just button.

Now, give the trigger a name and then save it.

Next, create a new tag

Configuring the Tag

The tag that we will create is going to track button clicks as events. It will be similar to the one we created before. The setting for this tag is as shown in the figure below.

In this tag, I am using

Category: Button Click (static text)

Action: {{Page Path}} –a built-in variable that contains the name of the page where this action (button click) happened

Label: {{Click Text}} – a built-in variable that stores the name of the clicked element.

Once done, save the tag. You will be promted to add the trigger, so choose the trigger that we created earlier in this chapter.

Now, your button click tag is ready.

In the next lecture, we will look at Tracking Downloads as Virtual Page Views

Want to Learn Google Tag Manager. Here are few options:

  1. Get Google Tag Manager Book at Amazon
  2. Signup for Google Tag Manager Course on Udemy
  3. Signup for Optizent Academy and get Google Tag Manager + 20 other courses
  4. Free Introduction to Google Tag Manager course

Leave a Reply

Your email address will not be published. Required fields are marked *