#247: track first page view and ignore redirects for GA

npm-shrinkwrap.json

@@ -1,6 +1,6 @@
 {
   "name": "ely-by-account",
-  "version": "1.0.0",
+  "version": "1.1.6-dev",
   "dependencies": {
     "abab": {
       "version": "1.0.3",
@@ -1878,6 +1878,18 @@
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
       "dev": true
     },
+    "debounce": {
+      "version": "1.0.0",
+      "from": "debounce@latest",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.0.0.tgz",
+      "dependencies": {
+        "date-now": {
+          "version": "1.0.1",
+          "from": "date-now@1.0.1",
+          "resolved": "https://registry.npmjs.org/date-now/-/date-now-1.0.1.tgz"
+        }
+      }
+    },
     "debug": {
       "version": "2.3.2",
       "from": "debug@>=2.1.1 <3.0.0",

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "babel-polyfill": "^6.3.14",
     "classnames": "^2.1.3",
+    "debounce": "^1.0.0",
     "history": "^3.2.1",
     "intl": "^1.2.2",
     "intl-format-cache": "^2.0.4",

src/functions.js

@@ -46,3 +46,18 @@ export const rAF = window.requestAnimationFrame
     || window.webkitRequestAnimationFrame
     || window.msRequestAnimationFrame
     || ((cb) => setTimeout(cb, 1000 / 60));
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear'
+ * that is a function which will clear the timer to prevent previously scheduled executions.
+ *
+ * @source https://github.com/component/debounce
+ *
+ * @param {function} function - function to wrap
+ * @param {number} [timeout=100] - timeout in ms
+ * @param {bool} [immediate=false] - whether to execute at the beginning
+ */
+export debounce from 'debounce';

src/index.ejs

@@ -31,19 +31,5 @@
 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
 <% } %>
-
-<% if (htmlWebpackPlugin.options.ga) {
-    if (!htmlWebpackPlugin.options.ga.id) {
-        throw new Error('ga.id is required to enable google analytics');
-    }
-%>
-<!-- Google Analytics -->
-<script>
-window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-ga('create', '<%- htmlWebpackPlugin.options.ga.id %>', 'auto');
-</script>
-<script async src='https://www.google-analytics.com/analytics.js'></script>
-<!-- End Google Analytics -->
-<% } %>
 </body>
 </html>

src/index.js

@@ -17,7 +17,7 @@ import loader from 'services/loader';
 import logger from 'services/logger';
 
 logger.init({
-    sentryCdn: window.sentryCdn
+    sentryCdn: window.SENTRY_CDN
 });
 
 const store = storeFactory();
@@ -54,6 +54,8 @@ Promise.all([
         </ReduxProvider>,
         document.getElementById('app')
     );
+
+    initAnalytics();
 });
 
 
@@ -92,14 +94,30 @@ function restoreScroll() {
     }, 200);
 }
 
-browserHistory.listen(trackPageView);
+import { loadScript, debounce } from 'functions';
+const trackPageView = debounce(_trackPageView);
+function initAnalytics() {
+    if (!window.ga) {
+        const ga = window.ga = function() {
+            (ga.q = ga.q || []).push(arguments); // eslint-disable-line
+        };
+        ga.l = Date.now(); // eslint-disable-line
 
-function trackPageView(location) {
-    const ga = window.ga;
+        if (window.GA_ID) {
+            // when GA is not available, we will continue to push into array
+            // for debug purposes
+            loadScript('https://www.google-analytics.com/analytics.js');
+        }
 
-    if (!ga) {
-        return;
+        ga('create', window.GA_ID, 'auto');
+        trackPageView(location);
+
+        browserHistory.listen(trackPageView);
     }
+}
+
+function _trackPageView(location) {
+    const ga = window.ga;
 
     ga('set', 'page', location.pathname + location.search);
     ga('send', 'pageview');

webpack.config.js

@@ -107,7 +107,8 @@ const webpackConfig = {
 
     plugins: [
         new webpack.DefinePlugin({
-            'window.sentryCdn': config.sentryCdn ? JSON.stringify(config.sentryCdn) : undefined,
+            'window.SENTRY_CDN': config.sentryCdn ? JSON.stringify(config.sentryCdn) : undefined,
+            'window.GA_ID': config.ga && config.ga.id ? JSON.stringify(config.ga.id) : undefined,
             'process.env': {
                 NODE_ENV: JSON.stringify(process.env.NODE_ENV),
                 APP_ENV: JSON.stringify(config.environment || process.env.NODE_ENV),
@@ -126,8 +127,7 @@ const webpackConfig = {
             inject: false,
             minify: {
                 collapseWhitespace: isProduction
-            },
-            ga: config.ga
+            }
         }),
         new webpack.ProvidePlugin({
             React: 'react'