Track Button Click events using Google Tag Manager

Posted on 2023-11-16

Introduction

There are a lot of different tutorials that teach how to track button clicks as a goal in Google Analytics.

Almost all of them, including official manuals from Google, use onclick-event on a specific button.

The main disadvantage of this method is that lots of “fake” goals are registered when the contact form is fulfilled with incorrect information. As a result – we have misleading statistics and wrong decisions during PPC management.

In this article, we will show how you can minimize the “fake clicks” volume in your statistics data using JavaScript and Google Tag Manager. I’ve used Google Chrome for troubleshooting.

The solution is to write your custom JavaScript validator, which verifies the form when it’s filled with the correct information.

We should define which are the required elements of our contact form that we will work with.

For convenience, I have placed the form below, so you can use it as an example:

[supsystic-form id=12]

In our case, mandatory fields are Name, Email, and Phone number.

To let our script check the needed data, we should receive these details first. In our example, we will use the following algorithm:

– Define the CSS-selector field. To do this, click on the desired area of the right mouse button and select the item Inspect. In the window that opens, click the right button on the selected item and choose Copy Selector:

1

– Use the selector to retrieve data of the form using the JavaScript method query

Selector:

var name = document.querySelector('form > div:nth-child(1) > div > div > input[type="text"]').value; var name = document.querySelector('form > div:nth-child(2) > div > div > input[type="text"]').value; var name = document.querySelector('form > div:nth-child(3) > div > div > input[type="text"]').value;

You can check correctness via your Developer Console. To do this, enter any value in the field, take the matching code, and run it in the console. For example, the code for the Name field:

1. document.querySelector('form > div:nth-child(1) > div > div > input[type="text"]').value

2

So everything works, cool! 🙂

Check data for correctness and availability. Verification will be done using regular expressions.

Some examples that I used to test different fields are given below.

Email field checking:

function validateEmail(e) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(e); }


Phone number field checking:

function validateNumber(e) { var re = /^[0-9._\s()+-]+$/; return re.test(e); }


Date field checking:

function validateDate(e) { var re = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/; return re.test(e); }

You can easily find similar regular expressions via Google Search by typing «email regex» etc.

To check the operation, you can use services like https://regex101.com/ (https://regex101.com/r/eZ7aX5/1).

Once you have received and verified all necessary information, you can finally move on to the code itself and its integration into the Google Tag Manager.

The below you may see the final code with comments:

Google Tag Manager adjustments

Create Custom HTML Tag and add your code there with the Trigger for your clicking on your submit button

I’ve used CSS-selector details to complete the Trigger set up.

3

Now we will install our Analytics and Yandex Metrica codes.

In both cases, the code will trigger event ”valid_click”, which we send with our custom HTML, in case our form is filled in with correct details.

8

We described Set up of Analytics and Yandex Metrica without going into details as there are many sources where you may find detailed descriptions of these processes.

Anyway, when you have any questions contact us, we are ready to expand this topic as well.

Share via:
Article by Anna
Wonderful creature
PEGASUS
PEGASUS

Team lead - Black team.

Anna
Portugal Office
Portugal Office
Av. Faial 371, Estoril, Lisbon
+351 922 210 245
Ukraine Office
Ukraine Office
Yamska 35/33, Kyiv
+38 095 863 8573
Norway Office
Norway Office
Jacob Aalls Gate 14b, 0368 Oslo
+479 228 0348
USA Office
USA Office
1584 W Crystal Rock Ct Unit 1B, Round Lake Beach, ILLINOIS, 60073
+164 675 718 77