1. Help
  2. Advanced
  3. Sharing, embedding & notifications
  4. Dynamically pass UTM values from a URL to an embedded typeform (for advanced users)

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

You can use Typeform’s UTM tracking feature to add static UTM values to typeforms embedded on websites, email messages, and as chats. 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.

utmpass3.png

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

utmpass4.png

7. Paste this code in your site code editor.

utmpass5.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="utm_source, utm_medium"

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

utmpass6.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

Find Answers
Contact Support