remove GA and implement GTM

SergioBrunacci · Jun 1, 2017 · ccebcc4 · ccebcc4
1 parent 6826d89
commit ccebcc4
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,12 @@
   <meta charset="utf-8">
 </head>
 <body>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript>
+    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NTK59FH"
+            height="0" width="0" style="display:none;visibility:hidden"></iframe>
+  </noscript>
+  <!-- End Google Tag Manager (noscript) -->
   <script src="/build/devtools.js"></script>
 </body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -31,7 +31,7 @@
     "build/*"
   ],
   "manifest_version": 2,
-  "content_security_policy": "script-src 'self' https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
+  "content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-eval'; object-src 'self'",
   "icons": {
     "16": "images/icon16.png",
     "48": "images/icon48.png",

diff --git a/src/analytics.ts b/src/analytics.ts
diff --git a/src/backend/backend.ts b/src/backend/backend.ts
@@ -55,8 +55,8 @@ import {
 
 import {serialize} from '../utils';
 import {MessageQueue} from '../structures';
-import {SimpleOptions} from '../options';
-import AnalyticsSend from '../analytics';
+import {AnalyticsConsent, SimpleOptions} from '../options';
+import GoogleTagManagerSend from '../gtm';
 
 declare const ng;
 declare const getAllAngularRootElements: () => Element[];
@@ -290,8 +290,11 @@ const messageHandler = (message: Message<any>) => {
         }
         highlight(message.content.nodes.map(id => previousTree.lookup(id)));
 
-      case MessageType.AnalyticsSend:
-        return AnalyticsSend(message.content.eventType, message.content.data);
+      case MessageType.GoogleTagManagerSend:
+        if (message.content.consent === AnalyticsConsent.Yes) {
+          return GoogleTagManagerSend(message.content.tag);
+        }
+        return;
 
       case MessageType.FindElement:
         if (previousTree == null) {

diff --git a/src/communication/message-factory.ts b/src/communication/message-factory.ts
@@ -33,7 +33,7 @@ import {
   serializeBinary,
 } from '../utils';
 
-import {SimpleOptions} from '../options';
+import {AnalyticsConsent, SimpleOptions} from '../options';
 
 const create = <T>(properties: T) =>
   Object.assign({
@@ -183,12 +183,12 @@ export abstract class MessageFactory {
     });
   }
 
-  static analyticsEvent(eventType, ...data) {
+  static googleTagManagerEvent(consent, tag) {
     return create({
-      messageType: MessageType.AnalyticsSend,
+      messageType: MessageType.GoogleTagManagerSend,
       content: {
-        eventType,
-        data
+        consent,
+        tag
       }
     });
   }

diff --git a/src/communication/message-type.ts b/src/communication/message-type.ts
@@ -65,5 +65,5 @@ export enum MessageType {
   /// Find a corresponding mutable tree node based on a DOM node
   FindElement,
 
-  AnalyticsSend,
+  GoogleTagManagerSend,
 }
diff --git a/src/frontend/app.ts b/src/frontend/app.ts
@@ -98,9 +98,9 @@ export class App {
     this.options.load().then(() => {
       // sends a basic 'page view' event on app load, might be better not to do it here, and have it in the backend
       // todo: will discuss restricting these to specific view events, ie, clicking the modules tab
-      if (this.options.analyticsConsent === AnalyticsConsent.Yes) {
-        this.connection.send(MessageFactory.analyticsEvent('pageview', 'index'));
-      }
+      this.connection.send(
+        MessageFactory.googleTagManagerEvent(this.options.analyticsConsent, {'event': 'initialize-augury'}));
+
       return this.changeDetector.detectChanges();
     });
 
@@ -303,6 +303,7 @@ export class App {
   private onSelectedTabChange(tab: Tab) {
     this.selectedTab = tab;
     this.routerTree = this.routerTree ? [].concat(this.routerTree) : null;
+    // this.connection.send(MessageFactory.googleTagManagerEvent({'event': 'auguryTabChange'}));
   }
 
   private onDOMSelectionChange(state: boolean) {

diff --git a/src/gtm.ts b/src/gtm.ts
@@ -0,0 +1,19 @@
+const initializeGTM = function (w, d, s, l, i) {
+  w[l] = w[l] || [];
+  w[l].push({
+    'gtm.start': new Date().getTime(),
+    'event': 'gtm.js'
+  });
+
+  let f = d.getElementsByTagName(s)[0],
+    j = d.createElement(s),
+    dl = l !== 'dataLayer' ? '&l=' + l : '';
+
+  j.async = true;
+  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+  f.parentNode.insertBefore(j, f);
+};
+
+const GoogleTagManager = initializeGTM(window, document, 'script', 'dataLayer', 'GTM-NTK59FH');
+
+export default (tag) => (window as any).dataLayer.push(tag);
diff --git a/webpack.config.js b/webpack.config.js
@@ -44,7 +44,7 @@ module.exports = {
       'webpack.vendor.ts',
       './src/frontend/module'
     ],
-    'background': ['./src/channel/channel', './src/analytics.ts'],
+    'background': ['./src/channel/channel', './src/gtm.ts'],
     'backend': ['./src/backend/backend'],
     'ng-validate': ['./src/utils/ng-validate'],
     'devtools': ['./src/devtools/devtools'],