Create analytics service

Author: rafaelcamargo

website/environments/development.js

@@ -0,0 +1,11 @@
+export default {
+  APP: {
+    BASE_URL: 'http://localhost:7000'
+  },
+  ANALYTICS: {
+    GOOGLE: {
+      ID: 'UA-135973369-2',
+      BASE_URL: 'https://www.googletagmanager.com/gtag/js'
+    }
+  }
+};

website/environments/production.js

@@ -0,0 +1,11 @@
+export default {
+  APP: {
+    BASE_URL: ''
+  },
+  ANALYTICS: {
+    GOOGLE: {
+      ID: 'UA-135973369-1',
+      BASE_URL: 'https://www.googletagmanager.com/gtag/js'
+    }
+  }
+};

website/src/scripts/app.js

@@ -1,8 +1,10 @@
 import '@styles/_native.styl';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import ENV from '@environment';
 import routes from './routes';
 import routeService from '@scripts/services/route/route';
+import analyticsService from '@scripts/services/analytics/analytics';
 import template from './app.html';
 
 Vue.use(VueRouter);
@@ -13,6 +15,7 @@ const router = new VueRouter({
 });
 
 routeService.setRouter(router);
+analyticsService.init(ENV.ANALYTICS);
 
 const app = {
   name: 'app',

website/src/scripts/services/analytics/analytics.js

@@ -0,0 +1,38 @@
+import dateService from '@scripts/services/date/date';
+
+let ANALYTICS_ENV;
+const _public = {};
+
+_public.init = analyticsEnv => {
+  ANALYTICS_ENV = analyticsEnv;
+  buildGoogleAnalyticsScriptTag(ANALYTICS_ENV.GOOGLE);
+  configAnalytics(ANALYTICS_ENV.GOOGLE.ID);
+};
+
+_public.trackPageView = path => {
+  configAnalytics(ANALYTICS_ENV.GOOGLE.ID, path);
+};
+
+function buildGoogleAnalyticsScriptTag(GOOGLE_ANALYTICS_ENV){
+  const tag = document.createElement('script');
+  tag.setAttribute('async', 'true');
+  tag.setAttribute('src', `${GOOGLE_ANALYTICS_ENV.BASE_URL}?id=${GOOGLE_ANALYTICS_ENV.ID}`);
+  document.head.appendChild(tag);
+}
+
+function configAnalytics(id, path){
+  if(!path)
+    gtag('js', dateService.getNow());
+  gtag('config', id, {page_path: (path || getLocationPath())});
+}
+
+function getLocationPath(){
+  return window.location.hash.replace('#/','/');
+}
+
+function gtag(){
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push(arguments);
+}
+
+export default _public;

website/src/scripts/services/analytics/analytics.test.js

@@ -0,0 +1,66 @@
+import analyticsService from './analytics';
+import dateService from '@scripts/services/date/date';
+
+describe('Analytics Service', () => {
+  const dateMock = new Date();
+  const locationHashMock = '#/home';
+  const createElementMock = {
+    setAttribute: jest.fn()
+  };
+
+  function mockAnalyticsEnvironment(INSPECTLET = {}){
+    return {
+      GOOGLE: { ID: '123', BASE_URL: 'https://some.url.com' },
+      INSPECTLET
+    };
+  }
+
+  beforeEach(() => {
+    document.createElement = jest.fn(() => {
+      return { setAttribute: createElementMock.setAttribute };
+    });
+    document.head.appendChild = jest.fn();
+    dateService.getNow = jest.fn(() => dateMock);
+  });
+
+  afterEach(() => {
+    delete window.dataLayer;
+    window.location.hash = '';
+  });
+
+  it('should get analytics thirdy party code asynchronously', () => {
+    analyticsService.init(mockAnalyticsEnvironment());
+    expect(createElementMock.setAttribute).toHaveBeenCalledWith('async', 'true');
+  });
+
+  it('should get analytics thirdy party code passing analytics id', () => {
+    analyticsService.init(mockAnalyticsEnvironment());
+    expect(createElementMock.setAttribute).toHaveBeenCalledWith(
+      'src',
+      'https://some.url.com?id=123'
+    );
+  });
+
+  it('should append script tag to get analytics thirdy party code on head', () => {
+    analyticsService.init(mockAnalyticsEnvironment());
+    expect(typeof document.head.appendChild.mock.calls[0][0]).toEqual('object');
+  });
+
+  it('should configure analytics settings after append script tag on head', () => {
+    window.location.hash = locationHashMock;
+    analyticsService.init(mockAnalyticsEnvironment());
+    expect(window.dataLayer[0][0]).toEqual('js');
+    expect(window.dataLayer[0][1]).toEqual(dateMock);
+    expect(window.dataLayer[1][0]).toEqual('config');
+    expect(window.dataLayer[1][1]).toEqual('123');
+    expect(window.dataLayer[1][2]).toEqual({page_path: '/home'});
+  });
+
+  it('should track page view', () => {
+    const path = '/author';
+    analyticsService.trackPageView(path);
+    expect(window.dataLayer[0][0]).toEqual('config');
+    expect(window.dataLayer[0][1]).toEqual('123');
+    expect(window.dataLayer[0][2]).toEqual({page_path: path});
+  });
+});