Dynamically pass UTM values from a URL to an embedded form (for advanced users)

You can use Typeform’s UTM tracking feature to add static UTM values to forms embedded on websites and email messages. But what if you’re expecting to have different UTM values over time, based on how visitors access your site?

This article covers how to dynamically pass UTM values from a website URL to an embedded form - you’ll then be able to view and track these values in Google Analytics. You’ll need access to your site code to set this up. If you’re not comfortable editing this code, you might want a tech-savvy friend on hand to help out.

1. First, set up a Google Analytics integration for your form through the Connect panel. This article gives step-by-step instructions.

2. Go to your Create panel and click the gear icon to open the Settings menu. Click the arrow next to UTM tracking.

Then click Tracking.

3. Toggle as many UTM parameters as you’d like. Here, we’ll activate utm_source and utm_medium. Click Save when you're done.

4. Publish the form so the changes are applied.

5. Choose your preferred way of embedding the form from the Share panel.

6. After choosing your embed mode, add any necessary settings in the right-hand panel. Then, click the Start embedding button, and click Copy when the pop-up appears.

7. Paste this code in your site code editor.

(Note: Embedding your form in full-page format? Check out this section of the help article on passing Hidden Fields from a URL to an embedded form. Follow steps 1-3 on that page before continuing with step 8 of this article.)

Now, just a couple more crucial steps...

8. Make sure your website URL includes the UTM parameters you activated: utm_source and utm_medium. It should look something like this:

www.mywebsite.com?utm_source=newsletter&utm_medium=email

9. Access your site code and find where your form is embedded. Add the following snippet to the form embed code:

data-tf-transitive-search-params

It should be added after the data-tf-live attribute, as the image below shows.

If you don't want to fiddle with adding attributes manually to your embed code, you can also just go to the Advanced panel and toggle the Read URL parameters switch.

Done! Make sure to save your code. Now, your form will capture ‘utm_source’ and ‘utm_medium’ values from your URL, even if these values change. Typeform results including UTM tracking values should begin to appear in Google Analytics within the next day.