google_custom_url_builder_jquery_01

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

by Nic Fontaine

HTML

<input type="text" class="field-editable" id="field-url" value="Site URL" required><div id="button-dl"></div><br />
<input type="text" class="field-editable" id="field-source" value="Campaign Source" required><br />
<input type="text" class="field-editable" id="field-medium" value="Campaign Medium" required><br />
<div class="bar"></div><div id="button-toggle"></div>
<div id="container-toggle">
    <input type="text" class="field-editable" id="field-term" value="Campaign Term"><br/>
    <input type="text" class="field-editable" id="field-content" value="Campaign Content"><br/>
    <div class="bar"></div>
</div>
<div id="row-bot">
    <input type="text" class="field-editable" id="field-name" value="Campaign Name" required><br />
    
    <input type="submit" id="button-submit" value="Submit"><input type="button" id="button-copy" value="Copy"><br />
    <input type="text" id="field-custom-url" value="Custom URL" size="24" onclick="this.select()"><br />
    <p id="demo"></p>
</div>

CSS

body {
    font-family: "Open Sans", Helvetica, san-serif;
}
#button-dl {
    width: 0;
    height: 0;
    border-top: 8px solid #D6A7C2;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}
.bar {
    width: 145px;
    height: 1px;
    background: #D6A7C2;
    margin: 5px 0;
    display: inline-block;
}
#button-toggle {
    width: 0;
    height: 0;
    border-right: 8px solid #D6A7C2;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
    display: inline-block;
    clear: right;
    cursor: pointer
}
input {
    margin: 5px 0;
    color: #bbb;
    border: 1px solid #ccc;
    border-radius: 2px;
}
#field-custom-url {
    border: 1px solid #D6A7C2
}
#row-bot {
    display: block;
}
#button-submit {
    padding: 2px 57px;
    background-color: #EB7ABB;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 19px 0 5px 0;
    border-radius: 2px;
    border: 0;
    font-size: 14px;
}
#button-copy {
    padding: 2px 10px;
    background-color: #C58AE3;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 19px 0 5px 0;
    border-radius: 1px;
    margin-left: 10px;
    border: 0;
    font-size: 14px;
    display: none;
}

JavaScript

//init var as url of current tab
var tabUrl = window.location.href;

$(document).ready(function() {
    
    //make field blank on select
    $('.field-editable').click(function() {
        $(this).val("");     
    });
    
    //hide toggle container on doc ready
    $('#container-toggle').hide();
    
    //button grabs current tab url, puts in site url field
    $('#button-dl').click(function() {
        document.getElementById("field-url").value = tabUrl;   
    });
    
    //toggle container
    $('#button-toggle').click(function() {
        $('#container-toggle').slideToggle(300);
    });
    
    //submit button creates url
    $('#button-submit').click(function() {
        var inputUrl = $('input[id=field-url]').val();
        var valSource = $('input[id=field-source]').val();
        var valMedium = $('input[id=field-medium]').val();
        var valTerm = $('input[id=field-term]').val();
        var valContent = $('input[id=field-content]').val();
        var valName = $('input[id=field-name]').val();
        
        if (inputUrl === "Site URL") { inputUrl = ""; }
        if (valSource === "Campaign Source") { valSource = ""; }
        if (valMedium === "Campaign Medium") { valMedium = ""; }
        if (valTerm === "Campaign Term") { valTerm = ""; }
        if (valContent === "Campaign Content") { valContent = ""; }
        if (valName === "Campaign Name") { valName = ""; }
        
        //only creates info if field isn't blank
        if (valTerm.length > 0) {
            var inputTerm = "&utm_term=" + valTerm;
        } else {
            var inputTerm = "";
        }
        
        //only creates info id field isn't blank
        if (valContent.length > 0) {
            var inputContent = "&utm_content=" + valContent;
        } else {
            var inputContent = "";
        }
        
        var inputSource = "?utm_source=" + valSource;
        var inputMedium = "&utm_medium=" + valMedium;
        var inputName = "&utm_campaign=" +...