Salesforce Web-to-Lead form collecting UTM data after browsing multiple pages

Question

I have a salesforce web-to-lead form that is set up to collect utm data, and it does.... if I dont leave the page.

Currently, I am not using sf web to lead form. If the user comes to site from an ad, the utm parameters are stored in a cookie and used if the user completes a form. It works perfectly.

I now am required to use sf web to lead forms. If I land directly on the page and never leave, the utm parameters in url are successfully collected in the form. If I leave page and return to form page, I can see the utm parameters stored in the cookie, but the form does not collect.

Please send help!!!!! I need to be able to navigate away from page and use stored cookie to populate the utm hidden form fields.

<form id="salesforceForm" method="POST" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8">
<input name="oid" type="hidden" value="mySFID#"> 
<input name="retURL" type="hidden" value="myredirectlink.com"> 
<label for="first_name">First Name*</label> <input id="first_name" maxlength="40" name="first_name" required="" size="20" type="text"> 
<label for="last_name">Last Name*</label> <input id="last_name" maxlength="80" name="last_name" required="" size="20" type="text"> 
<label for="email">Email*</label> <input id="email" maxlength="80" name="email" required="" size="20" type="text"> 
<label for="company">Company*</label> <input id="company" maxlength="40" name="company" required="" size="20" type="text"> <label for="phone">Phone*</label> <input id="phone" maxlength="40" name="phone" required="" size="20" type="text"> 
<input id="utm_source" name="00N50000003KWmr" type="hidden" value=""> 
<input id="utm_medium" name="00N50000003KWn6" type="hidden" value=""> 
<input id="utm_campaign" name="00N50000003KWnB" type="hidden" value=""> 
<input id="utm_term" name="00N50000003KWnG" type="hidden" value=""> 
<input id="utm_content" name="00N50000003KWnL" type="hidden" value=""> 
<input name="btnSubmit" type="submit">
</form>


<script type="text/javascript">
function parseGET(param) {
    var searchStr = document.location.search;
    try {
        var match = searchStr.match('[?&]' + param + '=([^&]+)');
        if (match) {
            var result = match[1];
            result = result.replace(/\+/g, '%20');
            result = decodeURIComponent(result);
            return result;
        } else {
            return '';
        }
    } catch (e) {
        return '';
    }
}
 
document.getElementById('utm_source').value = parseGET('utm_source');
document.getElementById('utm_medium').value = parseGET('utm_medium');
document.getElementById('utm_campaign').value = parseGET('utm_campaign');
document.getElementById('utm_term').value = parseGET('utm_term');
document.getElementById('utm_content').value = parseGET('utm_content');
</script>

Answer 1

There's nothing here that actually sets the cookie, right? Or reads from it.

I've never actively used Google Tag Manager and you're saying something sets the cookie already...

My gut feel you need something like if(parseGET('utm_source') == ""), then use functions from https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

This helps?

let utm_source = parseGET('utm_source');
if(!utm_source){
    utm_source = document.cookie
      .split('; ')
      .find(row => row.startsWith('utm_source='))
      .split('=')[1];
}
document.getElementById('utm_source').value = utm_source;

?

Untested, you'll have to experiment and put right names of cookies.