cookie persistence issue - how to resolve for UTM data

[Christine_LeBla]

If someone completes a form (on an LP) where the URL has UTM values included, those values reveal in the form-mail email receipt we receive. Some visitors will arrive at LP and complete form directly, no UTM data. In those cases form-mail receipt should reveal 'direct visit' or 'not available' where I've got the tokens for each UTM property.

Due to cookies preserving the end-user's last visit, it is not correctly tracking campaign info IF the end-user is a direct visit to the landing pg... it records the last campaign they interacted with and lists that, incorrectly in the email receipt (form-mail).

Set up that is not working:

Key Notes:
Place this script in the LP HTML, ideally just before the closing </body> tag, OR in an open text field in footer's HTML. Rich Text Block. (see JS below)  ...I cannot access closing body tag in the form or my LP, so I am utilizing a rich text block in the footer's HTML where I have some other public facing text... I just dropped the script in after in HTML vieew.

Ensure the form fields in Marketo are named exactly as “UTM Source”, “UTM Medium”, and “UTM Campaign.”

In the hidden UTM field within the form, under Autofill modal, Default Value: None, Direct Visit
Get Value from... I have: Use Default Value as Marketo Support advised not to use URL parameter; that the JS would take care of everything. And there is no other option here for "Not Set".

Please advise how I can resolve.

<script>
// Utility function to fetch URL parameters
function getUrlParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}

// Function to set values for UTM fields
function setUtmField(form, fieldName, utmParam) {
const value = getUrlParam(utmParam) || "Direct Visit";
const field = form.getFormElem().find(`[name="${fieldName}"]`);
if (field.length) {
field.val(value);

// Store in sessionStorage
if (value !== "Direct Visit") {
sessionStorage.setItem(fieldName, value);
} else {
sessionStorage.removeItem(fieldName);
}
}
}

// Wait for Marketo form to be ready
MktoForms2.whenReady(function(form) {
setUtmField(form, "UTM Source", "utm_source");
setUtmField(form, "UTM Medium", "utm_medium");
setUtmField(form, "UTM Campaign", "utm_campaign");
});
</script>

[SanfordWhiteman · Accepted solution]

(Please use the Syntax Highlighter (“Insert/Edit Code Sample”) when adding code so it’s readable. I edited your post this time.)

Who wrote this code? It makes little sense as the form fields can never be called UTM Source, UTM Medium, and UTM Campaign. Form field names (a.k.a. SOAP API names) do not have spaces.

The code also

1. never reads from sessionStorage despite writing to it

2. doesn’t correctly set the field value (you use addHiddenFields/setValues for this).

It looks like a jumble of half-abandoned code.

[Christine_LeBla]

Adobe Marketo Support provided the JS.

And, they confirmed the API (soap) or (rest) field values from our CRM are not to be used for this purpose. (those utm values exist in CRM and are synced down into Marketo).

The Marketo name is what we were advised to use, and those have a space.

[SanfordWhiteman]

Well, code should be written by experienced developers. Support doesn't know how to code, and testing will show they're wrong in the ways I noted. Simply look at the name attribute of any form field.

[Christine_LeBla]

More info with an updated script.
And, in the Autofill of the form for each paramter, I have (for example) UTM Campaign: Direct Visit and Get Value from: Use Default Value 

<script>
// --- Set a cookie with expiration in minutes
function setCookie(name, value, minutes) {
const expires = new Date(Date.now() + minutes * 60 * 1000).toUTCString();
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
}

// --- Retrieve cookie value
function getCookie(name) {
const cookies = document.cookie.split("; ");
for (let c of cookies) {
const [key, val] = c.split("=");
if (key === name) return val;
}
return "";
}

// --- Main logic
(function () {
// Map URL parameters to Marketo form field names
const utmMap = {
'crm_utm_source': 'UTM Source',
'crm_utm_medium': 'UTM Medium',
'crm_utm_campaign': 'UTM Campaign'
};

const params = new URLSearchParams(window.location.search);

// Loop through each UTM param
Object.entries(utmMap).forEach(([utmParam, fieldName]) => {
// Get param from URL or fallback
const value = params.get(utmParam) || "Direct Visit";

// Save to cookie
setCookie(utmParam, value, 30);

// After DOM loads, populate form field
window.addEventListener("DOMContentLoaded", function () {
const input = document.querySelector(`input[name="${fieldName}"]`);
if (input) {
input.value = getCookie(utmParam) || "Direct Visit";
}
});
});
})();
</script>

The script is injected into an open text field in footer, within the html view.
I am finding this still does not work if I scan a link with utm values.
Can anyone identify why this might be?

[SanfordWhiteman]

@Christine_LeBla you should read this post: https://nation.marketo.com/t5/product-blogs/every-marketo-field-has-a-friendly-name-a-token-name-a-f...

[SanfordWhiteman]

You're still using the wrong field names. Those cannot be the form field names, as noted above.

If you provide a link to your page we can look at it further. There are likely additional issues.