*** NOTE: As Sanford pointed out in his post below, my code below has flaws and should be improved upon.I offer this only as an explanation of what worked for my purposes at the time. My team ended up not needing to capture this info, so I never went back and updated my code. Use it at your own risk. ***
I scoured these forums as well as myriad other sites and pages for weeks to figure out how to capture the original referral source of a user’s first visit, even if they don't convert at that time. But I never found a complete solution I could implement since I am not an experienced developer. Therefore, in order to save others from the frustration I experienced, I offer the following detailed explanation of what finally worked for me. Specifically, this is how I was able to set the values from a URL with UTM parameters as cookies so a visitor’s original referral source could be captured.
For example, a new user comes to a demo signup form on a Marketo landing page from a LinkedIn ad containing UTM parameters. He leaves the page without filling out the form and visits our company’s main website. He then later returns and completes a whitepaper request form. We want to know that he originally came from the LinkedIn ad.
Alternately, if you are sending users to your main website and want to pass UTM values to a Marketo form once they land on a Marketo landing page, uncomment the following line in the code. (Don't forget to change "example.com" to your domain.)
document.cookie = key + "=" + query[key] + ";domain=.example.com;path=/";
Put the code below on your form pages. (I know there are more efficient ways of writing it, but I don't have the Javascript skills to do so.) You must have hidden fields on the forms to capture the UTM parameters. When setting up the hidden fields on the form be sure to set Get Value from in the Autofill settings as “Cookie Value”.
In this example I have “utm_source”, “utm_campaign”, “utm_medium”, “utm_term”, and “utm_content” as hidden fields on my form.
Put the following in the <head> of your page:
<script type="text/javascript">
//This grabs the UTM parameters from the URL
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {}, tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
//This sets the cookies
var query = getQueryParams(document.location.search);
for (var key in query) {
//console.log(key, query[key]);
document.cookie = key + "=" + query[key];
//Setting domain and path attributes allow cookies to be read across subdomains
//To have a cookie available to all subdomains, you must put a . in front of your domain.
//Setting the path=/ will have the cookie be available within the entire specified domain.
//Don't forget to change "example.com" to your domain.
//document.cookie = key + "=" + query[key] + ";domain=.example.com;path=/";
}
//This gets the cookies
//ID = MARKETO FIELD NAME
var elem = document.getElementById("utm_source");
var elem2 = document.getElementById("utm_campaign");
var elem3 = document.getElementById("utm_medium");
var elem4 = document.getElementById("utm_term");
var elem5 = document.getElementById("utm_content");
elem.value = query.utm_source;
elem2.value = query.utm_campaign;
elem3.value = query.utm_medium;
elem4.value = query.utm_term;
elem5.value = query.utm_content;
//This runs the script when the page loads so the hidden fields are automatically populated
window.onload = getQueryParams;
</script>
Evan, this is a very nice contribution and I appreciate the effort! I know a lot of people talk about homebrewing their solutions, but they don't post code.
That said, there are some errors/gaps in your code (you knew this was coming!):
Hi Sanford -
Yes, I was waiting for your response! In fact, I almost mentioned in the post that you could probably write the code much better and answer any questions that might arise much better than I could, but didn't want to put you on the spot like that.
I actually received the code from Marketo's Lead Technical Consultant and tweaked a few things. From all the posts I read on Stack Exchange I figured I needed a different regex, but couldn’t get figure out how to get anything else to work. For what it's worth, here's the exact code I received from Marketo, in its entirety:
<html>
<p>
// fetch url name value parameters and can create cookie
// url?cookieName=cookieValue
</p>
<script src="//app-abk.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1071"></form>
<script>MktoForms2.loadForm("//app-abk.marketo.com", "898-UZL-601", 1071);</script>
<script>
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {}, tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
function btnClickFunction() {
var query = getQueryParams(document.location.search);
for (var key in query) {
console.log(key, query[key]);
document.cookie = key + "=" + query[key];
}
var elem = document.getElementById("customCookieField");
elem.value = query["cookieName"];
}
</script>
<button onClick="btnClickFunction()"> set cookie </button>
</html>
I just followed you -- could you follow me back so I can send you a DM about this? Like to have an offline convo about this before you spend too much more time.
You rock, dude. Thanks so much.
There is also this official solution offered by Marketo support in this community as well, so you know it is supported.
Hi Justin -
I was indeed able to capture UTM parameters on a page using the solution you mentioned. However, the issue was we wanted to store the parameters so that if a user left the page without completing a form and later returned, the original referral source would still be captured. With the official Marketo solution, the parameters are lost if the user navigates away from the page and the form is not submitted.
I am not sure how much is this helpful but did you try <input type="hidden" name="_mkt_trk" value=""/>.
_mkt_trk – this field carries the cookie information, so you’ll be able to track the individual’s web page visits. If you have Munchkin on your form page, Munchkin will automatically enter a value in this hidden form field. If not, read it from the cookie with the same name and pass it to Marketo in this field.
This will work until someone not clear the browser cookies.
Harish, this is not accurate. Forms 2.0 itself will transfer the value of the cookie _mkto_trk (if it exists) to the field _mkt_trk on the Form object (not the Form's HTML element, the Form's JS object). Munchkin does not need to be running on the form page, nor do you need to manually transfer the cookie into a hidden form input.
Any chance you guys could post the final code you came up with? I am not an experienced coder and am struggling with this.