Last active
August 29, 2015 14:10
-
-
Save primozcigler/32082baf12753b3d36ed to your computer and use it in GitHub Desktop.
UTM link decorator, AMD module. It decorates all your links you pass with the current UTM parameters from URL.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require( [ 'jquery', 'utm-decorator' ] , function ( $, Decorator ) { | |
'use strict'; | |
// decorate all links to themeforest and to our demo page on page load | |
$( function() { | |
var utmDecorator = new Decorator; | |
$( '[href*="themeforest.net"], [href*="proteusthemes.com"]' ).each( function ( index, $el ) { | |
utmDecorator.decorate( $el ); | |
} ); | |
} ); | |
} ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define( [ 'jquery' ], function ( $ ) { | |
/** | |
* Constructor | |
* @return {[type]} [description] | |
*/ | |
var utmDecorator = function () { | |
this.autosetParameters(); | |
this.stringifyObj( this.parametersObj ); | |
}; | |
$.extend( utmDecorator.prototype, { | |
// from: https://support.google.com/analytics/answer/1033867?hl=en | |
utmParams: [ 'utm_source', 'utm_medium', 'utm_term', 'utm_content', 'utm_campaign' ], | |
parametersObj: {}, | |
urlAppend: '', | |
/** | |
* Helper function for getting parameter by name | |
* @see http://stackoverflow.com/a/901144 | |
* @param {string} name | |
* @return {string} | |
*/ | |
getParameterByName: function (name) { | |
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); | |
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), | |
results = regex.exec(location.search); | |
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); | |
}, | |
/** | |
* Pass the DOM element and it will output the decorated link | |
* @param {DOM} el | |
*/ | |
decorate: function ( el ) { | |
var $el = $( el ); | |
var prepend = $el[0].search.length > 0 ? '&' : '?'; | |
$el.attr( 'href', $el.attr( 'href' ) + prepend + this.urlAppend ); | |
return this; | |
}, | |
/** | |
* Set parameters, based on the existing page | |
* @return this | |
*/ | |
autosetParameters: function () { | |
// reset | |
this.parametersObj = {}; | |
// check every | |
$.each( this.utmParams, $.proxy( function ( index, utmParam ) { | |
var utmParamVal = this.getParameterByName( utmParam ); | |
if ( utmParamVal ) { | |
this.parametersObj[ utmParam ] = utmParamVal; | |
} | |
}, this ) ); | |
return this; | |
}, | |
/** | |
* Build the HTTP GET query | |
* @param {object} obj | |
* @return this | |
*/ | |
stringifyObj: function ( obj ) { | |
var urlAppend = []; | |
$.each( obj, $.proxy( function ( key, val ) { | |
urlAppend.push( key + '=' + val ); | |
}, this ) ); | |
this.urlAppend = urlAppend.join( '&' ); | |
return this; | |
} | |
} ); | |
return utmDecorator; | |
} ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment