There are plenty of literature out there on the internet on how to capture a successful form submission using Google Tag Manager aka GTM and Google Analytics using the dataLayer on page. The caveat to that approach is that you may have to ask your developers to add this on the contact page, which may not be convenient for a large portion of web owners who need to track their conversions on site.
Fear not! There’s another way to get it done – it’s simpler, done only in GTM and best of all, you don’t have to use a dataLayer.
The Concept
Watch/listen for a DOM change with a specific GTM trigger that will keep an eye on whether a specific element is visible. This element that we’re after is the success message from the Contact Form 7 plugin that appears once the form has been successfully sent.
Easy right? Let’s do it.
Implementation
Step 1 – the trigger
In GTM, create a new trigger and set it up as follows.
The Element Selector refers to the class name that accompanies the Success message once an enquiry is sent, which is .wpcf7-mail-sent-ok
Change the Page Path URL to match your own Contact page URL.
Step 2 – the GA event
In GTM, create a new tag and set it up as follows.
This tag is just a plain GA event, which requires captions for Category, Action and Label.
Non-interaction hit is set to true so that this event collection does not mess with your bounce rates or intepret this tag as a new page view equivalent.
That’s it!
Save and publish, and you’re done!