Validating a new business idea doesn’t have to be complicated. This is why startups or business development often use Typeform on their landingpages – It is a smart way to save time and money before investing resources into webdesign.
If you did not know yet: Typeform is a flexible tool for integrating customised contact forms and/or questionnaires on your website (or hosted externally, if you want to).
It helps you validating demand, without even needing a developer. This type of contact form can easily be set up on Typeforms website, you only need to configure the questions and – set up conversion tracking!

How to track conversions for embedded typeforms

On the typeform website, there can be found a thorough documentation, on how to set-up conversion tracking. You probably have been there already 😉
However, if you are struggling with their documentation, it doesn’t work for you or want to find an alternative way of implementation, I can help you!

Embedding a typeform on your website is certainly the preferably method, as you do not send the user away from your website, which would harm user experience and most likely result in a lower conversionrate.
Also, sceptical users might be surprised seeing themselves on a different domain than where they originally landed on.
So yes, embedding the typeform Iframe on your website is the way to go.
However, as the interactions with the form technically happen on a different website (an Iframe is just a window, showing content of a different website on your), this makes conversion tracking ta little bit tricky, as usually you cannot place tracking tags on a third-party website. I wrote “usually”; typeform offers this, however this article is about an alterative approach.

Listening to events within the Iframe

The solution for tracking embedded typeform conversions, is an Iframe “event listener”: 
It is a javascript, that listens to the interactions happening between the user and the Iframe, based on these interactions (Iframe events) you then can set-up data-layer events.
Once these data layer events are available, your path is clear to configure your conversions within Google Tag Manager!

Setting up the event listener and the events in GTM

The full process looks like this:

1. Set up event listener and push events to the data layer
2. Set up custom-event trigger based on data-layer event
3. Set up your conversion (GA4 event, Google Ads, Meta etc.) and connect it to your new trigger
4. Optionally: Set up data layer variables

Practically, this would look like this:
You have a typeform integrated on your website, in this example it has 3 steps, this even allows us to play around with a data layer variable for the different steps of the form. (Whenever I have time, I will add more about it to this article)

You can trigger this script on all pages or only on those pages where your typeform is on. Both has advantages and disadvantages but this is irrelevant right now.

Next, set up a “custom event” trigger in GTM. As the event name, choose exactly the name of the event, that you are pushing to the data-layer when the form is submitted.

Lastly, you simply create the conversion from your relevant marketing platforms (GA4, Google Ads, TikTok…) and connect it with your newly created trigger!

Feel free to test your new setup with the GTM debug view.

It works: You can see that after the submission of the form (right side), the dataLayer event “typeform_submission” is available. Based on the newly created trigger, we now push an event to GA4, providing your marketing analytics tool with valuable insights!

This post should give you a rough idea of how you can solve the issue of conversion tracking of embedded typeform forms on your website. If you want to integrate it yourself and you struggle, do not hesitate to reach out to me:

I offer personalised tracking consultancy, together we can fix your marketing tracking in no time!