Typeform Conversion Tracking in Google Tag Manager Tutorial

Introduction

We use Typeform as a quick and efficient way to create online surveys and to gather customer feedback. Often, when using 3rd party solutions you might realize there are some integration issues that can cause bottlenecks and stop your progress. Typeform offers some solutions for digital analytics and conversion tracking, but in some used cases, you might need an additional & custom analytics setup. In this tutorial you can discover:

1. how to implement Typeform conversion tracking through Google Tag Manager and Google Analytics implementation

2. how to implement Facebook conversion pixel to measure Typeform conversions

3. how to add Google Ads conversion pixel to Typeform

What is Typeform?

Typeform is an easy-to-use online form builder that lets you create beautiful, engaging, and effective web forms and online surveys. You can use Typeform to gather data from your customers or just to get feedback on your latest idea.

We often use it for idea validations or for gathering data when the product is in the MVP stage. For example, we decided to use Typeform to gather user reviews. As we used Webflow to create a landing page for our product, we linked users through a content module straight to the Typeform survey.

For the purposes of this tutorial, I created a testing Webflow landing page that links to Typeform to showcase the conversion tracking problem and how to fix it:

What are the pros & cons of using Typeform?

Like any other tool, Typeform also has some advantages and disadvantages. Of course, it depends on what you are using and what you would like to do with it. Here are the pros and cons of using Typeform from our experience:

Pros of using Typeform:

• flexibility in creation (variety of question types, logic, design adaptations, etc.)

• implementation speed

• many possible integrations (such as Google Analytics, Google Tag Manager, ActiveCampaign, Zapier, etc.)

• existing event triggers (survey interactions, form submit)

Cons of using Typeform:

• lack of proper native tracking features

• more complex analytics implementation is required for correct conversion tracking (to get the proper traffic source)

• event triggers for survey interactions are not easily distinguished

With Typeform native tracking features, you can get information on the number of responses, add Typeform as a page to the site by connecting to your Google Analytics 4/Google Tag Manager, and send event data when a Typeform is submitted. But, you cannot natively attribute event data to the correct traffic source. This is a huge problem if you are using a landing page and have active marketing campaigns.

Adding Google Tag Manager to Typeform

Typeform has a short tutorial on how to add Google Tag Manager to Typeform which you can access here, but some crucial things for proper conversion tracking are missing. I will mention those things later on in the article. For now, let's integrate GTM with Typeform:

1. Go to Google Tag Manager and open an account there. Save Google Tag Manager container ID in notes.

2. Make sure your landing page is connected to Google Tag Manager (I've created a landing page through Webflow, so this is how I integrated it).

3. Go to Typeform, select your form, and click on "Connect". Search for Google Tag Manager and Click Connect.

4. Insert your Google Tag Manager container ID to the form below to start tracking:

Typeform debugging in Google Tag Manager

After you successfully add the Google Tag Manager ID to your Typeform, it's time to check if we see the incoming data in GTM preview mode.

1. Create a Google Analytics 4 account and a general Google Analytics 4 Pageview tag in Google Tag Manager.

2. Go to the "preview mode" in Google Tag Manager, insert your URL with test tracking parameters in the preview mode debugger. Check if your GTM is loading when you load the website. After everything is working OK on the landing page, let's see what happens if we open the Typeform. 6. Open Typeform from your landing page, go once again to the Real time report in Google Analytics, and check out the traffic/sources report. As Typeform is a new domain, the switch between domains will kill your UTM parameters which means you will see (none)/(direct) as your traffic source:

This is a huge problem as we have to be capable of connecting marketing investment with the results. If we do nothing about this tracking parameters loss, completed Typeform forms will be attributed as conversions to (none)/(direct) as a source/medium.

Preparations for Typeform Google Tag Manager Conversion Tracking

Typeform has one feature called "Hidden fields" that fixes this issue, but only if you are not using a landing page and leading users straight to the Typeform (for example you share the Typeform on Facebook). But, if you are driving users to a landing page, the hidden fields feature will not solve the problem of attributing the proper traffic source.

The solution here is to transfer UTMs from the referring domain automatically to Typeform. Benjamin Garay from Growth France wrote a great article about it and I decided to write a complete tutorial with some additional recommended steps. Here is everything you have to do to make sure you are receiving proper traffic information on our Typeform:

1. Add typeform.com as a referral exclusion in your Google Analytics property settings. Go to "Tracking info" and open "Referral Exclusion List" and insert "typeform.com". This is just to make sure that Typeform traffic is not reported as a referral:

2. Now let's go back to Google Tag Manager. Configure a new Constant variable called "Auto Link Domains" and enter the domain of your landing page and Typeform domain separated with a comma. We will use this variable to define cross-domain tracking parameters in our Google Analytics variable:

3. Once you have configured your new Constant variable, open your Google Analytics variable in Google Tag Manager and add:

a) allowLinker field with "true" value to "Field to Set". This field grabs the Client ID value from the URL and stores it, by default, in the _ga cookie.

b) your "Auto Link Domains" variable under Cross-domain tracking/Auto Link Domains:

4. Now it's time to transfer UTMs from the referring domain automatically to Typeform. To do that, we will use this script. The script should fire when it recognizes UTM's in the URL. If so, it will automatically add UTM's to a domain we input, in this case, the Typeform URL. Replace the domain in line 3 with your Typeform domain and prepare the script in a doc:

5. Before we implement the script in Google Tag Manager, we need to create 3 URL variables (URL - utm_medium / URL - utm_source / UTM - utm_campaign) with the same naming from the script (if you input different names in GTM, don't forget to change variable names in the script):

6. To create variables, go to the variables section in the GTM. Select URL variable type, select "Query" as a component type and configure each variable as following:

7. Now let's implement the script in Google Tag Manager. Create a new Custom HTML tag and copy the rewritten and edited script.

8. Create a new DOM ready trigger and call it "Page View - DOM ready - UTMs". The script will launch when loading the DOM and only if the 3 defined UTMs contain something other than the value “undefined”:

9. Add DOM ready trigger "Page View - DOM ready - UTMs" as a trigger to the created Custom HTML tag.

10. Once again, create a test URL and check if you see the proper traffic source in Google Analytics, like this:

Setting up Typeform conversion tracking through Google Tag Manager and Google Analytics

Now that you can track proper traffic sources in Google Analytics, let's continue with Typeform conversion tracking in Google Tag Manager. I will show you how to prepare Typeform conversion tracking for Facebook & Google Ads advertising and how to set up Google Analytics goals.

How to track Typeform conversions in Google Analytics?

To finish tracking Typeform conversions in Google Analytics, we need to create a new Google Analytics events tag in Google Tag Manager and a goal in Google Analytics. Follow these steps:

1. Create a new Google Analytics tag for an event and fill out the event tracking parameters. I am using variable Page URL as a label as that will dynamically insert the URL where the event is triggered.

2. It's time to set up your trigger. As all Typeforms trigger "TypeformSubmit" custom event, we will create a Custom event trigger that fires when "TypeformSubmit" is triggered:

If you are using multiple Typeforms on the same landing page, use additional variables to differentiate the forms (for example Page URL etc.)

3. Go to the preview mode, submit your Typeform to trigger the TypeformSubmit event and check if your tag is firing:

4. If you click on the fired tag, you can see all the information that will be transferred to Google Analytics:

5. Go to Google Analytics, open your Admin panel, and create a new goal with the event tracking parameters. For this instance, I am using only the event action field as the event name is unique:

6. Create another testing link in the URL Builder and check if you are seeing the proper traffic source for your created goal:

How to add a Facebook conversion pixel to measure Typeform conversions?

To implement a Facebook conversion pixel to track Typeform conversions, we will use a Tag Template.

1. Click to create a new tag, go to the Community Template Gallery and select Facebook Pixel. Add it to your workspace.

2. Input your Facebook Pixel ID (if you don't have one, go to Facebook Business Manager and create a new Facebook Pixel) and now pick either a Standard or a Custom event. For this instance, I am creating a Custom event called "Typeform Submitted" as it's always nice to have everything standardized:

3. Add your created Custom event as a trigger and save the tag:

4. Go to the preview mode, submit your Typeform to trigger the TypeformSubmit event and check if your Facebook conversion tag is firing:

How to add a Google Ads conversion pixel to Typeform?

1. To add a Google Ads conversion pixel, first, you need to create a conversion in Google Ads. After you define it, you should get all the necessary information for a GTM tag:

2. Once you have created a conversion in Google ads, head over to Google Tag Manager and first create a Conversion Linker tag.

3. Now let's create a new Google Ads Conversion Tracking tag. Insert your Conversion ID and Conversion Label and add your Custom Event trigger:

4. Go to the preview mode, submit your Typeform to trigger the TypeformSubmit event, and check if your Google Ads tag is firing:

Conclusion

Typeform is a great tool for the quick and efficient creation of online surveys, but it has some limitations in regards to proper conversion tracking. With this tutorial you can enjoy all the advantages that Typeform has, like flexibility and implementation speed, but also be able to measure conversions properly and attribute its value to a proper traffic source. This allows you to connect marketing investment to the results and optimize digital marketing campaigns more efficiently.