How to track Success and Error Messages in Google Tag Manager with Element Visibility Trigger

In this article, we’d like to dig deeper into GTM features and, in particular, use the Element Visibility trigger. It allows to detect changes on a particular webpage. For instance with the help of this trigger, you can track the successful form submission, the occurrence of error messages or pop-up windows, and much more.

Let’s move to practice and track notifications after filling out the Contact Form7 on a website.

Let’s create a new trigger. Choose the trigger type: Element Visibility.

Let’s set it up. In the field Choose Method Type choose CSS selector. In the next field Element selector you should insert class of the element you’d like to track. In our case it is an error message : «One or more fields have an error. Please check and try again.”

The next screenshot shows other trigger settings.

Let’s save changes we’ve made and check the reaction of the Tag Manager on our settings. As we may see in the Summary field, after the attempt to fill an empty form, a new element has appeared.

The next step is to check the class of a message that shows up after the successful contact us form submission. To do so it is necessary to fill out all the required fields and press the ‘Send’ button. In a preview mode let’s find an element gtm.elementVisibility and open it’s Data Layer.

As you can see, the notifications about an error and successful form submissions have different classes. Now it is necessary to use received element classes in further tracking settings. Let’s get back to GTM and activate Click Classes variable.

For further tracking convenience, it would be great to assign the results to the class elements. For example, the error class may be determined as an Error, and the successful form may be determined as a Success. To do so it will be necessary to create a custom variable RegEx Table.

After saving, the new variable should appear in the preview mode and show an actual status.

The last step is the creation of the event tag that will forward data to Google Analytics. In the ‘Category’ field you should choose your category name, in the field ‘Action’ set up the variable. Choose trigger activation: the previously created Visibility trigger.

After all required settings, let’s check the real-time reports in Google Analytics.

Bottom line:

You can use this type of notifications in order to track whether your form is complicated for your users. Also if it is necessary to track more precise results than regular form submission or any other interaction with the element in the form of confirmation message.