Bingo! We can Implement a Custom dataLayer.push() using Google Tag Manager

For a start, there’s no easy way to measure conversions using our usual Google Tag Manager events, as they can be generated for many different ways: say for, clicking links or buttons, opening certain contents, form submissions…

But sometime we face some few common difficulties while configuring Google Tag Manager events for capturing form submissions in Google Analytics.

Why Don’t My Google Tag Manager Listeners Work at Form Submission?

The best way to fix this issue, however, is to open a line of communication with your developers, and tell them that GTM requires a standard submit browser event to propagate all the way to the document node to work.

If this can’t be done, the next best thing is to ask the developer to implement a custom dataLayer.push() into the callback function which is invoked upon a successful submission. The piece of code could be something like:

function  onFormSuccess() 
{
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event' : 'formSubmissionSuccess',
    'formId' : 'contactForm'
                       });
}

Original Source code is from:- Track Form Engagement With Google Tag Manager

This would push formSubmissionSuccess into the dataLayer on the formsubmit. Now, you can create a Custom Event Trigger for Contact from Submission tracking, which is triggered to fire a form tracking Tag when the form is successfully submitted by the user.

But after research, I've noticed that we all have a common problem: time & communication delay. We ask our client to implement custom dataLayer.push() code, they send it to their developers and then they revert back to us. This whole process takes a lot of precious time. So, I've found to validate a form using Google Tag Manager but you need to have basic knowledge about JavaScript.

Bingo! We can implement a custom dataLayer.push() using Google Tag Manager.

Example

Let’s see an example using a simple contact us form.

To start, let’s open the page with the contact us form on it.

To get started, right click on input element of the form and select Inspect option. you’ll see all of the form elements of the form on that page. On a Windows computer, you can also use the shortcuts: F12, or CTRL + SHIFT + J. For a Mac, use CMD + OPT + J.

Follow the below steps:-

1. We can create new Custom HTML tag which validates a form with inputs element id as shown below:

<script>var name = document.getElementById('ContactForm1_contact-form-name').value;
var email = document.getElementById('ContactForm1_contact-form-email').value;
var message = document.getElementById('ContactForm1_contact-form-email-message').value;
var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
if(name == "" || message == "" || email == ""){

 window.dataLayer.push({
'event' : 'FormValidationError',
'formId' : 'contactForm'
                       });
 }
 else {
    if(reg.test(email)){

          window.dataLayer.push({
                'event' : 'FormSubmissionSuccess',
                'formId' : 'contactForm'
                                });
                       }
      }

</script>

2. Create Trigger to fire this Custom HTML on the form Submission event of the form which standard submit browser event as propagated.

As you can see in below screen shot, form is submitted without validation so custom dataLayer is pushed by GTM on submit button click.

 3. Now we can create a tag to track form submission using this custom event as shown below:

Now create trigger for above tag tom track custom event on form submission as shown in below screenshot:

Finally! lets test the above configuration in preview mode.

As you can see in below screenshot the form validation is configured with validation by the Google Tag Manager and push dataLayer after validating the form on click of submit button.

This will now immediately reported in GA, showing the tracking for form submission of the Contact Us Form with an accuracy data.Similarly, you can configured others form tracking tags and triggers with an more to track conversions of your website.

Conclusion:-

This article introduces the method for capturing form submission with validation using Google Tag Manager. You would be now able to validate form values using either Custom JavaScript Variables or Custom HTML Tag, and use them in your Container, in Tags, Triggers, or Variables.

Reference link:-

http://www.simoahava.com/analytics/track-form-engagement-with-google-tag-manager/