In this example the UTM is: ?utm_source=facebook&utm_medium=post&utm_campaign=webflow
“Full” link: www.my-site.com?utm_source=facebook&utm_medium=post&utm_campaign=webflow
Step 3/4 Copy-PasteBefore body (Per page -or- entire website).
The code structure:
Get URL parameters -
Get webflow form elements by jquery class selector and set the value to this UTM param X.
<script>
var queryString = window.location.search;
console.log(queryString);
// ?utm_source=facebook&utm_medium=post&utm_campaign=webflow
var URLSearchParams_wb = new URLSearchParams(queryString);
const utmParameters = [
"utm_source",
"utm_medium",
"utm_campaign"
];
for (const utm_element of utmParameters) {
/* if utm_source exist */
$( "form" ).each(function( index ) {
if(URLSearchParams_wb.has(utm_element)){
console.log(utm_element + "is exist");
/* get UTM value of this utm param */
var value = URLSearchParams_wb.get(utm_element)
/* change form hidden feild to this utm url value */
$( this ).find("."+utm_element).val(value);
}
})
}/* end for loop */
</script>
Example: URLSearchParams.get("utm_source")
return: “facebook” (For the url example)
Webflow side
Step 4/4
Add form and inside the form add embed htmlCopy - Paste (By code we are going to set the value of those feilds).
I use if statements (Check if the fields exist. So it’s also ok to put this code under site setting (Will work fine also on pages without form -and/or- URL without parameters -or- some parameters).
** Default expires: Cookie is removed when the user closes the browser.
Copy-Paste before body
(Code update on: 13/12/2021)
<!-- https://github.com/js-cookie/js-cookie -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<!-- ezra siton code -->
<script>
const my_utmParameters = [
"utm_source",
"utm_medium",
"utm_campaign"
];
function getAllUrlParams(url) {
let obj = Object.fromEntries(new URLSearchParams(location.search));
return obj;
}
/* Check if Lead Cookie already exist */
var cookieExist = Cookies.get('Lead'); // => if false return undefined
/* get URL params object */
var getAllUrlParams = getAllUrlParams(); // return object
/*Convert a JavaScript object into a string */
var getAllUrlParamsJSON = JSON.stringify(getAllUrlParams);
/* Check if the url with utm_parameters */
let isEmpty = jQuery.isEmptyObject(getAllUrlParams); // return true/false
/* Case 1 - if the page with parameters & no cockie exsist */
if(!isEmpty && cookieExist === undefined){
/* Set lead object for the cockies */
console.log("Case 1 - parameters & no cockie exsist => Create Cockie");
/*
## Set Cookies ##
expires: If omitted, the cookie becomes a session cookie (This example)
*/
createLead();
setUTMformValues();
}/*end if*/
let compare = is_this_utm_equal_to_cockie_utm_values();
if(!isEmpty && cookieExist !== undefined){
/* it this utm params diff from current lead values create new lead*/
if(!compare){
/* Case 3 - cockie already exsist but with diff values Vs url utm parmas
(remove current Lead and generate new one)
*/
console.log("Case 3 - lead Exist, but with diff parames");
Cookies.remove('Lead');
createLead();
setUTMformValues();
}else{
console.log("Case 2 - lead exsist with this params");
setUTMformValues();
}
}
/* Case 4 - cookie Exist but page without any utm param */
if(isEmpty && cookieExist !== undefined){
console.log("Case 4 - cookie Exist but page without any utm param");
setUTMformValues();
}
function createLead(){
var lead = {
parameters: getAllUrlParams
};
/* if you want to add 2 days expires for example:
Cookies.set('Lead', 'lead', { expires: 2})
*/
Cookies.set('Lead', lead, { });
}
/* check if this utm url equal to the current values of cockie lead */
function is_this_utm_equal_to_cockie_utm_values(){
for (const this_utm_element of my_utmParameters) {
/* if utm_source exist */
let value_exsist = JSON.parse(cookieExist).parameters[this_utm_element] == getAllUrlParams[this_utm_element];
//console.log(`${value_exsist} - ${JSON.parse(cookieExist).parameters[this_utm_element]} compare to: ${getAllUrlParams[this_utm_element]}`);
if(value_exsist == false){
return false;
}
}/* end for loop */
return true;
}
function setUTMformValues(){
/* webflow form object (Add embed code under webflow designer inside FORM */
/*
<input type="text" class="utm_source" placeholder="utm_source" name="utm_source">
<input type="text" class="utm_medium" placeholder="utm_medium" name="utm_medium">
<input type="text" class="utm_campaign" placeholder="utm_campaign" name="utm_campaign">
*/
/* the value if the param is empty */
const empty_param_case = "null";
/* set feilds */
for (const this_utm_element of my_utmParameters) {
/* if utm_source exist */
set_utm_feild(this_utm_element);
}/* end for loop */
/* inner function */
function set_utm_feild(utm_type){
let utm_value = JSON.parse(Cookies.get('Lead')).parameters[utm_type];
let utm_nodes = document.getElementsByClassName(utm_type);
/* change all utm form feilds */
if(utm_nodes.length > 0){
for(var i = 0; i < utm_nodes.length; i++)
{
if(!!utm_value && utm_value !== undefined){
utm_nodes[i].value = utm_value;
}
else{
/* empty param for example ?utm_campaign= or ?utm_campaign */
utm_nodes[i].value = empty_param_case;
}
}/* end for */
}/* end if */
}// end inner set_utm_feild function */
}
</script>
expires
If you want to change Define when the cookie will be removed. Value must be a Number which will be interpreted as days from time of creation.
Default: Cookie is removed when the user closes the browser.
Cookies.set('Lead', lead, { expires: 30 });
UPDATE (Dec 21) Dynamic params code:
Wants to add more params? do this here (REMEMBER: "utm" name === "class" name
***case sensitive )
I am trying to save utm params inside a cookie (To keep the UTM also if the user go from page X to Y) . part of your suggestion but unfortunately it doesn’t work. Please see our sharable link below.
Thanks a lot for updating the code. i have copy-paste the code, before the body in all the pages but unfortunately, it doesn’t work. please see a screenshot attached
Is it possible to get the UTM parameters from the page and pass them directly into another custom code rather than input forms?
I have a custom code block which contains an iFrame to display on my landing page and I want to pass some of the utm parameters into the iFrame’s URL, as this will dynamically update the content in this iFrame.
let isEmpty = jQuery.isEmptyObject(getAllUrlParams);
"Uncaught reference error: JQuery is not defined. "
I thought webflow loads JQuery as standard?
I don’t see any cookies being set or getting the utm values to populate. Is there a simpler exact guide out there for this? Do you need to do anything other than paste in that code and use the embed codes?
I have been testing this together with GDPR cookie consent.
As a first time visitor, if I accept the cookies on the page, the cookie appears correctly but as soon as I leave the page to go to another one on the website, the cookie disappears again and will not write anything on hidden form fields (Forms with hidden fields are presents on job openings at Jobs | bunq).
Cookie script is live and issue can be seen already on bunq.com. Can it be solved?
EDIT: If I go back a second time to the original page, the cookie sticks, but who does that. I also tested without cookie consent block, behaves the same.
