Useful little script for UTM code tracking

OK digital marketers, here’s a little script you can use to easily append UTM codes for tracking to your URLs. You’ll note that this is in the form of a very simple webpage – you can copy-paste into your favorite HTML editor and get a page like this one I use.

UPDATE: I’ve gone ahead and grabbed a domain for it. You can now use utm-builder.com. Email me with suggestions for evolutions.

Here’s how it works:

– You enter whatever URL you need to share in the box
– You push a button for generic social media links
– The simple Javascript function snags the URL you’ve entered as a variable, and appends your pre-defined UTM codes to it as new variables
– Each completed link with UTM codes outputs into the spaces in the form

Alternatively, you can pick a specific UTM medium from the “Pick a lead source” dropdown. Those are predefined rather than free text because I use these as Lead Source in my Salesforce implementation, and there’s only a few things I want as possible lead sources. You can then write whatever you want in the Lead Source Detail box below, which will append as UTM source.

Notes: this syncs up with my Salesforce. UTM medium = Lead Source, and UTM source = Lead Source Detail. So if I’m kicking off an AdWords campaign, when I go to add the landing page, I’ll use this little tool to append ?utm_medim=paidsearch&utm_source=adwords to the end of it, allowing for better tracking both anonymously in Google Analytics and as Lead Source/Lead Source Detail in SFDC.

Here’s the code:


<html>
<script>
var t = "?utm_medium=social&utm_source=twitter";
var f = "?utm_medium=social&utm_source=facebook";
var l = "?utm_medium=social&utm_source=linkedin";
var g = "?utm_medium=social&utm_source=googleplus";

function combobreak() {
	var inputhere = document.getElementById('inputhere').value;
	if(! inputhere) {
		window.alert("Please enter a URL")
	}
	else {
		var twitter = inputhere.concat(t);
		var facebook = inputhere.concat(f);
		var gplus = inputhere.concat(g);
		var linkedin = inputhere.concat(l);
		document.getElementById('twitteroutput').value = twitter;
		document.getElementById('facebookoutput').value = facebook;
		document.getElementById('linkedinoutput').value = linkedin;
		document.getElementById('gplusoutput').value = gplus;
	}
}

function superpants() {
	var inputhere = document.getElementById('inputhere').value;
	if(! inputhere) {
		window.alert("Please enter a URL")
	}
	else {
		var source = document.getElementById('inputsource').value;
		var detail = document.getElementById('inputdetail').value;
		var customoutput = inputhere.concat('?utm_medium=').concat(source).concat('&utm_source=').concat(detail);
		document.getElementById('customoutput').value = customoutput;
	}
}
</script>

<h1>Druby's UTM Code Generator</h1>
<form>Enter the original URL: <input type="text" name="inputhere" id="inputhere" size="75"><br />
</form>
<h2>For social links, just hit "Get social links" below</h2>

<form>
	<div style="width: 200px;">Twitter Link: </div><input type="text" id="twitteroutput" size="70"><br />
	<div style="width: 200px;">Facebook Link: </div><input type="text" id="facebookoutput" size="70"><br />
	<div style="width: 200px;">Linkedin Link: </div><input type="text" id="linkedinoutput" size="70"><br />
	<div style="width: 200px;">Google Plus Link: </div><input type="text" id="gplusoutput" size="70"><br />
	<input type="button" value="Get social links" onclick="combobreak();">
</form>
<h2>For a custom link, please enter Lead Source and Lead Source Detail and hit "Get custom link"</h2>

<div style="width: 200px;">Pick a lead source:</div>
<select name="inputsource" id="inputsource">
	<option value=null>None</option>
	<option value="advertising">Advertising (banner, direct)</option>
	<option value="paid-search">SEM (paid search)</option>
	<option value="social">Social (use above)</option>
	<option value="referral">Referral</option>
</select>
<form>
	<div style="width: 200px;">Pick a Lead Source Detail: </div><input type="text" name="inputdetail" id="inputdetail" size="75"><br />
		<input type="button" value="Get custom link" onclick="superpants();"><br /><br />
	<div style="width: 200px;">Custom Link: </div><input type="text" id="customoutput" size="70"><br />
</form>
</html>

It's easy enough. Add new options to the drop-down menu to add UTM medium options - that should be nice and customizable.

Enjoy! Let me know in the comments if you have any questions, and I hope you make use of this.