Google Tag Manager (GTM) is one of my favorite tools for Web Analytics because it is robust, easy to use, and free. The out-of-the-box tags and triggers making the most common tagging schemes quick and easy to create, and it integrates really well with other Google Marketing Cloud tools like Google Analytics and Google Search Console. In this post we’ll focus on Google Tag Manager form submission as it relates to email validation.

As a primer, I recommend Simo Ahava’s robust rundown on Form Tracking with GTM. We’ll be using a little bit of Javascript with RegEx in this tutorial, but don’t let that scare you off.

Recently I ran across a slightly more complex issue for a client I work with. As a freelance analyst, I don’t always have the direct line of communication (or even indirect) with a Developer team for a website I’m working on. The form tracking that had been set up before my time was doing the bare minimum: all form across the domain being tracked as a single event type/category. Even failed form submissions were firing the existing GTM event. Anytime some clicked the Submit Button (even on empty forms!), the trigger would go off. In an ideal world, I’d be able to work in an agile function with the development team to make submission validation more straight forward. When that isn’t possible, here’s a helpful solution.

Google Tag Manager Form Submission

The first thing I’ll have you do is create a Custom Javascript Variable that will validate the email address in your form. You can copy my code 98%, but you’ll want to make sure you’re looking at the right field in your Form. Right Click on the Email field in your form and click “Inspect Element.” You should see some code similar, but not identical, to this:

For our purposes, your email field will need a unique ID or Class. In my example, we have the unique field ID of signup_email, so I’ll use that in the next step. Yours will almost certainly be different, so make sure you update the code in the following step accordingly.

Custom Email JavaScript Variable

In Google Tag Manager, go to Variables and select New under User Defined Variables. Then select Custom JavaScript as your variable type. Title your variable something memorable (you’ll need it later). I used “Valid Email Boolean,” but you can pick something that fits your naming conventions.

Copy and paste the following code into your Custom JavaScript field. Remember to modify the Field ID which is used in line 2 inside the getElementById.

function() {
  var email = document.getElementById("signup_email").value;
  var re = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
  
  return re.test(email)
  
}

What’s happening in this JavaScript code? First, we set the function variable email which peeks into the Email field defined for your form, and grabs the value, or input text, at the time the code is evaluated. In theory, you could actually have this as a separate JavaScript variable that you could then capture and store. I’ve chosen not to that here because of Personally Identifiable Information (PII) and GDPR.

It also sets a function variable, re, for a regular expression that matches standard Email format (abc@xyz.com).  The Return statement evaluates the input in the Email field against the RegEx, and returns a True/False boolean depending on whether or not it matches!

Now, while you’re still within the Variables section of GTM, Configure your Built-In Variables and make sure your Form variables are all Enabled (especially Form ID). You’ll probably need this to identify your form in the trigger for your Google Tag Manager form submission.

GTM Form Trigger

The next step in your Google Tag Manager Form Submission tag is setting up a trigger for Form Submissions. We’ll walk through this as if you have multiple forms on your site, but only want this Email validation on one of them.

In GTM, go to Triggers, select New, and choose Form Submission as your trigger type. This Trigger fires on Some Forms. Assuming you only want this to apply to a specific form on your domain, specify that for by the ID as a condition (see screenshot). If you don’t see Form ID in the dropdown, you may need to go back to Variables and enable it under Built-In Variables.

Next we’ll add another condition (press the + button), and from the the dropdown select the Valid Email Boolean variable (or whatever you named your Custom JavaScript Variable we just created).  Set it equal to true, all lowercase. This tells the trigger to only fire when the input Email address matches the form of a valid Email.

Configure Tag Details

Finally, we’re ready to configure our tag. This part is pretty straight forward (we’ve already done the hard work). In Google Tag Manager, navigate to Tags, and create a new one. We’ll be sending this form submission event to Google Analytics, so select “Universal Analytics” as the tag type. We’ll use “Event” as the Track Type here. In the screenshot below, you’ll see how I’ve set the Category, Action, and Label according to my conversion standards. Yours can look however you want them to, and you can tap into other variables to fill these fields as well.

Once you’ve got your tag details set up the way you want them, you’re ready to set up the trigger on your Google Tag Manager Form Submission. Just add a new trigger, and select the one we created. 

Wrap Up

There you go! Now you’ve created a Variable to check validation of an email address. You’ve used this variable as a condition in a GTM trigger, and you’ve created a Google Tag Manager For Submission tag to send a submit event to Google Analytics. You’ll also be able to take this GTM Form Submission trigger and apply it to other events as well, like firing a Facebook Conversion Pixel or AdWords conversion.

Thanks for reading, and I hope you found this helpful. Feel free to check out some of my other data projects and Web Analytics tips.