m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00
Code

honor DNT everywhere, track breakpoints, pixel density, viewport sizes

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-12-02 00:35:43 +01:00
parent 83d390dc1a
commit 448f96ac35
3 changed files with 104 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
_src/_assets/js/_analytics.js Normal file
View File

@ -0,0 +1,87 @@
var GoogleAnalytics = (function(w, d, dnt) {
var app, _private;
_private = {
//
// 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 = {
xxs: '(max-width: 479px)',
xs: '(min-width: 480px) and (max-width: 767px)',
sm: '(min-width: 768px) and (max-width: 991px)',
md: '(min-width: 992px) and (max-width: 1199px)',
lg: '(min-width: 1200px) and (max-width: 1599px)',
hg: '(min-width: 1600px)'
};
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() {
if (dnt !== "yes" && dnt !== "1") {
_private.gaBreakpoints();
_private.gaViewport();
_private.gaPixelDensity();
}
}
};
return app;
})(window, document, navigator.doNotTrack || navigator.msDoNotTrack || null);

2
_src/_assets/js/app.js
View File

@ -11,6 +11,7 @@
//=include _menu.js
//=include _search.js
//=include _tooltips.js
//=include _analytics.js
(function($) {
@ -20,6 +21,7 @@
Menu.init();
Search.init();
Tooltips.init();
GoogleAnalytics.init();
svg4everybody({
nosvg: false

23
_src/_includes/scripts.html
View File

@ -1,17 +1,24 @@
<script src="/assets/js/kremalicious3.min.js" async></script>
{% if page.js %}
<script src="/assets/js/{{ page.js }}"></script>
{% endif %}
{% if jekyll.environment == "production" %}
<script>
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.kremalicious.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
(function(dnt) {
if (dnt !== "yes" && dnt !== "1") {
var u="//analytics.kremalicious.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
}
}(navigator.doNotTrack || navigator.msDoNotTrack || null));
</script>
<noscript><p><img src="//analytics.kremalicious.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
{% endif %}
@ -52,7 +59,7 @@
exFatal: false
});
};
}
}
}(window, navigator.doNotTrack || navigator.msDoNotTrack || null));
</script>