From 78911ac6edac6548a80346fdef942b79c9e19f81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 21 Sep 2023 14:07:06 +0300
Subject: [PATCH] Fixed #13626 - Add gtag for production environment

---
 server.ts                                |  2 ++
 src/app/showcase/layout/app.component.ts | 37 +++++++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/server.ts b/server.ts
index 21953dc6f83..4693092b7ea 100644
--- a/server.ts
+++ b/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 {
diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts
index a3564b34e17..1b5725e8089 100644
--- a/src/app/showcase/layout/app.component.ts
+++ b/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();