If you've been trying to set up goal tracking for form completion without success, you're not alone. There are many reasons why it doesn't work, but one of the more common is that the form you're trying to track is in an iframe.
In this blog post, we'll go through step-by-step how to set up tracking in Google Tag manager to track when someone fills out the form and how you can then get that data into Google Analytics.
OBS! This guide only applies to forms that are in an iframe and therefore do not cause the Google Tag Manager form submission trigger to fire when you have it set up.
1. Create a script that can be intercepted in the form's thank you message.
Lägg in detta skript tillsammans med tackmeddelandet som visas när någon fyller i formuläret.
<script type="text/javascript">
window.parent.postMessage("FORM_SUBMITTED", "*")
</script>
This script sends information to the main page where the iframe is located which can then be read from Google Tag Manager. In this case we have set the message to be displayed to "FORM_SUBMITTED" but you can change this to anything you feel is more appropriate. However, remember that you will then need to change to the same message in the listener script further down the guide.
2. Create a listening script in Google Tag Manager
Skapa en anpassat HTML tagg i Google Tag Manager med följande Script:
<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data === 'FORM_SUBMITTED') {
window.dataLayer.push({
'event': 'iframe-form-success'
});
}
});
</script>
With this script we listen for the "FORM_SUBMITTED" message to be returned.
3. Create a custom event (Trigger).
Create a trigger as above.
4. Create a tag to send the event to Google Analytics (UA)
5. Create a goal in Google Analytics
.svg)
