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 integrations
In order to map UTM parameters in your CRM tool, via Heyflow, it is not enough to simply have them in your responses. You need something more ātangibleā, something likeā¦ a block!
In this case, weāll have to use input fields. Youāll simply define the variable as the name of the respective UTM parameter (i.e. āutm_sourceā, āutm_mediumā, etc.) and, preferably, hide the block, since you donāt want the visitors of your flow to see these fields:
This allows you to map these input fields, and link them to fields in your CRM tool, and you can easily pass on UTM parameters to your CRM tool, without your visitors noticing. Furthermore, UTM parameters will also get passed on via webhooks using this exact same method.