Add one analytics call to check which commands are being used

Author: jessepollak

dev-env/webpack/config.js

@@ -72,7 +72,8 @@ function configGenerator(Manifest) {
           "global.GENTLY": false,
           "process.env": {
             NODE_ENV: JSON.stringify(isDevelopment ? 'development' : 'production'),
-            IS_BROWSER: true
+            IS_BROWSER: true,
+            ENABLE_ANALYTICS: process.env.ENABLE_ANALYTICS
           }
         })
       ];
@@ -197,6 +198,13 @@ function configGenerator(Manifest) {
         }
         ])
 
+        loaders = loaders.concat([
+        {
+          test: /google\-analytics\-bundle\.js$/,
+          loader: 'imports?this=>window'
+        }
+        ])
+
         // Json
         loaders = loaders.concat([
           {

src/background/analytics.js

@@ -0,0 +1,41 @@
+import './vendor/google-analytics-bundle'
+
+var tracker
+
+function shouldSend() {
+  return (process.env.NODE_ENV == 'production' || process.env.ENABLE_ANALYTICS)
+}
+
+function addListener() {
+  chrome.runtime.onMessage.addListener(
+  (request, sender, sendResponse) => {
+    if (request.method == 'sendEvent') {
+      sendEvent(request.category, request.action, request.label, request.value)
+    }
+  });
+}
+
+function configureGA() {
+  let service = analytics.getService('command')
+  tracker = service.getTracker('UA-75050322-1')
+  sendEvent('initialize')
+  sendView('Background Page')
+}
+
+function sendView(view) {
+  if (!shouldSend()) return
+  tracker.sendAppView(view)
+}
+
+function sendEvent(category, action, label, value) {
+  if (!shouldSend()) return
+  tracker.sendEvent(category, action, label, value)
+}
+
+export function setup() {
+  if (!shouldSend()) return
+
+  configureGA()
+  addListener()
+}
+

src/background/headers.js

@@ -0,0 +1,24 @@
+export function setup() {
+  // Listens when new request
+  chrome.webRequest.onHeadersReceived.addListener(function(details) {
+    for (let i = 0; i < details.responseHeaders.length; i++) {
+
+      if (isCSPHeader(details.responseHeaders[i].name.toUpperCase())) {
+        var csp = details.responseHeaders[i].value;
+        csp = csp.replace('media-src', "media-src blob:");
+        details.responseHeaders[i].value = csp;
+      }
+    }
+
+    return { // Return the new HTTP header
+      responseHeaders: details.responseHeaders
+    };
+  }, {
+    urls: ["https://github.com/*"],
+    types: ["main_frame"]
+  }, ["blocking", "responseHeaders"]);
+}
+
+function isCSPHeader(headerName) {
+  return (headerName == 'CONTENT-SECURITY-POLICY') || (headerName == 'X-WEBKIT-CSP');
+}

src/background/index.js

@@ -1,23 +1,5 @@
-// Listens when new request
-chrome.webRequest.onHeadersReceived.addListener(function(details) {
-  for (let i = 0; i < details.responseHeaders.length; i++) {
+import * as Analytics from './analytics'
+import * as Headers from './headers'
 
-    if (isCSPHeader(details.responseHeaders[i].name.toUpperCase())) {
-      var csp = details.responseHeaders[i].value;
-      csp = csp.replace('media-src', "media-src blob:");
-      details.responseHeaders[i].value = csp;
-    }
-  }
-
-  return { // Return the new HTTP header
-    responseHeaders: details.responseHeaders
-  };
-}, {
-  urls: ["https://github.com/*"],
-  types: ["main_frame"]
-}, ["blocking", "responseHeaders"]);
-
-
-function isCSPHeader(headerName) {
-  return (headerName == 'CONTENT-SECURITY-POLICY') || (headerName == 'X-WEBKIT-CSP');
-}
+Analytics.setup()
+Headers.setup()

src/background/vendor/google-analytics-bundle.js

@@ -2,14 +2,14 @@ import _ from 'lodash'
 import $ from 'jquery'
 import React from 'react'
 import classnames from 'classnames'
-import { mountReactComponent } from 'commands/mount'
+import { mountReactComponent } from 'content/commands/mount'
 import * as Emojilib from 'emojilib'
 
 import 'react-spinner/react-spinner.css'
 import styles from './Emoji.scss'
-import * as Types from 'types'
-import * as Search from 'components/Search'
-import Container from 'components/Container'
+import * as Types from 'content/types'
+import * as Search from 'content/components/Search'
+import Container from 'content/components/Container'
 
 // set IDs for keys
 _.map(Emojilib.lib, (v, k) => {