Track Button Click events using Google Tag Manager

Date of publish:


Wonderful creature PEGASUS



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:

CSS selector field definition

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


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

Name field code

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 (

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.

Tag configuration code

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.

Valid click trigger configuration

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.

Google Shopping Advertising – 3 steps to maximize your ROAS