Track Button Click events using Google Tag Manager

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.

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:

– 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

So everything works, cool! 🙂

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

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

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.

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.