What are some quick and easy ways to add UTM parameters to URLs using Webflow without needing any JavaScript knowledge?
TL;DR
- Manually add UTM parameters in link settings by appending them to URLs in the Settings panel.
- Use Webflow CMS fields to dynamically generate UTM links for different collection items.
- Capture UTM values in Webflow Forms using hidden input fields and prefilled links.
- Utilize Google’s UTM Builder to generate properly formatted URLs for tracking.
- Append UTM parameters to navigation and footer links for consistent campaign tracking.
Adding UTM parameters to URLs in Webflow is simple and doesn't require JavaScript. Here are the best ways to do it:
1. Manually Add UTM Parameters in Link Settings
- Go to your Webflow project and open the page where you need to add a link.
- Select the link element (Button, Text Link, or Link Block).
- In the Settings panel, find the Link field.
- Append the UTM parameters manually, e.g.,:
https://example.com/?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale - Save and Publish the changes.
2. Use Webflow’s CMS for Dynamic UTM Links
- In Webflow’s CMS Collection, create fields for UTM parameters like utm_source, utm_medium, and utm_campaign.
- While adding or editing a Collection item, enter values for each UTM parameter.
- In the Link Setting, use dynamic fields to construct a link:
https://example.com/?utm_source=[CMS Field]&utm_medium=[CMS Field]&utm_campaign=[CMS Field] - Bind these fields to ensure each CMS item dynamically generates its own UTM parameters.
3. Use Webflow Forms to Append UTM Parameters to Hidden Fields
- Add hidden input fields in Webflow Forms to capture UTM values.
- Manually prefill the UTM parameters inside each link leading users to the form.
- Example:
https://example.com/contact?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale - The form submission will contain the UTM values.
4. Use a URL Builder for Accuracy
- If you have complex tracking needs, use Google’s UTM Builder (Campaign URL Builder).
- Generate a properly formatted URL and paste it into Webflow links manually or dynamically.
5. Add UTM Parameters to Navigation Links
- Open the Navigation menu and edit links manually by appending UTM parameters.
- Update footer links or buttons with preset UTM values for marketing campaigns.
Summary
To add UTM parameters in Webflow without coding, manually append them in link settings, use CMS fields for dynamic generation, update web forms with hidden fields, leverage Google’s UTM builder for accuracy, and modify navigation links as needed. This ensures Webflow tracks campaigns effectively without requiring JavaScript.