GA added back (#529)

vlio20 · vlio20 · commit 1aaf888f8578 · 2020-11-20T08:48:20.000+02:00
diff --git a/build-helpers/index-maker.js b/build-helpers/index-maker.js
diff --git a/build.js b/build.js
@@ -1,55 +1,18 @@
-const fs = require('fs');
-const path = require('path');
-const ncp = require('ncp');
-const rimraf = require('rimraf');
-const less = require('less');
-const ng2Inline = require('./build-helpers/inliner');
-
-const inline = (dir) => {
-  let files = fs.readdirSync(dir);
-
-  files.forEach((file) => {
-    const src = path.join(dir, file);
-
-    if (fs.statSync(src).isDirectory()) {
-      inline(src);
-    }
-    else if (src.endsWith('.component.ts')) {
-      ng2Inline(fs.readFileSync(src, 'utf-8'), {
-        base: dir
-      }, dir).then((file) => {
-        fs.writeFileSync(src, file);
-      });
-    }
-  });
-};
-
-console.log('cleaning...');
-rimraf.sync('prebuild', fs, (err) => {
-  if (err) {
-    return console.error(err);
-  }
-});
-
-rimraf.sync('aot', fs, (err) => {
-  if (err) {
-    return console.error(err);
-  }
-});
-
-console.log('done cleaning!');
-
-console.log('cloning src...');
-ncp('src', 'prebuild', (err) => {
-  if (err) {
-    return console.error(err);
-  }
-
-  console.log('done cloning src!');
-
-  console.log('inlining...');
-  inline(path.resolve('./prebuild/'));
-  console.log('done inlining!');
-
-  console.log('ready for ngc!');
-});
+const fs = require('fs').promises;
+
+async function setGa() {
+  const html = await fs.readFile('./dist/index.html', 'utf-8');
+  const newHtml = html.replace('<!--GA-->', `
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-86826463-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-86826463-1');
+    </script>
+  `);
+
+  await fs.writeFile('./dist/index.html', newHtml);
+}
+
+setGa();
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "e2e": "ng e2e --port 3200",
     "e2e:quick": "ng e2e --dev-server-target --webdriverUpdate=false",
     "e2e:headless": "HEADLESS=true ng e2e",
-    "build:index": "cd build-helpers && node index-maker.js",
+    "build:index": "node build.js",
     "build:demo": "rm -rf dist/ && ng build --prod --base-href /angular-datepicker/ && npm run build:index",
     "build:prod": "ng-packagr -p package.json",
     "release": "npm run build:prod && npm publish bin",
diff --git a/src/demo/demo/demo.component.ts b/src/demo/demo/demo.component.ts
@@ -368,14 +368,6 @@ export class DemoComponent implements OnInit {
     console.log(data);
   }
 
-  trackFiver(): void {
-    this.gaService.emitEvent('fiverr', 'clicked');
-  }
-
-  toggleDisabled(disabled: boolean) {
-    disabled ? this.formGroup.disable() : this.formGroup.enable()
-  }
-
   private buildForm(): FormGroup {
     return new FormGroup({
       datePicker: new FormControl({value: this.date, disabled: this.disabled}, [
diff --git a/src/demo/services/ga/ga.service.ts b/src/demo/services/ga/ga.service.ts
@@ -1,21 +1,19 @@
 import {Injectable} from '@angular/core';
 import {environment} from '../../../environments/environment';
 
-declare const ga: Function;
+declare const gtag: Function;
 
 @Injectable()
 export class GaService {
 
   public emitEvent(eventCategory: string,
-                   eventAction: string,
-                   eventLabel: string = null,
+                   eventLabel: string,
                    eventValue: number = null) {
-    if (environment.production && window['ga']) {
-      ga('send', 'event', {
-        eventCategory: eventCategory,
-        eventLabel: eventLabel,
-        eventAction: eventAction,
-        eventValue: eventValue
+    if (environment.production && window['gtag']) {
+      gtag('event', 'send', {
+        event_category: eventCategory,
+        event_label: eventLabel,
+        value: eventValue
       });
     }
   }
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 </head>
 <body>
-<script id="ga-analitics"></script>
+<!--GA-->
 
 <dp-demo-root>Loading...</dp-demo-root>
 
