google tag manager service added, todo - add proper datalayer values

frontend/angular/src/app/app.module.ts

@@ -36,6 +36,7 @@ import { OneITModule } from './oneit/oneit.module';
 import { SearchApplicantsComponent } from './components/search-applicants/search-applicants.component';
 import { SearchApplicantService } from './components/search-applicants/search-applicants.service';
 import { EditApplicantComponent } from './components/edit-applicant/edit-applicant.component';
+import { GoogleTagManagerService } from './services/google-tag-manager.service';
 
 @NgModule({
     imports: [
@@ -78,7 +79,8 @@ import { EditApplicantComponent } from './components/edit-applicant/edit-applica
         EditWorkflowTemplateService,
         MessageEngineService,
         DatePipe,
-        SearchApplicantService
+        SearchApplicantService,
+        GoogleTagManagerService
     ],
     bootstrap: [AppComponent]
 })

frontend/angular/src/app/components/admin-portal/admin-portal-layout/admin-portal-layout.component.ts

@@ -11,6 +11,7 @@ import { IframeMsgHandlingService } from '../../../oneit/services/iframe-msg-han
 import { MsgsService } from '../../../oneit/services/msgs.service';
 import { UserService } from '../../../oneit/services/user.service';
 import { UtilsService } from '../../../oneit/services/utils.service';
+import { GoogleTagManagerService } from '../../../services/google-tag-manager.service';
 import { AdminPortalLayoutService } from './admin-portal-layout.service';
 
 @Component({
@@ -59,7 +60,8 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
         private router: Router,
         private modalService: BsModalService,
         private iframeMsgHandlingService: IframeMsgHandlingService,
-        private changeDetector: ChangeDetectorRef
+        private changeDetector: ChangeDetectorRef,
+        private googleTagManagerService : GoogleTagManagerService
     ) {
     }
 
@@ -163,6 +165,11 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
                 } else {
                     this.titleService.setTitle('Matchd');
                 }
+                //todo change this code, and also call this when hiring team is modified
+                this.googleTagManagerService.pushTag({
+                    userId: 'test',
+                    stripeId: 'test'
+                });
             },
             error => {
                 this.utilsService.handleError(error);

frontend/angular/src/app/services/google-tag-manager.service.ts

+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+//Code copied from https://github.com/mzuccaroli/angular-google-tag-manager/blob/master/projects/angular-google-tag-manager/src/lib/angular-google-tag-manager.service.ts
+@Injectable()
+export class GoogleTagManagerService {
+    private isLoaded = false;
+    private gtmId: string;
+
+    private browserGlobals = {
+        windowRef(): any {
+            return window;
+        },
+        documentRef(): any {
+            return document;
+        }
+    };
+
+    constructor(
+    ) {
+        this.gtmId = environment.gtmKey;
+    }
+
+    public getDataLayer() {
+        const window = this.browserGlobals.windowRef();
+        window['dataLayer'] = window['dataLayer'] || [];
+        return window['dataLayer'];
+    }
+
+    private clearDataLayer() {
+        const window = this.browserGlobals.windowRef();
+        window['dataLayer'] = [{
+            'gtm.start': new Date().getTime(),
+            event: 'gtm.js'
+        }];
+    }
+
+    private pushOnDataLayer(obj: object) {
+        const dataLayer = this.getDataLayer();
+        dataLayer.push(obj);
+    }
+
+    public addGtmToDom() {
+        const doc = this.browserGlobals.documentRef();
+
+        const gtmScript = doc.createElement('script');
+        gtmScript.id = 'GTMscript';
+        gtmScript.async = true;
+        gtmScript.src = '//www.googletagmanager.com/gtm.js?id=' + this.gtmId;
+        doc.head.insertBefore(gtmScript, doc.head.firstChild);
+
+        const ifrm = doc.createElement('iframe');
+        ifrm.setAttribute('src', '//www.googletagmanager.com/ns.html?id=' + this.gtmId);
+        ifrm.style.width = '0';
+        ifrm.style.height = '0';
+        ifrm.style.display = 'none';
+        ifrm.style.visibility = 'hidden';
+
+        const noscript = doc.createElement('noscript');
+        noscript.id = 'GTMiframe';
+        noscript.appendChild(ifrm);
+
+        doc.body.insertBefore(noscript, doc.body.firstChild);
+        this.isLoaded = true;
+    }
+
+    public pushTag(item: object) {
+        this.clearDataLayer();
+        
+        if (!this.isLoaded) {
+            this.addGtmToDom();
+        }
+        this.pushOnDataLayer(item);
+    }
+}
\ No newline at end of file

frontend/angular/src/environments/environment.prod.ts

@@ -2,5 +2,6 @@
 export const environment = {
     production: true,
     baseUrl: '/',
-    envName: 'PRODUCTION'
+    envName: 'PRODUCTION',
+    gtmKey: 'GTM-WFZ4NVT'
 };

frontend/angular/src/environments/environment.ts

@@ -2,5 +2,6 @@
 export const environment = {
     production: false,
     baseUrl: 'http://vm4.qa03.oneit.com.au/matchd/',
-    envName: 'QA'
+    envName: 'QA',
+    gtmKey: 'GTM-M6M4SW6'
 };