google_custom_url_builder_01

a widget/add-on/extension to build custom campaign urls to track in google analytics

by Nic Fontaine

HTML

Url: <input type="text" id="field-url" required><br />
C. Source: <input type="text" id="field-source" required><br />
C. Medium: <input type="text" id="field-medium" required><br />
C. Name: <input type="text" id="field-name" required><br />
<button id="button-submit" onclick="generate()">Create</button><button id="button-copy">Copy</button><br />
Custom URL: <input type="text" id="field-custom-url" size="50"><br />
<p id="demo"></p>

CSS

body {
    font-family: "Open Sans", Helvetica, san-serif;
}

JavaScript

function generate() {
    var inputUrl = document.getElementById("field-url").value;
    var inputSource = "?utm_source=" + document.getElementById("field-source").value;
    var inputMedium = "&utm_medium=" + document.getElementById("field-medium").value;
    var inputName = "&utm_campaign=" + document.getElementById("field-name").value;
    
    var customUrl = inputUrl + inputSource + inputMedium + inputName;
    
    document.getElementById("field-custom-url").value = customUrl;
}