Many contact forms now use Javascript to submit and do not redirect to a new page.
So to track the form, unless you trigger an event on the submit button, you need to listen for a piece of text (usually saying thank you).
We have created a custom HTML script that listens to the changes in the page and triggers an event called ‘formSubmitted’.
This event can then be used to fire a separate tag with event details to Google Analytics.
We’ve tested this on our contact form at Littledata and here’s how you can set it up too.
Try Littledata free for 30 days
Step 1
The first step is to go through the contact form and see what the steps are in completing it.
On ours, you just enter the information in the fields and press “SUBMIT MESSAGE”. When the message is sent out, the button will say “SENT!”. Here the only thing that changed was the text on the button from ‘submit message’ to ‘sent’.
We built this HTML script that listens to the changes on the page, but you’ll need to change line 10 to be whatever the message is in your form.
You will also need to change line 15 if you have multiple forms on the page.
<script>
// **** Littledata Javascript form tracker ****
// Generates a GTM custom event called 'formSubmitted'
// When an on-page form is submitted
// CHANGE the text to match the message displayed
// when the form is successfully completed
// It is not case sensitive
var text = "sent!"
// By default it will search for text within the first form
// Set to false if text is outside a form
// or change to a higher false if there are multiple forms
var formIndex = 0;
// OPTIONALLY, restrict the search to an HTML element ID
// If you leave this blank, the whole page will be searched;
// this causes the script to run more slowly
var targetId = ""
// **** No changes needed to the script below ****
text = text.toLowerCase()
dataLayer = dataLayer || [];
if (!formIndex && targetId.length == 0) console.error('Form tracker needs either a form or an element ID')
var checkEveryMilliseconds = 500;
formTrackerInterval = window.setInterval(function(){
var target = ""
if (formIndex >= 0) {
var form = document.getElementsByTagName('form')
target = (form.length > 0) ? form[formIndex].textContent : "";
}
else target = document.getElementById(targetId).textContent
target = target.toLowerCase()
if (target.indexOf(text) > -1) {
window.clearInterval(formTrackerInterval);
dataLayer.push({
event: 'formSubmitted'
})
}
},checkEveryMilliseconds)
</script>
Step 2
Now we need to add the script to listen out for when the form is submitted.
- Create a custom HTML tag in your GTM container.
- You can name the tag ‘LISTENER Contact form submit event’ or anything else you will remember it by.
- Choose the tag type ‘Custom HTML’.
- Copy and paste your HTML/Javascript into the textbox, and remember to change the var text (line 10) with your own text.
Step 3
This tag needs a firing trigger, specifying the rules when it needs to be activated.
If you can, only fire on specific pages – the script will slow down the page a little, as it runs every half a second to check the form.
Give the trigger a descriptive name – here I’ve chosen “PAGE About us”
Select trigger type as ‘Custom Event’ and for the event name put ” gtm.load “, which means this trigger at page load.
We want this trigger to work on a specific page only, so the firing rule goes ‘page path equals /about-us’, which means that our trigger will work on the www.littledata.io/about-us page only.
If you have a number of pages that have the form you’re tracking, then you could use ‘contains’ rule and select part of the link that is applicable to all. For example, if all of your links have word ‘contact’ in them, then your firing rule would say ‘page path contains contact’.
Step 4
Now that you have your listener tag set up, you need to create a separate tag to send the event details to Google Analytics.
Again, give it a descriptive name so you know what it’s for – here I’ve used ‘GA event – contact form submitted’.
Select tag type as ‘Universal Analytics’ and in the tracking ID field, select the variable that contains your GA tracking id.
For event category, action and label you have to specify the namings by which this data will be categorised in Google Analytics.
Step 5
This tag needs its own trigger to know when to fire, and here you have to use the event created by the listener tag set up during steps 2-3.
Here you have to specify that this tag can only fire when event ‘formSubmitted’ happens.
I’ve called my trigger ‘Contact form event’, selected trigger type as ‘custom event’ and entered event name ‘formSubmitted.
Now you can save it and test in the debugger mode. Try submitting your contact form and see if the event ‘formSubmitted’ appears. You should also see the tag ‘GA event – contact form submitted’ fire.
If everything’s ok, publish the container and do a final test. Make a new form submission and check if you can see the event details come through in Google Analytics real time reports, under events.
Need some help setting this up or Google Tag Manger? Get in touch with our lovely Google Analytics experts!
If you’re looking for more advanced help, our Google Analytics consulting team is here to help, too.
