Type Form Event Listener
How to track Typeform Submissions with google tag manager
Elevate your marketing insights with Typeform conversion data. Use embedded Typeform forms for audience engagement and lead generation. You can easily track successful form submissions as conversions and form step changes as interactions using Google Tag Manager (GTM) and this Typeform event listener code.
Begin by creating a custom HTML tag type where you can conveniently paste the listener code. Once implemented, the code generates a dataLayer event when a user successfully submits a Typeform form with the event name [typeform_submitted].
When a user proceeds or goes back to a different step in a form, an event named [typeform_step_change] is triggered.
To enable the firing of your marketing tags/pixels, you need to create two custom event triggers using the conversion and step change event names:
- [typeform_submitted] -> For successful form submissions
- [typeform_step_change] -> for when the form step changes.
To further narrow down your trigger conditions or capture form details such as form ID and form step reference ID, you can use the following dataLayer variables as event parameters:
- [typeFormID] ->which returns the Typeform form ID
- [stepReference] ->which returns the step reference in the form.
You can now include triggers and parameters in your event tag for Google Analytics, Piwik Pro, Mixpanel, and other platforms.
Credit: Code initially created by Codeandtonic (we only modified the code)
<script>
///LISTEN FOR MESSAGE FROM IFRAME TYPEFORM
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
var key = e.message ? "message" : "data";
var data = e[key];
if(data.type == "form-submit"){
console.log("???? Typeform Conversion detected!")
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'typeform_submitted',
'typeFormID': data.formId
});
}
else if (data.type == "form-screen-changed") {
console.log("???? Typeform Step Changed!")
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'typeform_step_change',
'typeFormID': data.formId,
'stepReference': data.ref
});
}
},false);
</script>
Video of how to use the listener
Related Event Listener
Formidable Form
ConvertKit Form
Web Engage
