08 Dec

Tracking TypeForm with Google Tag Manager

Unlock powerful marketing insights with conversion data from your Typeform submissions. By embedding Typeform forms, you can enhance audience engagement and generate valuable leads. With Google Tag Manager (GTM) and some clever event listener code, tracking successful form submissions and changes between form steps is a breeze.

 

Here’s how to get started:

1. Create a Custom HTML Tag:
Begin by setting up a custom HTML tag in GTM, where you can easily insert the Typeform event listener code. Once the code is in place, it will trigger a dataLayer event whenever someone successfully submits a Typeform form using the event name [typeform_submitted].

 

2. Track Step Changes:
Whenever a user navigates between steps in the form—whether going forward or back—an event named [typeform_step_change] will be triggered. This allows you to capture interactions as users move through the form.

 

3. Set Up Custom Event Triggers:
To activate your marketing tags or pixels, you’ll need to create two custom event triggers in GTM:

    • [typeform_submitted]: To track successful form submissions
    • [typeform_step_change]: To monitor any changes in form steps.

4. Utilize Data Layer Variables:
To refine your tracking and capture additional information, consider adding dataLayer variables as event parameters. Here are two useful variables:

    • [typeFormID]: This variable returns the unique Typeform form ID.
    • [stepReference]: This returns the reference ID for the current step in the form.

5. Integrate with Analytics Platforms:

With triggers and parameters set up, you’re now ready to incorporate this data into your event tags for platforms like Google Analytics, Piwik Pro, Mixpanel, and more.

 

By following these steps, you’ll be equipped to track Typeform submissions effectively. This will allow for deeper insights into user interactions and enhance your marketing strategies.

Happy tracking!

				
					<script>
// Listen for messages from the embedded Typeform iframe
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

// Listen to message from the child window
eventer(messageEvent, function(event) {
    // Check the origin of the message for security
    // You can modify 'https://your-typeform-origin.com' with your actual Typeform URL
    if (event.origin !== 'https://your-typeform-origin.com') {
        return; // Exit if the origin doesn't match
    }

    // Extract the data from the event
    var messageData = event.message ? event.message : event.data;

    // Handle form submission
    if (messageData.type === "form-submit") {
        console.log("Typeform Conversion detected!"); // Descriptive log
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'typeform_submitted',
            'typeFormID': messageData.formId
        });
    } 
    // Handle form step change
    else if (messageData.type === "form-screen-changed") {
        console.log("Typeform Step Changed!"); // Descriptive log
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'typeform_step_change',
            'typeFormID': messageData.formId,
            'stepReference': messageData.ref
        });
    }
}, false);
</script>

Leave a Reply