First, let’s try GTM’s built-in form listener. Open a list of Variables in your Google Tag Manager account. By default, form variables are disabled, therefore, you need to enable them. Under built-in variables, click Configure, and in the right sidebar enable all Form variables (all changes are automatically saved).
Then open a list of all your triggers (by clicking Triggers in the left sidebar of the GTM interface). Create a new trigger with the following settings:
The first thing we need to do here is to inspect the success message of a form. We’ll need to find a way how to instruct Google Tag Manager in which particular website element are we interested.
After you submit the form successfully, right-click on the success message and choose Inspect Element.
You will then see the browser’s developer tools that contain various information about the message: its content, CSS class, etc.
In the example below I see that the message has a class “thanks” which could be used as a condition in the Element Visibility trigger. It was even better if the success message had a parameter called “id” but since it’s not available, we’ll use CSS class.
What do you enter into the CSS selector field? This is something we can test in our JavaScript console. To access the console, select the Console header in your developer tool. In the command field at the bottom of the console, type document.querySelector followed by parentheses around a pair of double quotes.
Between the quotes, you can enter any CSS selector and try this all out. Now, in this case, we had a div node, so we can look for the CSS by typing “div.contact-msg1” in the quotes.
Therefore, the whole text in the command field should read document.querySelectorAll(‘div.contact-msg1’).
So now you have confirmed that this is the right CSS selector to enter into the Google Tag Manager trigger configuration. Copy the whole node div.contact-msg1.
The trigger configuration has a few options for trigger frequency. In the case of this particular form, users can fill it out and submit it multiple times without navigating away from the page. Because of this, you should select the option Every time the element appears on screen.
Visibility
The visibility field asks how much of the element needs to be visible for the trigger to fire. If it’s at the edge of the screen, it’s not visible to the user, but you still want to trigger the tag. 50% is fine in that case.
Observe DOM Changes
You’ll also need to select the Observe DOM changes option. A little warning box will appear because it can slightly affect site performance, but realistically, it shouldn’t affect too much of the page load time.
Trigger on All Elements
For the last option, select the All Visibility Events button.
Remember to give your trigger an appropriate name that will make sense when you look at your tags later. Save and refresh the page.
Create Tag
Go ahead and connect this to your predefined event tag from earlier. Click on the tag to edit it and you can simply switch out the trigger.
Give an appropriate name for the tag
Click on the Tag Configuration
And Select “Google Analytics – Universal Analytics”
Select Track type as “Event”
Add appropriate naming for the “event tracking parameters” and select “google analytics settings”
Click on the triggering and select a trigger we have recently created.
Remember to save on your way out!
Testing
To test your new trigger, Click on the preview button.
Fill out and submit your form one more time. Once you’ve submitted it, you’ll see your element visibility tag appear in Google Tag Manager.
And since you have set it up as an event, you’ll also see a new conversion inside of Google Analytics.
