Fixed #13626 - Add gtag for production environment

server.ts

@@ -35,6 +35,8 @@ global['navigator'] = win.navigator;
 global['CSS'] = null;
 // global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
 global['Prism'] = null;
+// global google tag manager
+global['gtag'] = () => {};
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {

src/app/showcase/layout/app.component.ts

@@ -1,15 +1,22 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { NavigationEnd, Router } from '@angular/router';
 import { AppConfigService } from '../service/appconfigservice';
 import Announcement from '../data/news.json';
+declare let gtag: Function;
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit, OnDestroy {
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private configService: AppConfigService) {}
+    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private configService: AppConfigService, private router: Router) {
+        if(isPlatformBrowser(platformId) && window && process.env.NODE_ENV === 'production'){
+            this.injectScripts();
+        }
+        this.handleRouteEvents();
+    }
 
     public subscription: Subscription;
 
@@ -45,6 +52,34 @@ export class AppComponent implements OnInit, OnDestroy {
         }
     }
 
+    injectScripts() {
+        const script = this.renderer.createElement('script');
+        script.type = 'text/javascript';
+        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-W297P962XH';
+        this.renderer.appendChild(this.document.body, script);
+
+        const scriptBody = this.renderer.createElement('script');
+        scriptBody.type = 'text/javascript';
+        scriptBody.text = `
+          window.dataLayer = window.dataLayer || [];
+          function gtag() { dataLayer.push(arguments); }
+          gtag('js', new Date());
+    
+          gtag('config', 'G-W297P962XH');
+        `;
+        this.renderer.appendChild(this.document.body, scriptBody);
+    }
+
+    handleRouteEvents() {
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                gtag('event', 'page_view', {
+                    page_path: event.urlAfterRedirects
+                });
+            }
+        });
+    }
+
     ngOnDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();