From c171cd4e43a9ded116289ead2232927df9fa642f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 20 Dec 2015 05:32:57 +0100 Subject: [PATCH] Google Analytics module - prepare for sending custom events - track breakpoints - track viewport size - track pixel density --- _src/_assets/javascripts/bigchain.js | 4 +- .../_assets/javascripts/bigchain/analytics.js | 97 +++++++++++++++++++ 2 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 _src/_assets/javascripts/bigchain/analytics.js diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js index 055e9c4..e51b340 100644 --- a/_src/_assets/javascripts/bigchain.js +++ b/_src/_assets/javascripts/bigchain.js @@ -2,11 +2,13 @@ //=include ../../../node_modules/svg4everybody/dist/svg4everybody.js //=include ../../../node_modules/jquery/dist/jquery.js +//=include bigchain/analytics.js + jQuery(function($) { // // init modules // - + GoogleAnalytics.init(); }); diff --git a/_src/_assets/javascripts/bigchain/analytics.js b/_src/_assets/javascripts/bigchain/analytics.js new file mode 100644 index 0000000..270427d --- /dev/null +++ b/_src/_assets/javascripts/bigchain/analytics.js @@ -0,0 +1,97 @@ +// +// Google Analytics +// +var GoogleAnalytics = (function(w,d) { + + var app, _private; + + _private = { + // + // Custom Events + // https://developers.google.com/analytics/devguides/collection/analyticsjs/events + // + gaEvents: function() { + // jQuery('.js-tracking-').on('click', function() { + // ga('send', 'event', [eventCategory], [eventAction], [eventLabel]); + // }); + }, + + + // + // Track Responsive Breakpoints + // + // stolen & adapted from + // http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/ + // + gaBreakpoints: function() { + // Do nothing in browsers that don't support `window.matchMedia`. + if (!window.matchMedia) return; + + // Prevent rapid breakpoint changes for all firing at once. + var timeout; + + var breakpoints = { + xs: '(max-width: 29.9999em)', + sm: '(min-width: 30em) and (max-width: 40.624em)', + md: '(min-width: 40.625em) and (max-width: 87.499em)', + lg: '(min-width: 87.500em)' + }; + + Object.keys(breakpoints).forEach(function(breakpoint) { + var mql = window.matchMedia(breakpoints[breakpoint]); + + // Set the initial breakpoint on page load. + if (mql.matches) { + ga('set', 'dimension1', breakpoint); + } + + // Update the breakpoint as the matched media changes + mql.addListener(function() { + if (mql.matches) { + clearTimeout(timeout); + timeout = setTimeout(function() { + ga('set', 'dimension1', breakpoint); + }, 1000); + } + }); + }); + }, + + + // + // Track Viewport + // + gaViewport: function() { + var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); + var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); + var dimensions = width + 'x' + height; + + ga('set', 'dimension2', dimensions); + }, + + + // + // Track Pixel Density + // + gaPixelDensity: function() { + // Heads up! + // window.devicePixelRatio doesn't work correctly in IE but whatever + var pixeldensity = window.devicePixelRatio; + + ga('set', 'dimension3', pixeldensity); + } + + }; + + app = { + init: function() { + _private.gaEvents(); + _private.gaBreakpoints(); + _private.gaViewport(); + _private.gaPixelDensity(); + } + }; + + return app; + +})(window, document);