Include better tracking via Google Analytics in a separate file

Using a separate file for tracking and a function for tracking events on elements makes it even easier to use Google Analytics Tracking properly. Reference #123.
use-init · Nov 28, 2014 · 7210879 · 7210879
1 parent 4286b14
commit 7210879
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 11 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -40,6 +40,8 @@
    * See http://www.jshint.com/docs/
    */
   "globals": {
+    "ga": true,
+
     // RequireJS
     "define": true,
     "module": true,

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ### HEAD
+* Include better tracking via Google Analytics in a separate file
 * Fetch the `.htaccess` file via `npm`
 * Re-add .htaccess: server-configs-apache in version 2.11.0
 * Remove conditional comments for old IE

diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
+    <link rel="stylesheet" href="css/main.css">
+    <script src="../node_modules/modernizr/modernizr.js"></script>
+  </head>
+  <body>
+    <!--[if lte IE 8]>
+      <p class="browsehappy">You are using an <strong>outdated</strong>
+        browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to
+        improve your experience.</p>
+    <![endif]-->
+
+    <!-- Add your site or application content here -->
+    <header>
+      <h1 role="banner">INIT</h1>
+
+      <nav role="navigation">
+        <ul>
+          <li><a href=""></a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main role="main">
+
+<p>Hello world! This is INIT.</p>
+
+    </main>
+
+    <footer>
+
+    </footer>
+
+    <!-- Load scripts -->
+    <script data-main="js/config" src="../node_modules/requirejs/require.js"></script>
+
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+      e.src='//www.google-analytics.com/analytics.js';
+      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+      ga('create','UA-XXXXX-X','auto');ga('send','pageview');
+    </script>
+  </body>
+</html>
diff --git a/src/js/config.js b/src/js/config.js
@@ -4,7 +4,7 @@
 require.config({
 
   // Initialize the application with the main application file
-  deps: ['plugins/console', 'main'],
+  deps: ['plugins/console', 'plugins/tracking', 'main'],
 
   paths: {
     jquery: '../../node_modules/jquery/dist/jquery.min'

diff --git a/src/js/plugins/tracking.js b/src/js/plugins/tracking.js
@@ -0,0 +1,58 @@
+/**
+ * Google Analytics tracking inclusion
+ *
+ * You can use the following attributes to define on elements in order to track
+ * those.
+ * - data-ga-action, required
+ * - data-ga-category, required
+ * - data-ga-label
+ * - data-ga-value
+ *
+ * More information about the Google Universal Analytics:
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/
+ * http://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics
+ */
+define(['jquery'], function ($) {
+  'use strict';
+
+  // Add your Google Universal Analytics ID here
+  var GA_ID = 'UA-XXXXXXX-X';
+
+  var document = window.document;
+
+  /* jshint ignore:start */
+  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+  /* jshint ignore:end */
+
+  // Create tracker object
+  ga('create', GA_ID);
+
+  // Send a page view
+  // https://developers.google.com/analytics/devguides/collection/analyticsjs/pages
+  ga('send', 'pageview');
+
+  // Track events
+  // https://developers.google.com/analytics/devguides/collection/analyticsjs/events
+  $(document).on('click', function (event) {
+    var action;
+    var category;
+    var label;
+    var $target = $(event.target);
+    var url;
+    var value;
+
+    if ($target !== undefined && $target.attr('data-ga-action')) {
+      action = $target.attr('data-ga-action') || undefined; // required
+      category = $target.attr('data-ga-category') || undefined; // required
+      label = $target.attr('data-ga-label') || undefined;
+      url = $target.attr('href');
+      value = parseInt($target.attr('data-ga-value'), 10) || undefined;
+
+      if (ga !== undefined && category !== undefined && action !== undefined ) {
+
+        // Register the event
+        ga('send', 'event', category, action, label, value);
+      }
+    }
+  });
+});
diff --git a/src/templates/footer.html b/src/templates/footer.html
@@ -6,15 +6,5 @@
 
     <!-- Load scripts -->
     @@mainjs
-
-    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-XXXXX-X','auto');ga('send','pageview');
-    </script>
   </body>
 </html>