Track form submissions in Google Tag Manager using CSS Selectors

When setting up a new website, you’ll want to collect and analyse your user data about who is visiting your website and where traffic is coming from. Once you have this kind of information you can expand your marketing plan to attract users from other sources, and you can create paid ad campaigns to encourage more visitors belonging to your target demographic to your site. But how do you begin the process of tracking data on your website?

This is where goal-tracking (using Google Tag Manager) comes in, and there is one particular method that is easy and simple to set-up, which will allow you to retrieve such data about how page visitors behave.

Setting up goal-tracking using CSS selectors

Using CSS selectors has the advantage of allowing you to visually select the element you want to begin the process of sending user data to Google Analytics. And, there’s one easy method that can be quickly set-up to track forms within Google Tag Manager, which is:

Using Google Tag Manager’s ‘Element Visibility’ trigger type to select a success message element via its class or ID attribute using CSS attribute selectors (don’t worry; we’ll explain all of this shortly!).

The ‘Element Visibility’ trigger type is great because it’ll enable you to retrieve simple data like the total number of form submissions (to name just one data type), without having to set complicated triggers and variables up to do so. 

What’s even better is that this method is suitable for not only WordPress plugins like WP Broadbean, Gravity Forms, WP Forms, and Formidable Forms, but also any other form from any other website-builder like Wix, SquareSpace, and Webflow, as long as it meets the following criteria: 

• There is a HTML element (a span, a div, or any other inline- or block-level element) that displays after the form submit button is clicked.

If your form has this, you can now begin the easy steps to achieving simple goal-tracking!

How to set up your trigger 

Your first step will be to create a trigger (a condition which causes Google Tag Manager to track any given event and subsequently record data) that’ll help you select which HTML element you’d like to target as our form success signifier. In this case, it’s a paragraph (‘<p>’) element with the text ‘Success! Your form has been submitted’ which contains the unique class of ‘form-success-message’. 

It’s important to set the trigger up first because we’ll be calling it when we set our tag up (a tag is a vessel in which we place all of our variables and triggers into, to receive a specified piece of data like form submissions and transport it to Google Analytics). This trigger is what will tell your tag (which you’ll set-up in a second) to run once a form is submitted. To begin, follow the instructions below:

1. Head over to the ‘Triggers’ tab on the left-hand side of Google Tag Manager and click ‘New’.
2. The first option you’ll see is ‘Trigger Type’, which you’ll want to open up and click ‘Element Visibility’, which can be found under the ‘User Engagement’ section.

3. Change our next ‘Selection Method’ field to either ‘ID’ or ‘CSS Selector’.

Select ‘ID’ if the element contains a unique ID, but if not, a unique class attribute will also do the trick, in which case: select ‘CSS Selector’.

To find out whether your success message has a unique class or ID (or both), right-click on the form submission page (make sure you do this after submitting a form) and select ‘Inspect’.

Then, click this icon in the top left corner of dev tools and click on the success message. Dev tools will highlight where the element containing the success message is within the source code, from which you need to look for either an ID or class element that is unique to it.

In our example, the WordPress Broadbean outputs a class of ‘wpbb-message wpbb-message-success’ for the success message, which we’ll pop into our trigger field of ‘Element Selector’.

Classes are specified with a dot in-front, but in our class, you’ll see that there are actually two classes separated by a space: ‘wpbb-message’ and ‘wpbb-message-success’. To be safe, we’re going to unite them into one global class that prints as the following: ‘.wpbb-message.wpbb-message-success’.

4. The remaining options are straight-forward to configure: simply copy the screenshot.

The main setting here is ‘Observe DOM changes’, which will catch our success message when it appears since the DOM contains all visual elements of a webpage like buttons, paragraphs, and layouts.

It doesn’t even matter if the page redirects to another, or stays on the same URL,  as long as you select ‘Observe DOM changes’, Google Tag Manager will be able to track any new additions to the DOM. One con about using ‘Observe DOM changes’ is that it’ll result in a greater network load since Tag Manager will have to track real-time changes to the DOM (in our situation, it’s the dynamically-generated appearance of the success message after the page has initially loaded), but as long as our CSS selector is unique, then it will only need to record changes when that specific success message shows.

We’re now ready to set our tag up so we can push our data to Google Analytics! We’ll need to do this so we can easily access the form submission data in one place, along with all of your stats about traffic and session durations (Google Tag Manager won’t display this data in a user-friendly way).

Pushing data to Google Analytics

This is the easy bit. All we need to do is click on ‘Tags’ in the left-hand panel and click ‘New’ on the right to get started. Upon doing so, this is the screen you will see:

Instructions

1. First, let’s set the ‘Tag Type’ to ‘Google Analytics: Universal Analytics’ (it should be the first option you see come up in the ‘Featured’ section of the ‘Choose tag type’ panel.
2. Our ‘Track type’ needs to be ‘Event’ because we’re tracking a change in the DOM once an element (submit button) is clicked.
3. For ‘Category’, we just need to put something along the lines of ‘form submission’ (though, you can name it whatever you want – so long as it’s easy to identify in Google Analytics).

4. The ‘Action’ field should tell us what event has occurred, so for us, it’s that the form has been submitted.

5. The ‘Label’ field is how we’ll identify which form it is that we’re looking at (be as specific as possible as it’ll save you a headache later if you need to track multiple forms across your website).
6. For what we want to achieve, the ‘Value’ and ‘Non-Interaction Hit’ are not needed, so set these to be blank and ‘false’ respectively. 

7. Finally, in ‘Google Analytics settings’ we need to type in our Google Analytics tracking code. First, though, you’ll need to create a new variable if you haven’t set this up already; click the dropdown and you’ll see an option called ‘Create New Variable’. Once done, you’ll see this screen:

Type in your tracking code as shown above. You can find your code in Google Analytics by going to ‘Admin’ > ‘Account’ > ‘Property’ > ‘Tracking Info’ > ‘Tracking Code’; your tracking ID will be visible at the top of the ‘Tracking Code’ page.

Does it work?

We need to make sure that the trigger we’ve set up is actually working; to do so, click ‘Preview’. 

You’ll then be prompted to enter the URL of the page your form is in; once you’ve entered it, you’ll be taken to said URL and you should see a little Tag Manager widget in the bottom right-hand corner:

If you see this, then the Google Tag Manager debugger is successfully running, and now you simply need to fill your form out and click the submit button.

Once you’ve completed this step, go to your ‘Tag Assistant’ browser tab (it will have opened in a new tab automatically), and in the ‘Summary’ section, you should see your that your tag has fired at least once:

Your form is now set-up for goal tracking and you can now easily view how many people are submitting your forms. In this article, we only covered job submissions, but this ‘Element Visibility’ method can be applied to ANY form that has a dynamically-generated element displaying AFTER a form is submitted. This method is especially beneficial for website owners that may not have much time to set-up something more advanced, and just want to track a simple metric that’ll inform them of the effectiveness of each webpage with a form (for example, by measuring how many people visit a page and then fill the form out). 

If you need any further help or advice, drop us an email at hello@quibblecontent.co.uk.