Signup

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 typeforms 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 typeform - 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 typeform through the Connect panel. This article gives step-by-step instructions.

2. Go to your Create panel and click the gear icon in the right-hand sidebar to open Settings. Click the arrow next to UTM tracking.

utmpass.png

3. Activate as many UTM parameters as you’d like. Here, we’ll activate utm_source and utm_medium:

utm2.png

4. Publish the form so the changes are applied.

utmpass2.png

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

2023-07-24_12-20-39.png

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.

utm_pass06.png

7. Paste this code in your site code editor.

Screenshot 2023-11-08 at 11.08.30.png

(Note: Embedding your typeform in full-page format? Check out this section of the help article on passing Hidden Fields from a URL to an embedded typeform. 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 typeform is embedded. Add the following snippet to the typeform embed code:

data-tf-transitive-search-params

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

UTM_parameters.png

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.

Screenshot 2023-11-06 at 11.10.16.png

Done! Make sure to save your code. Now, your typeform 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.

Tap into our community knowledge