Merge pull request #863 from jmcarp/feature/history-analytics

Feature/history analytics

gulpfile.js

@@ -20,6 +20,7 @@ var uglify = require('gulp-uglify');
 
 
 var debug = !!process.env.FEC_WEB_DEBUG;
+var analytics = !!process.env.FEC_WEB_GOOGLE_ANALYTICS;
 var production = ['stage', 'prod'].indexOf(process.env.FEC_WEB_ENVIRONMENT) !== -1;
 
 // TODO(jmcarp) Restore `watch-js`
@@ -115,7 +116,10 @@ gulp.task('build-js', function() {
     opts: {global: true},
     debug: debug
   })
-  .transform(preprocessify({DEBUG: debug}))
+  .transform(preprocessify({
+    DEBUG: debug,
+    ANALYTICS: analytics
+  }))
   .transform({global: true}, stringify(['.html']))
   .transform(hbsfy)
   .bundle()

static/js/init.js

@@ -27,11 +27,12 @@ require('jquery.inputmask/dist/inputmask/jquery.inputmask.numeric.extensions.js'
 // Include vendor scripts
 require('./vendor/tablist');
 
-var filters = require('./modules/filters.js');
-var charts = require('./modules/charts.js');
+var charts = require('./modules/charts');
 var Search = require('./modules/search');
 var toggle = require('./modules/toggle');
+var filters = require('./modules/filters');
 var helpers = require('./modules/helpers');
+var analytics = require('./modules/analytics');
 
 charts.init();
 
@@ -187,6 +188,11 @@ $(document).ready(function() {
     // perf.bar();
     // @endif
 
+    // @if ANALYTICS
+    analytics.init();
+    analytics.pageView();
+    // @endif
+
     filters.init();
     toggle.init();
 });

static/js/modules/analytics.js

@@ -0,0 +1,52 @@
+'use strict';
+
+/* global ga */
+
+var URI = require('URIjs');
+var _ = require('underscore');
+
+function init() {
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('set', 'forceSSL', true);
+  ga('set', 'anonymizeIp', true);
+  ga('create', 'UA-48605964-22', 'auto');
+}
+
+function pageView() {
+  if (typeof ga === 'undefined') { return; }
+  var path = document.location.pathname;
+  if (document.location.search) {
+    var query = URI.parseQuery(document.location.search);
+    path += '?' + sortQuery(query);
+  }
+  ga('send', 'pageview', path);
+}
+
+function sortQuery(query) {
+  return _.chain(query)
+    .pairs()
+    .map(function(pair) {
+      return [pair[0], _.isArray(pair[1]) ? pair[1] : [pair[1]]];
+    })
+    .reduce(function(memo, pair) {
+      return memo.concat(_.map(pair[1], function(value) {
+        return [pair[0], value];
+      }));
+    }, [])
+    .sort()
+    .map(function(pair) {
+      return pair.join('=');
+    })
+    .join('&')
+    .value();
+}
+
+module.exports = {
+  init: init,
+  sortQuery: sortQuery,
+  pageView: pageView
+};

static/js/modules/election-lookup.js

@@ -13,6 +13,7 @@ var L = require('leaflet');
 require('leaflet-providers');
 
 var helpers = require('./helpers');
+var analytics = require('./analytics');
 var utils = require('./election-utils');
 
 var states = require('../data/us-states-10m.json');
@@ -222,6 +223,7 @@ ElectionLookup.prototype.search = function(e, opts) {
     self.serialized = serialized;
     if (opts.pushState) {
       window.history.pushState(serialized, null, URI('').query(serialized).toString());
+      analytics.pageView();
     }
   }
 };

static/js/modules/tables.js

@@ -5,7 +5,6 @@
 var $ = require('jquery');
 var URI = require('URIjs');
 var _ = require('underscore');
-var moment = require('moment');
 var tabs = require('../vendor/tablist');
 var accessibility = require('fec-style/js/accessibility');
 
@@ -14,6 +13,7 @@ require('drmonty-datatables-responsive');
 
 var filters = require('./filters');
 var helpers = require('./helpers');
+var analytics = require('./analytics');
 
 var simpleDOM = 't<"results-info"ip>';
 
@@ -231,6 +231,7 @@ function pushQuery(params) {
     params = _.extend(query, params);
     var queryString = URI('').query(params).toString();
     window.history.pushState(params, queryString, queryString || window.location.pathname);
+    analytics.pageView();
   }
 }
 

static/js/vendor/tablist.js

@@ -3,11 +3,14 @@
 -----------------------------------------------------------------------------------------
 */
 
+var $ = require('jquery');
 var URI = require('URIjs');
 var _ = require('underscore');
 
 var events = require('fec-style/js/events');
 
+var analytics = require('../modules/analytics');
+
 // The class for the container div
 
 var $container = '.tab-interface';
@@ -43,6 +46,7 @@ function show($target, push) {
     );
     var search = URI('').query(query).toString();
     window.history.pushState(query, search, search || window.location.pathname);
+    analytics.pageView();
   }
 
   events.emit('tabs.show.' + value, {$tab: $target, $panel: $panel});

templates/layouts/main.html

@@ -90,18 +90,7 @@
 {% block scripts %}{% endblock %}
 
 {% if use_analytics %}
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('set', 'anonymizeIp', true);
-    ga('set', 'forceSSL', true);
-    ga('create', 'UA-48605964-22', 'auto');
-    ga('send', 'pageview');
-  </script>
-  <script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=FEC"></script>
+<script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=FEC"></script>
 {% endif %}
 
 </body>

tests/unit/modules/analytics.js

@@ -0,0 +1,18 @@
+'use strict';
+
+/* global describe, it */
+
+var chai = require('chai');
+var expect = chai.expect;
+
+var analytics = require('../../../static/js/modules/analytics');
+
+describe('analytics', function() {
+  it('sorts query parameters', function() {
+    var query = {
+      cycle: [2016, 2014],
+      sort: 'name',
+    };
+    expect(analytics.sortQuery(query)).to.equal('cycle=2014&cycle=2016&sort=name');
+  });
+});