Skip to content

Instantly share code, notes, and snippets.

@hkb
Last active October 13, 2015 22:48
Show Gist options
  • Save hkb/4267928 to your computer and use it in GitHub Desktop.
Save hkb/4267928 to your computer and use it in GitHub Desktop.

Simple click tracking jQuery plugin

This is a simple plugin for tracking relations betweens product clicks and sales. It has configarable backends to handle recommendations. The two current backends logs recommendations as Google Analytics events and reports to The Social Digits.

Configuration

In the jquery.splittest.js file there is a global configuration object with the following entries:

  • clicksCookieName: The name of the cookie storing the click history.
  • splittestCookieName: The name of the A/B splittest cookie.
  • backends: A list of backend functions. There may be added any number of backend functions.

Each backend is a function that takes a splittest-name, a sales id and a list of recommended products.

Usage

Each time a visitor clicks on a product link there should be made a call to $.splittest_log_click. It takes the product id, name and price as its three arguments. All clicked products are stored in a cookie on the visitors computer.

When a visitor makes a purchase $.splittest_log_sale should be called. It takes the sales id and the products purchased. It computes which products have been clicked and then purchased bu the visitor and calls each of the configured backends.

<html>
<head>
<title>Splittest usage example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.splittest.js"></script>
</head>
<body>
<!-- Splittest product click example -->
<a href="/product/123" onclick="$.splittest_log_click(123, 456.78, 'Demo product');">Demo product</a>
<!-- Splittest product click example in The Social Digits template -->
<script id="productsTemplate" type="text/html">
<a href="/product/{{id}}" onclick="$.splittest_log_click({{id}}, {{price}}, '{{name}}');">{{name}}</a>
</script>
<!-- Splittest sale logging example -->
<script type="text/javascript">
$(document).ready(function() {
$.splittest_log_sale(123456789, [123, 456, 789]);
});
</script>
</body>
</html>
(function( $ ) {
var config = {
clicksCookieName: 'ABTestingClicks',
splittestCookieName: 'ABTesting',
backends: [
// Google analytics back end
function(splittest, sale, recommended) {
// for each recommendation
for(var i = 0; i < recommended.length; i++) {
var recommendation = recommended[i];
// add each recommendation as an GA event
_gaq.push(['_trackEvent', 'Upsale Splittest - ' + splittest, 'buy', recommendation.name, recommendation.price]);
}
},
// The Social Digits back end
function(splittest, sale, recommended) {
// send all events to the matas splittest API
var url = 'http://api.thesocialdigits.com/v2/misc/matas_splittest?callback=?';
var data = {
'payload': JSON.stringify({
splittest: splittest,
sale: sale,
recommendations: recommended
})
};
$.getJSON(url, data);
}
]
};
/* Get list of clicks from the click cookie. */
function getClicks() {
// get click cookie content
var clicks = $.cookie(config.clicksCookieName);
// does the cookie hold any content?
if(clicks == null) {
// if no; initialize empty click-list
clicks = [];
} else {
// if yes; load the JSON content
clicks = JSON.parse(clicks);
}
return clicks;
}
/* Log a click on a product. */
$.splittest_log_click = function(product, price, name) {
// get already clicked products
var clicks = getClicks();
// add product (and its price + name) to product list
clicks.push({id: product, price: price, name: name});
// store updated click list as a cookie
$.cookie(config.clicksCookieName, JSON.stringify(clicks), { expires: 604800, path: '/' });
// get the name of the split test
var splittest = $.cookie(config.splittestCookieName);
// log click in analytics
_gaq.push(['_trackEvent', 'Upsale Splittest - ' + splittest, 'add', name, price]);
}
/* Log a sale and its products */
$.splittest_log_sale = function(sale, products) {
// get clicks and initialize list of recommended products
var clicks = getClicks();
var recommended = [];
// search through all purchased products
for(var i = 0; i < products.length; i++) {
var product = products[i];
// for each product check it against the clicked products
for(var j = 0; j < clicks.length; j++) {
// if a purchased product has been clicked add it to the list of recommended products
if(product == clicks[j].id) {
recommended.push(clicks[j]);
break;
}
}
}
// get the name of the split test
var splittest = $.cookie(config.splittestCookieName);
// alert each back end with the recommended products
for(var i = 0; i < config.backends.length; i++) {
config.backends[i](splittest, sale, recommended);
}
}
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment