How to set up button click goals in Google Analytics and Yandex Metrica 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 and Yandex, 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.

 

1. 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:

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! ??

2. 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:

<script>
var name = document.querySelector('form > div:nth-child(1) > div > div > input[type="text"]').value; // Name field value 
var name = document.querySelector('form > div:nth-child(2) > div > div > input[type="text"]').value; // Email field value
var name = document.querySelector('form > div:nth-child(3) > div > div > input[type="text"]').value; // Phone number field value


var proceed = true; // technical variable, should not be changed.

// We consistently check our fields to make sure of  presence and accuracy of data

if(name == ""){
	proceed = false;
}; // check that the field name is not empty

if(email == "" || !validateEmail(email)){ 
proceed = false;
}; // check that the email field is not empty and it contains the correct address

if(number == "" || !validateNumber(date)){ 
proceed = false;
}; // verify that the phone number field is not empty and it contains the numbers
  

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);
}
  
               
function validateNumber(e) { 
    var re = /^[0-9._\s()+-]+$/;
    return re.test(e);
}  


  
if (proceed){
    dataLayer.push({'event': 'valid_click'});
}; // send event in the Google Tag Manager that the form is completed correctly

</script>

Google Tag Manager adjustments

 

3. 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.

 

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.

screenshot_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.

唐人街探案3完整抢先版,唐人街探案3免费首播,唐人街探案3全网免费