Intro
In performance marketing, it is often helpful or necessary to pass parameters to the flow and the visitor's response, such as utm_source, utm_campaign, or gclid to identify and track the user.
There are 5 UTM parameters, you can add to your URL:
utm_source: The site (source), where your user is coming from, e.g. Google, Instagram, Facebook, etc.utm_medium: The marketing medium, e.g. newsletter, banner, etc.utm_campaign: The individual campaign name, e.g. Summer Sale, Christmas Promo, etc.utm_term: The targeted paid keywords in a designated ad campaign.utm_content: Used to tell apart similar content or links in the same ad. For instance, if you have two buttons in one email, you can use utm_content with different values to see which version works better.
You could also find click identifier in your responses, e.g. from Google (gclid), Facebook (fbclid), which are automatically added to the URL.
💡 Tip: You can also use URL parameters for personalization throughout your flow. Check out this article to learn more.
Setup
Stand-Alone (URL)
These parameters are usually found in the URL, e.g. heyflow.id/myflow?utm_source=Google&utm_campaign=spring01. This URL contains the following two parameters: utm_source and utm_campaign.
With Heyflow, passing these parameters from the URL is quite simple.
To enable UTM parameters, head over to the Settings page of your heyflow. On the Tracking tab, make sure the Pass URL parameters option is on.
🔎 We automatically add all URL parameters to your flow responses, so you do not need any hidden input fields. If you're using our integrations or webhook feature, check out the information below.
❗ Important: The query string like ?utm_source=Google&utm_campaign=spring01 must follow the path, e.g. heyflow.id/myflow immediately: heyflow.id/myflow?utm_source=Google&utm_campaign=spring01.
The (optional) screen anchor, e.g. #start must be the last element of the URL: heyflow.id/myflow?utm_source=Google&utm_campaign=spring01#start
❗ Important: If you have duplicated values in your URL parameters, e.g.
?utm_campaign=abc&utm_campaign=abc will deduplicate,
?utm_campaign=abc&utm_campaign=foobar, the value in the flow will be always the last one for all implementations and redirects (in this case foobar).
Embedded
If you have embedded your heyflow on a website, you may want to pass all the parameters of the parent website to the heyflow.
For example, your heyflow could be embedded on your landing page my-website.com and the parameter could be passed in the URL, e.g. like this: my-website.com?utm_source=Google&utm_campaign=spring01.
With our website integration script, URL parameters from the parent page, can be automatically passed to your heyflow. Passing parameters from the parent page are now synced with your heyflow’s settings and enabled by default.
Bonus: Manually add URL parameters to embedded Heyflow
Another method to add URL parameters to your (embedded) heyflow, is to define them in the <heyflow-wrapper> tag directly, via the url-parameters attribute like so:
<heyflow-wrapper flow-id="test" url-parameters="utm_source=Google&utm_campaign=spring01"></heyflow-wrapper>
The URL parameters defined here in the tag will be added to those passed read the URL.
❗ The url-parameters attribute must be filled when the heyflow is initialized. Updating the attribute after the heyflow has been loaded will not pass updated parameters.
Pass parameters to response handlers or webhook
If you want to pass URL/UTM parameters from your flow to HubSpot, Salesforce, HighLevel, or any other response handler or webhooks via Heyflow, you need to set up a hidden input field to capture the data. Once set up, you can map these input fields to corresponding fields in your response handler of choice.
The UTM parameters will then be automatically passed along with each response—without your visitors noticing. 🚀