video guide

Passing UTM parameters from embedded typeforms

Passing UTM parameters from embedded typeforms
Userlevel 7
Badge +5
  • Tech Community Advocate
  • 12702 replies

Want to pass data from Google Analytics into your embedded Typeform? Follow the steps below to pass UTM variables into your form. 

 

 

1. Make sure you have connected your typeform to Google Analytics. Check out our help center article for more info.

2. Go to Typeform Builder (Create Panel) and add two hidden fields to your form. Or, you can automatically turn on UTM tracking in your form settings: 

xeDy-uPBvj9bZivD5-owqXkAyfltOWr-TG_PLE5h9cFq1HGmUFNNlZEXzgrGzmIOwVpN8orDFi4CZDu3DW4xnF8nTaQIGsx5oSNKBjWlwfXHSlB_osKktKZNz4eqfEIMgu1ZPWo_

 

 

4. Publish the form so the changes are applied.

5. Now go to the Share panel and choose your preferred way of embedding the form.

6. Click on get the code and when the pop-up window appears copy the code.

 

kGZtvNOVLSo72bcBZ4HQWiT2XFMaPQNGy2npndkjJXTQtO3GVqMnBvvjSXqMH_onmNj-bY3OwBYPNOg-j0B9-oMVRMNbakcbaRT6tQDVXE3IWhNl8hfZyOUD7eV3U3wnjnB-5nvl

7. Paste it in your code editor.

 

IMPORTANT

Make sure your website URL has the parameters with the same name, that is, utm_source and utm_medium. It should look like this... 

 

dg7fAZt882gE5q_9tf2IIFUUGshaEhF_1EJWcOr_Z3ancbFF5BYxP8nj6f2BLn74VwFCGr-8NY8pfYMdI736-3WC07_4_s5SWnrRLOmQ3iK7twbvg7x36acO21ytyEyD3vUetRqE

9. Go to the embedded code snippet and add the following part to the code you pasted on your website - 

data-transferable-url-parameters="utm_source, utm_medium"

10. Try not to break the code. Add it after data-mode="your embed mode" or after the Typeform URL just as in the screenshot. It should look like this:

 

GkCzsA7KjzJQt6iLu5CFQDTRdGWg1cqRraL02HSiiQkQG4bqBnfdDGrwK85HIVfZsAI6qzaPp-A5E9s6EZtaW1W5A4A11Ucyw-Sbr8SMCVqzfBeLkq8pvLu1WcAmcu8I9vUdbl7P

 

All done, now head to your Google Analytics and it should show! 

 


29 replies

Userlevel 7
Badge +6

Thanks for this @Liz - that should help to explain the steps much more easily to folks. 

 

des

Userlevel 7
Badge +5

I hope so, @john.desborough ! :grin:

Thanks for this! Just wanted to clarify though, if my Google Analytics is implemented via GTM and I connect Typeform to GTM, will that work or do I still need to connect Google Analytics to Typeform directly? 

Userlevel 7
Badge +5

Hi @cay013 I would still suggest connecting Google Analytics to your form directly for the best performance of the integration!

Got it, thanks for the confirmation! Will do just that! Cheers!

Userlevel 7
Badge +5

@cay013 Not a problem! Let me know if you think of any other questions. :grinning:

Hey @Liz , does the “data-transferable-url-parameters” and “data-tf-transitive-search-params” do the same thing? Because I saw this post, https://www.typeform.com/help/a/dynamically-pass-utm-values-from-a-url-to-an-embedded-typeform-for-advanced-users-4406211186580/

and now I am all confused. Beg your pardon if I am unable to understand this simple thing but I am not a technical guy.

Would really appreciate your response.

Thanks in advance.

Userlevel 7
Badge +5

Hi @mahabulislam86 I’m not aware of the “data-tf-transitive-search-params”. Do you mind sharing where you saw it? It could be something new that I’ve missed!

Or @mathio do you know of this? 

Userlevel 7
Badge +5

Yes, both do the same, however each applies to different SDK version:

Current version (version 1) of our embed SDK uses data-tf-transitive-search-params. We strongly recommend you use this one.

Previous version (version 0) used data-transferable-url-parameters. we no longer recommend you use this it and we do not provide any support for it.

Userlevel 7
Badge +5

Thank you, @mathio !!

Hi @mahabulislam86 I’m not aware of the “data-tf-transitive-search-params”. Do you mind sharing where you saw it? It could be something new that I’ve missed!

Or @mathio do you know of this? 

Thank you for your quick response Liz. I’ve already shared the article link on my post where I came across the new term!

Yes, both do the same, however each applies to different SDK version:

Current version (version 1) of our embed SDK uses data-tf-transitive-search-params. We strongly recommend you use this one.

Previous version (version 0) used data-transferable-url-parameters. we no longer recommend you use this it and we do not provide any support for it.

Thanks @mathio for jumping quickly on this and clarifying.

@Liz 

I am almost positive I have done everything correctly, but I think I saw something about WIX not allowing this - I have embedded the typeform code in the WIX html block? I am still getting xxxx/xxxx for source/medium in Google Analytics. Hope you can help!

 

Userlevel 7
Badge +5

Hi @kym Wix can definitely be a bit finicky, but do you mind sending the URL where you have the form embedded so we can take a look?

@Liz 

Thanks - here’s the URL: https://www.mowbot.co.nz/get-started

Userlevel 7
Badge +5

Thanks, @kym ! When I look at the embed code, it looks like those parameters are being stripped, but I’m not sure why (or exactly where the issue is). I’m tagging @mathio to see if he can help. He’s out of office this week, but hopefully he’ll have some more insight when he returns!

Userlevel 7
Badge +5

Hello @kym 

you are passing both and data-tf-transitive-search-params and data-tf-hidden attributes. The second attribute overrides the first one and sets your hidden field values to “xxxxx”. Your code currently looks like this:

<div data-tf-widget="<form-id>" 
data-tf-transitive-search-params="utm_source, utm_medium, utm_campaign"
data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx"
...
></div>

You need to remove the data-tf-hidden attribute from your embed code:

<div data-tf-widget="<form-id>" 
data-tf-transitive-search-params="utm_source, utm_medium, utm_campaign"
...
></div>

This will make sure the hidden fields are read from your page query string. There should be no limitation on Wix side.

Userlevel 1
Badge
 <div data-tf-widget="vE4gSK9x" data-tf-transitive-search-params="utm_source, utm_medium, utm_campaign" data-tf-inline-on-mobile data-tf-iframe-props="title=TLM - Lead Form - Main" data-tf-medium="snippet" style="width: 100%; height: 400px;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

I’ve read through all the tutorials and community discussions. This the script that I have installed on my homepage (https://gettorchlight.com). I have integrated the form with my Google Analytics account as well. The Source/Medium is coming in as gettorchlight.com / referral. Any guidance on getting this to get the correct source/medium will be greatly appreciated.

Userlevel 7
Badge +5

Hi @tlm_engineering I think the issue is something with the embed itself, but I’m not 100% sure. @mathio may be able to help answer this for you!

Userlevel 7
Badge +5

Hi @tlm_engineering what value do you expect to receive? Are you passing the value in query string to your own website?

Userlevel 1
Badge

What I’m looking for is for the correct source/medium to populate. If a user comes in through a Google search, I want to the source/medium to show as google/organic. When I tested it out, I got my url/referral. I can force my ads to show the proper source and medium using utm parameters but I can’t do that for other sources (i.e. google, bing, ect) or mediums (organic, direct, referral). How do I get Typeform to properly attribute where my users are coming in from?

Userlevel 7
Badge +5

If you pass data-tf-transitive-search-params it will instruct your embed to load those values from query string params. If you dont pass it, it will be handled by your Google Analytics. To populate the value correctly I think you should use the shareGaInstance option.

Userlevel 1
Badge

After some serious troubleshooting, I think I figured it all out. Here is what I did (step-by-step) to finally get this to work:

  • To track the source/medium in Google Analytics (UA) add: data-tf-share-ga-instance="UA-xxxxxxx-x"
    • Replace xxxxxxx-x with your Analytics Property ID
    • <div data-tf-widget="FHQ8zC2G" data-tf-share-ga-instance="UA-1111111-1"data-tf-inline-on-mobile data-tf-iframe-props="title=Example" data-tf-medium="snippet" style="width:100%;height:400px;"></div><script src="//embed.typeform.com/next/embed.js"></script>
  • Google Analytics Integration
    • Get the list of available integrations (under the Connect option)
    • Select "Google Analytics"
    • Input the UA number in the available field
    • Save
  • Google Analytics Cookie Update
    • If installed with Tag Manager
    • Go to the Google Analytics Variable
    • Under "More Settings" go to "Fields to Set"
    • Set Field Name to cookieFlags
    • Set Value to samesite=none;secure
    • Publish
    • In GA4, this setting is found in the GA4 Tag Configuration
    • for the Field Name, set to cookie_flags (not cookieFlags)
    • The Value is the same as above
Userlevel 7
Badge +5

Holy! Thanks so much for sharing this, @tlm_engineering . This is fantastic!

Userlevel 1
Badge

We at Torchlight Marketing love this tool and as experts in digital advertising and analytics, we needed this to work. This really should be in Typeform’s Help Center articles.

Reply