There are a number of JS libraries for this purpose, from the rudimentary to the robust to the ridiculously buggy. ConversionPath and the Digital Pi tracker are two you can trust.
But I’d suggest something even simpler: a UTM Forwarder (or more generally, a Query Param Forwarder) which simply picks up the UTM params and forwards them from page to page — unless the pageview originally had its own UTMs, of course. Then you continue to Auto-Fill from the query string.
You can place this code on every page, making sure it comes before the Forms 2.0 library on those pages that have forms:
/**
* Simple Same-Origin Query Param Forwarder
* @author Sanford Whiteman, TEKNKL (blog.teknkl.com / sandy@teknkl.com)
* @version v2.0.1
* @copyright Copyright 2024 FigureOne, Inc.
* @license MIT License: You must include this license and the above credits in all uses & reproductions of this software.
*/
function forwardParams(userOpts){
let defaultOpts = {
storageArea: "local",
storageKey: "last_utmified_query",
interestingParams: ["utm_campaign", "utm_medium", "utm_source", "utm_content", "utm_term"],
expireMins: 30,
restore: true,
restoreTS: false
};
let opts = Object.assign({}, defaultOpts, userOpts);
let current = {
state: new URL(document.location.href),
time: new Date().getTime()
};
let storage = {
area: window[opts.storageArea + "Storage"],
key: opts.storageKey
};
for( [paramName] of [...current.state.searchParams] ) {
if( !opts.interestingParams.includes(paramName) ) {
current.state.searchParams.delete(paramName);
}
}
if( current.state.searchParams.size ) {
storage.area[storage.key] = JSON.stringify({
time: current.time,
query: current.state.searchParams.toString()
});
} else {
let restorable = JSON.parse(storage.area[storage.key] || '""');
if ( !restorable || !opts.restore ) return;
if ( current.time - restorable.time <= opts.expireMins * 6E4 ) {
let updated = {
state: new URL(document.location.href)
};
for( [paramName,paramValue] of new URLSearchParams(restorable.query) ) {
updated.state.searchParams.append(paramName, paramValue);
}
if(opts.restoreTS) {
updated.state.searchParams.set("utmified_ts", restorable.time);
}
history.replaceState("", {}, updated.state.href);
}
}
}
forwardParams();
The last line runs the forwarder function with default options:
- save to localStorage (note cookies are not used)
- save and restore the 5 standard utm_* params (utm_campaign, utm_medium, utm_source, utm_content, utm_term)
- expire the cached params after 30 minutes
To change the options, pass an object to forwardParams(). For example, if you want set a shorter expiry for testing, do this instead:
forwardParams({
expireMins: 1
});
Adchoices