Minimal JS knowledge requires (Two copy-paste and Less than one minute).
Step 1/4:
Google/youtube What are UTM (Very useful for Marketing).
https://support.google.com/analytics/answer/1033863
Step 2/4:
Create a UTM link. Useful tool:
https://ga-dev-tools.appspot.com/campaign-url-builder/
In this example the UTM is:
?utm_source=facebook&utm_medium=post&utm_campaign=webflow
So the full link look like this:
www.my-site.com?utm_source=facebook&utm_medium=post&utm_campaign=webflow
Step 3/4
Copy-Paste Before body (Per page -or- entire website).
The code structure:
- Get URL parameters -
code credit: https://www.sitepoint.com/get-url-parameters-with-javascript/ - Get webflow form elements by id and set the value to UTM param X.
<!-- Getting The URL Parameter - and set UTM inside webflow form - Siton -->
<script>
function getAllUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// set parameter name and value (use 'true' if empty)
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
// (optional) keep case consistent
paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
// if the paramName ends with square brackets, e.g. colors[] or colors[2]
if (paramName.match(/\[(\d+)?\]$/)) {
// create key if it doesn't exist
var key = paramName.replace(/\[(\d+)?\]/, '');
if (!obj[key]) obj[key] = [];
// if it's an indexed array e.g. colors[2]
if (paramName.match(/\[\d+\]$/)) {
// get the index value and add the entry at the appropriate position
var index = /\[(\d+)\]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
// otherwise add the value to the end of the array
obj[key].push(paramValue);
}
} else {
// we're dealing with a string
if (!obj[paramName]) {
// if it doesn't exist, create property
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
// if property does exist and it's a string, convert it to an array
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
// otherwise add the property
obj[paramName].push(paramValue);
}
}
}
}
return obj;
}
/* get data object */
var getAllUrlParams = getAllUrlParams();
/* Check if the url with utm_parameters */
let isEmpty = jQuery.isEmptyObject(getAllUrlParams);
if(!isEmpty){
/* utm data */
let utm_source_value = getAllUrlParams.utm_source;
let utm_medium_value = getAllUrlParams.utm_medium;
let utm_campaign_value = getAllUrlParams.utm_campaign;
/* webflow form object (You should add embed code under webflow designer */
var utm_source_form_elem = document.getElementById("utm_source");
var utm_medium_form_elem = document.getElementById("utm_medium")
var utm_campaign_form_elem = document.getElementById("utm_campaign");
/* Check if elem exsist to avoid console errors */
if(utm_source_form_elem){
utm_source_form_elem.value = utm_source_value;
}
if(utm_medium_form_elem){
utm_medium_form_elem.value = utm_medium_value;
}
if(utm_campaign_form_elem){
utm_campaign_form_elem.value = utm_campaign_value;
}
}
</script>
The code store the parameters inside getAllUrlParams object
If we want for example the utm_source we write:
getAllUrlParams.utm_source
Related: https://www.w3schools.com/js/js_json_objects.asp
Webflow side
Step 4/4
Add form and inside the form add embed html Copy - Paste (By code we are going to set the value of those feilds).
<input type="text" id="utm_source" name="utm_source"><br>
<input type="text" id="utm_medium" name="utm_medium"><br>
<input type="text" id="utm_campaign" name="utm_campaign"><br>
** Not mandatory: Its better to put the HTML embed before the submit button (Like this the form submission table will be more readable).
Publish
The code fill up the empty feilds with UTM parameters:
Set type=“hidden”
If everything works as it should - set the fields type to hidden
I like to add an empty script (LIke this its more visual that I use some custom code inside this form).
validation
My code use if statements (Check if the fields exist. So its also ok to put this code under site setting (Will work fine also on pages without form -and/or- url without parameters.
