From 448f96ac3547219b2410b259762dc6d3ac831ff9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 2 Dec 2015 00:35:43 +0100
Subject: [PATCH] honor DNT everywhere, track breakpoints, pixel density,
 viewport sizes

---
 _src/_assets/js/_analytics.js | 87 +++++++++++++++++++++++++++++++++++
 _src/_assets/js/app.js        |  2 +
 _src/_includes/scripts.html   | 23 +++++----
 3 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 _src/_assets/js/_analytics.js

diff --git a/_src/_assets/js/_analytics.js b/_src/_assets/js/_analytics.js
new file mode 100644
index 00000000..591f28b3
--- /dev/null
+++ b/_src/_assets/js/_analytics.js
@@ -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);
diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js
index bcbef5a2..c6ae683a 100644
--- a/_src/_assets/js/app.js
+++ b/_src/_assets/js/app.js
@@ -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
diff --git a/_src/_includes/scripts.html b/_src/_includes/scripts.html
index c00e401f..2c4276ee 100644
--- a/_src/_includes/scripts.html
+++ b/_src/_includes/scripts.html
@@ -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>