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.
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.
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’.
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’.
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.
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? Why not get in touch by contacting our lovely Google Analytics experts?