Merge pull request #2 from AmberEngine/analytics

Add analytics

README.md

@@ -32,4 +32,30 @@ Make sure you have a way to load the following:
 |`scss` | For loading styles referenced in shared components |
 |`svg` | For loading icons! |
 
-## Adding something new
+Rather than including a specific path to resolve content included in `amber-lib-js`, you'll need to include these files via a regex in the Webpack loader.
+
+### Example (for SVG):
+```
+{
+  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg/],
+  loader: require.resolve('url-loader'),
+  exclude: [
+    /icons/,
+  ],
+},
+{
+  test: /\.svg$/,
+  include: [
+    /icons/,
+  ],
+  use: [
+    { loader: 'babel-loader' },
+    {
+      loader: 'react-svg-loader',
+      options: { jsx: true },
+    },
+  ],
+},
+```
+
+To see how things are being used in a real project, check out the Apollo project!

package.json

@@ -13,6 +13,8 @@
     "classnames": "^2.2.5",
     "griddle-react": "^1.9.0",
     "moment": "^2.19.1",
+    "raven-js": "^3.19.1",
+    "react-ga": "^2.3.5",
     "react-input-mask": "^1.0.7",
     "react-modal": "^3.0.0",
     "react-select": "^1.0.0-rc.10",

src/utils/__tests__/analytics.test.js

@@ -0,0 +1,59 @@
+import test from 'ava';
+import AnalyticsProvider from '../analytics';
+
+class FakeAnalyticsSource {
+  calls = []
+  enabled = true
+  initialized = false
+  initialize() {
+    this.initialized = true;
+  }
+  pageView(page) {
+    this.calls.push({ call: 'pageView', page });
+  }
+  error(error) {
+    this.calls.push({ call: 'error', error });
+  }
+}
+
+test('analyticsProvider is created with specified sources', t => {
+  const fakeSource = new FakeAnalyticsSource();
+  const analytics = new AnalyticsProvider([fakeSource]);
+  t.is(analytics.analyticSources.length, 1);
+  t.is(analytics.analyticSources[0] instanceof FakeAnalyticsSource, true);
+});
+
+test('analyticsProvider initializes specified sources', t => {
+  const fakeSource = new FakeAnalyticsSource();
+  t.is(fakeSource.initialized, false);
+  const analytics = new AnalyticsProvider([fakeSource]);
+  t.is(fakeSource.initialized, true);
+});
+
+test('analyticsProvider doesn\'t initialize disabled sources', t => {
+  const fakeSource = new FakeAnalyticsSource();
+  fakeSource.enabled = false;
+  t.is(fakeSource.initialized, false);
+  const analytics = new AnalyticsProvider([fakeSource]);
+  t.is(fakeSource.initialized, false);
+});
+
+test('analyticsProvider calls pageView of enabled sources', t => {
+  const fakeSource = new FakeAnalyticsSource();
+  const analytics = new AnalyticsProvider([fakeSource]);
+
+  analytics.pageView();
+  t.is(fakeSource.calls.length, 1);
+  t.is(fakeSource.calls[0].call, 'pageView');
+  t.is(fakeSource.calls[0].page, 'blank');
+});
+
+test('analyticsProvider calls error of enabled sources', t => {
+  const fakeSource = new FakeAnalyticsSource();
+  const analytics = new AnalyticsProvider([fakeSource]);
+
+  analytics.error('Some bad error!');
+  t.is(fakeSource.calls.length, 1);
+  t.is(fakeSource.calls[0].call, 'error');
+  t.is(fakeSource.calls[0].error, 'Some bad error!');
+});

src/utils/analytics/googleAnalyticsSource.js

@@ -0,0 +1,17 @@
+import ReactGA from 'react-ga';
+
+const googleAnalyticsSource = {
+  enabled: !!process.env.APP_GA_ACCOUNT_ID,
+  initialize() {
+    ReactGA.initialize(process.env.APP_GA_ACCOUNT_ID);
+  },
+  pageView: (page) => {
+    ReactGA.set({ page });
+    ReactGA.pageview(page);
+  },
+  error: (error) => {
+    // Do nothing!
+  },
+};
+
+export default googleAnalyticsSource;

src/utils/analytics/index.js

@@ -0,0 +1,48 @@
+import GoogleAnalytics from './googleAnalyticsSource';
+import SentryAnalytics from './sentryAnalyticsSource';
+
+// Export the analytic sources
+export {
+  GoogleAnalytics,
+  SentryAnalytics,
+};
+
+export default class AnalyticsProvider {
+  analyticSources: []
+
+  constructor(sources = []) {
+    this.analyticSources = sources;
+    this.initialize();
+  }
+
+  initialize() {
+    this.getAnalyticSources()
+      .forEach(source => {
+        source.initialize();
+      });
+  }
+
+  getAnalyticSources() {
+    return this.analyticSources
+      .filter(source => source.enabled);
+  }
+
+  registerSource = (source) => {
+    this.analyticSources = this.analyticSources.concat([source]);
+  }
+
+  pageView = () => {
+    const page = window.location.pathname + window.location.search;
+    this.getAnalyticSources()
+      .forEach(source => {
+        source.pageView(page);
+      });
+  }
+
+  error = (error) => {
+    this.getAnalyticSources()
+      .forEach(source => {
+        source.error(error);
+      });
+  }
+}

src/utils/analytics/sentryAnalyticsSource.js

@@ -0,0 +1,21 @@
+import Raven from 'raven-js';
+
+const sentryAnalyticsSource = {
+  enabled: !!process.env.APP_SENTRY_ACCOUNT_ID,
+  initialize() {
+    if (this.enabled) {
+      const { APP_SENTRY_ACCOUNT_ID, APP_SENTRY_PROJECT_NAME } = process.env;
+      Raven
+        .config(`https://${APP_SENTRY_ACCOUNT_ID}@sentry.io/${APP_SENTRY_PROJECT_NAME}`)
+        .install();
+    }
+  },
+  pageView: (page) => {
+    // Do nothing!
+  },
+  error: (error) => {
+    Raven.captureMessage(error);
+  },
+};
+
+export default sentryAnalyticsSource;

yarn.lock

@@ -5825,6 +5825,10 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
+raven-js@^3.19.1:
+  version "3.19.1"
+  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.19.1.tgz#a5d25646556fc2c86d2b188ae4f425c144c08dd8"
+
 raw-body@2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
@@ -5909,6 +5913,12 @@ react-error-overlay@^2.0.2:
     settle-promise "1.0.0"
     source-map "0.5.6"
 
+react-ga@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.3.5.tgz#7c3d0c530b2bbe64ceb1faa79be340685aa84a9a"
+  dependencies:
+    object-assign "^4.1.1"
+
 react-html-attributes@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/react-html-attributes/-/react-html-attributes-1.4.1.tgz#97b5ec710da68833598c8be6f89ac436216840a5"