All Collections
Tracking
How to track button clicks using Google Tag manager
How to track button clicks using Google Tag manager

Track button clicks using Google Tag manager

Sam avatar
Written by Sam
Updated over a week ago

Google Tag Manager is a tag management system (TMS) that allows you to quickly and easily update measurement codes and related code fragments collectively known as tags on your website or mobile app. Once the small segment of Tag Manager code has been added to your project, you can safely and easily deploy analytics and measurement tag configurations from a web-based user interface.

We recommend the GTM approach as it is easy to implement and two bits of code of GTM can do the entire work.

Above all, the Google Tag Manager approach requires no further code editing/modification. You simply paste the code in tracking code--------> Head and Body start of the landing page and you are done setting it up.

Here is an article that explains in detail where you have to paste the GTM code within Swipe Pages.
https://docs.swipepages.com/en/articles/6926305-how-to-add-google-tag-manager-script

Let's get started with the steps involved in tracking the button:

This article assumes that you have already copied and pasted the Google Tag Manager script into its appropriate section of the landing page within Swipe Pages.

In this article, I will be sending the button click event to my Google Ads account.

Once you are done creating a button-click event in your Google Ads dashboard, please navigate to your GTM account.

Based on the instructions from the above article, please copy-paste the GTM tracking code within your landing page.

Setting up a Tag:

  1. Create a new Tag by clicking on the "New" button on your GTM dashboard.


  2. Based on the conversion ID and conversion label from your Google Ads conversion event settings, create a Tag with the appropriate title and save it.

Setting up the Trigger:

This is the most important step of the process. Here is how we do it.

  • Step 1:
    Create a new Trigger by clicking on the "New" button on your GTM dashboard.

  • Step 2:
    Provide an appropriate title for your trigger.


  • Step 3:
    Click on the trigger configuration and select "Just clicks" on the trigger type list.


  • Step 4:
    Now, we need to add a CSS class for the button. Please go to the builder view of the page.
    Select the button which you wish to track and under the advanced settings of the button, add the CSS class within the CSS class field.
    A CSS class can be any word of your choice. In this video, I will be using the word "run" as the CSS class for the button.


  • Step 5: Now, let us connect the Trigger and the button on the page using the CSS class.
    In the trigger configuration, select "some link clicks". Then, select "Click element" from the drop-down menu of built-in variables.

    In the drop-down of criteria, select "matches CSS selector".
    Enter the CSS selector on the adjacent field in this format: .CSSCLASS a
    For example: If the CSS class provided to the button is "run", then, enter .run a as the CSS selector in the adjacent field.
    (please note that there must be a space between the CSSclass and a)


  • Step 6:
    Now, link the tag with the respective trigger that we created as shown below.

Debugging the event setup:

Now, we have set the event by combining the tag and the trigger. Before we hit "submit" to Publish the changes, we must debug the event setup using the "preview mode" and check if everything is working properly.

Here is how it is done:

  • Click "preview" on the top right corner of the screen and type in the page URL in the dialogue box that opens up. Please wait for the debug window to open up as a new browser tab.


  • Now, click the button that is supposed to be tracked in the debug window and then, press "finish" on the debugger popup.


  • Click on the "Link click" on the left tab and see if the event name provided, which is, in this case, "Google Ads conversion tracking" is present there. Also, check if the pattern matched the CSS selector: .run a

Publishing the event:

Since we have verified that the event is firing, we can now click submit to publish the event.


Did this answer your question?