Update to Google Analytics 4

src/SIL.XForge.Scripture/ClientApp/package.json

@@ -53,6 +53,7 @@
     "@sillsdev/machine": "^2.4.2",
     "@sillsdev/scripture": "1.4.1",
     "angular-file": "^4.0.2",
+    "angular-google-tag-manager": "^1.9.0",
     "angular-split": "^16.2.1",
     "arraydiff": "^0.1.3",
     "bowser": "^2.11.0",

src/SIL.XForge.Scripture/ClientApp/src/app/app-routing.module.ts

@@ -16,21 +16,51 @@ import { SettingsComponent } from './settings/settings.component';
 import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
 import { SettingsAuthGuard, SyncAuthGuard } from './shared/project-router.guard';
 import { SyncComponent } from './sync/sync.component';
+import { environment } from '../environments/environment';
 
 const routes: Routes = [
   { path: 'callback/auth0', component: MyProjectsComponent, canActivate: [AuthGuard] },
-  { path: 'connect-project', component: ConnectProjectComponent, canActivate: [AuthGuard] },
+  {
+    path: 'connect-project',
+    component: ConnectProjectComponent,
+    canActivate: [AuthGuard],
+    title: `Connect Project - ${environment.siteName}`
+  },
   { path: 'login', redirectTo: 'projects', pathMatch: 'full' },
-  { path: 'join/:shareKey', component: JoinComponent },
-  { path: 'join/:shareKey/:locale', component: JoinComponent },
-  { path: 'projects/:projectId/event-log', component: EventMetricsComponent, canActivate: [EventMetricsAuthGuard] },
-  { path: 'projects/:projectId/settings', component: SettingsComponent, canActivate: [SettingsAuthGuard] },
-  { path: 'projects/:projectId/sync', component: SyncComponent, canActivate: [SyncAuthGuard] },
+  { path: 'join/:shareKey', component: JoinComponent, title: `Join Project - ${environment.siteName}` },
+  { path: 'join/:shareKey/:locale', component: JoinComponent, title: `Join Project - ${environment.siteName}` },
+  {
+    path: 'projects/:projectId/event-log',
+    component: EventMetricsComponent,
+    canActivate: [EventMetricsAuthGuard]
+  },
+  {
+    path: 'projects/:projectId/settings',
+    component: SettingsComponent,
+    canActivate: [SettingsAuthGuard],
+    title: `Project Settings - ${environment.siteName}`
+  },
+  {
+    path: 'projects/:projectId/sync',
+    component: SyncComponent,
+    canActivate: [SyncAuthGuard],
+    title: `Synchronize Project - ${environment.siteName}`
+  },
   { path: 'projects/:projectId', component: ProjectComponent, canActivate: [AuthGuard] },
   { path: 'projects', component: MyProjectsComponent, canActivate: [AuthGuard] },
   { path: 'serval-administration/:projectId', component: ServalProjectComponent, canActivate: [ServalAdminAuthGuard] },
-  { path: 'serval-administration', component: ServalAdministrationComponent, canActivate: [ServalAdminAuthGuard] },
-  { path: 'system-administration', component: SystemAdministrationComponent, canActivate: [SystemAdminAuthGuard] },
+  {
+    path: 'serval-administration',
+    component: ServalAdministrationComponent,
+    canActivate: [ServalAdminAuthGuard],
+    title: `Serval Administration - ${environment.siteName}`
+  },
+  {
+    path: 'system-administration',
+    component: SystemAdministrationComponent,
+    canActivate: [SystemAdminAuthGuard],
+    title: `System Administration - ${environment.siteName}`
+  },
   { path: '**', component: PageNotFoundComponent }
 ];
 

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Component, DestroyRef, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import Bugsnag from '@bugsnag/js';
 import { translate } from '@ngneat/transloco';
 import { cloneDeep } from 'lodash-es';
@@ -9,7 +9,7 @@ import { SystemRole } from 'realtime-server/lib/esm/common/models/system-role';
 import { AuthType, getAuthType, User } from 'realtime-server/lib/esm/common/models/user';
 import { SFProjectRole } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-role';
 import { Observable, Subscription } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
 import { AuthService } from 'xforge-common/auth.service';
 import { DataLoadingComponent } from 'xforge-common/data-loading-component';
@@ -36,6 +36,7 @@ import { quietTakeUntilDestroyed } from 'xforge-common/util/rxjs-util';
 import { issuesEmailTemplate, supportedBrowser } from 'xforge-common/utils';
 import { ThemeService } from 'xforge-common/theme.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AnalyticsService, PageViewEvent } from 'xforge-common/analytics.service';
 import versionData from '../../../version.json';
 import { environment } from '../environments/environment';
 import { SFProjectProfileDoc } from './core/models/sf-project-profile-doc';
@@ -44,8 +45,6 @@ import { SFProjectUserConfigDoc } from './core/models/sf-project-user-config-doc
 import { SFProjectService } from './core/sf-project.service';
 import { checkAppAccess } from './shared/utils';
 
-declare function gtag(...args: any): void;
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -91,7 +90,9 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
     private readonly pwaService: PwaService,
     private readonly themeService: ThemeService,
     onlineStatusService: OnlineStatusService,
-    private destroyRef: DestroyRef
+    private destroyRef: DestroyRef,
+    private readonly analytics: AnalyticsService,
+    private readonly activatedRoute: ActivatedRoute
   ) {
     super(noticeService);
     this.breakpointObserver
@@ -125,18 +126,26 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
     pwaService.hasUpdate$.pipe(quietTakeUntilDestroyed(this.destroyRef)).subscribe(() => (this.hasUpdate = true));
 
     // Google Analytics - send data at end of navigation so we get data inside the SPA client-side routing
-    if (environment.releaseStage === 'live') {
-      const navEndEvent$ = router.events.pipe(
-        filter(e => e instanceof NavigationEnd),
-        map(e => e as NavigationEnd)
-      );
-      navEndEvent$.pipe(quietTakeUntilDestroyed(this.destroyRef)).subscribe(e => {
-        if (this.isAppOnline) {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          gtag('config', 'UA-22170471-15', { page_path: e.urlAfterRedirects });
-        }
-      });
-    }
+    const navEndEvent$ = router.events.pipe(
+      filter(e => e instanceof NavigationEnd),
+      distinctUntilChanged((previous, current) => {
+        const previousUrl = new URL((previous as NavigationEnd).urlAfterRedirects, location.origin);
+        const currentUrl = new URL((current as NavigationEnd).urlAfterRedirects, location.origin);
+        return previousUrl.pathname === currentUrl.pathname;
+      }),
+      map(e => {
+        const navEndEvent = e as NavigationEnd;
+        let route = this.activatedRoute.root;
+        while (route.firstChild) route = route.firstChild;
+        return {
+          pageName: this.locationService.host + navEndEvent.urlAfterRedirects,
+          title: route.snapshot.routeConfig?.title?.toString()
+        } as PageViewEvent;
+      })
+    );
+    navEndEvent$
+      .pipe(quietTakeUntilDestroyed(this.destroyRef))
+      .subscribe(pageViewEvent => this.analytics.logNavigation(pageViewEvent));
   }
 
   get canInstallOnDevice$(): Observable<boolean> {

src/SIL.XForge.Scripture/ClientApp/src/app/app.module.ts

@@ -24,6 +24,7 @@ import { InAppRootOverlayContainer } from 'xforge-common/overlay-container';
 import { SupportedBrowsersDialogComponent } from 'xforge-common/supported-browsers-dialog/supported-browsers-dialog.component';
 import { UICommonModule } from 'xforge-common/ui-common.module';
 import { XForgeCommonModule } from 'xforge-common/xforge-common.module';
+import { GoogleTagManagerModule } from 'angular-google-tag-manager';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -82,7 +83,12 @@ import { UsersModule } from './users/users.module';
     AvatarComponent,
     MatRipple,
     GlobalNoticesComponent,
-    QuillModule.forRoot()
+    QuillModule.forRoot(),
+    GoogleTagManagerModule.forRoot({
+      id: environment.googleTagManagerId,
+      gtm_auth: environment.googleTagManagerAuth,
+      gtm_preview: environment.googleTagManagerPreview
+    })
   ],
   providers: [
     { provide: APP_ID, useValue: 'ng-cli-universal' },

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-routing.module.ts

@@ -4,15 +4,27 @@ import { RouterModule, Routes } from '@angular/router';
 import { CheckingAuthGuard } from '../shared/project-router.guard';
 import { CheckingOverviewComponent } from './checking-overview/checking-overview.component';
 import { CheckingComponent } from './checking/checking.component';
+import { environment } from '../../environments/environment';
 
 const routes: Routes = [
   {
     path: 'projects/:projectId/checking/:bookId/:chapter',
     component: CheckingComponent,
-    canActivate: [CheckingAuthGuard]
+    canActivate: [CheckingAuthGuard],
+    title: `Community Checking Questions & Answers - ${environment.siteName}`
   },
-  { path: 'projects/:projectId/checking/:bookId', component: CheckingComponent, canActivate: [CheckingAuthGuard] },
-  { path: 'projects/:projectId/checking', component: CheckingOverviewComponent, canActivate: [CheckingAuthGuard] }
+  {
+    path: 'projects/:projectId/checking/:bookId',
+    component: CheckingComponent,
+    canActivate: [CheckingAuthGuard],
+    title: `Community Checking Questions & Answers - ${environment.siteName}`
+  },
+  {
+    path: 'projects/:projectId/checking',
+    component: CheckingOverviewComponent,
+    canActivate: [CheckingAuthGuard],
+    title: `Community Checking Management - ${environment.siteName}`
+  }
 ];
 
 @NgModule({

src/SIL.XForge.Scripture/ClientApp/src/app/translate/translate-routing.module.ts

@@ -5,24 +5,38 @@ import { DraftGenerationComponent } from './draft-generation/draft-generation.co
 import { DraftSourcesComponent } from './draft-generation/draft-sources/draft-sources.component';
 import { EditorComponent } from './editor/editor.component';
 import { TranslateOverviewComponent } from './translate-overview/translate-overview.component';
+import { environment } from '../../environments/environment';
 
 const routes: Routes = [
   {
     path: 'projects/:projectId/translate/:bookId/:chapter',
     component: EditorComponent,
-    canActivate: [TranslateAuthGuard]
+    canActivate: [TranslateAuthGuard],
+    title: `Editor & Review - ${environment.siteName}`
+  },
+  {
+    path: 'projects/:projectId/translate/:bookId',
+    component: EditorComponent,
+    canActivate: [TranslateAuthGuard],
+    title: `Editor & Review - ${environment.siteName}`
+  },
+  {
+    path: 'projects/:projectId/translate',
+    component: TranslateOverviewComponent,
+    canActivate: [TranslateAuthGuard],
+    title: `Translation Overview - ${environment.siteName}`
   },
-  { path: 'projects/:projectId/translate/:bookId', component: EditorComponent, canActivate: [TranslateAuthGuard] },
-  { path: 'projects/:projectId/translate', component: TranslateOverviewComponent, canActivate: [TranslateAuthGuard] },
   {
     path: 'projects/:projectId/draft-generation',
     component: DraftGenerationComponent,
-    canActivate: [NmtDraftAuthGuard]
+    canActivate: [NmtDraftAuthGuard],
+    title: `Draft Generation - ${environment.siteName}`
   },
   {
     path: 'projects/:projectId/draft-generation/sources',
     component: DraftSourcesComponent,
-    canActivate: [NmtDraftAuthGuard]
+    canActivate: [NmtDraftAuthGuard],
+    title: `Configure Draft Sources - ${environment.siteName}`
   }
 ];
 

src/SIL.XForge.Scripture/ClientApp/src/app/users/users-routing.module.ts

@@ -2,9 +2,15 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { UsersAuthGuard } from '../shared/project-router.guard';
 import { UsersComponent } from './users.component';
+import { environment } from '../../environments/environment';
 
 const routes: Routes = [
-  { path: 'projects/:projectId/users', component: UsersComponent, canActivate: [UsersAuthGuard] }
+  {
+    path: 'projects/:projectId/users',
+    component: UsersComponent,
+    canActivate: [UsersAuthGuard],
+    title: `User Management - ${environment.siteName}`
+  }
 ];
 
 @NgModule({

src/SIL.XForge.Scripture/ClientApp/src/environments/environment.prod.ts

@@ -16,5 +16,8 @@ export const environment = {
   realtimeUrl: '/realtime-api/',
   authDomain: 'login.languagetechnology.org',
   authClientId: 'tY2wXn40fsL5VsPM4uIHNtU6ZUEXGeFn',
-  offlineDBVersion: 8
+  offlineDBVersion: 8,
+  googleTagManagerId: 'GTM-P2DF8SLM',
+  googleTagManagerAuth: 'OCXvABYNFBKJ0TJkAGsvAw',
+  googleTagManagerPreview: 'env-1'
 };

src/SIL.XForge.Scripture/ClientApp/src/environments/environment.pwa-test.ts

@@ -16,5 +16,8 @@ export const environment = {
   realtimeUrl: '/',
   authDomain: 'sil-appbuilder.auth0.com',
   authClientId: 'aoAGb9Yx1H5WIsvCW6JJCteJhSa37ftH',
-  offlineDBVersion: 8
+  offlineDBVersion: 8,
+  googleTagManagerId: 'GTM-P2DF8SLM',
+  googleTagManagerAuth: 'AC1M72Jw4UydK-bnFoT0Cw',
+  googleTagManagerPreview: 'env-8'
 };

src/SIL.XForge.Scripture/ClientApp/src/environments/environment.staging.ts

@@ -16,5 +16,8 @@ export const environment = {
   realtimeUrl: '/realtime-api/',
   authDomain: 'dev-sillsdev.auth0.com',
   authClientId: '4eHLjo40mAEGFU6zUxdYjnpnC1K1Ydnj',
-  offlineDBVersion: 8
+  offlineDBVersion: 8,
+  googleTagManagerId: 'GTM-P2DF8SLM',
+  googleTagManagerAuth: 'pcbHrZyROB6E6AS0PZsD1Q',
+  googleTagManagerPreview: 'env-7'
 };

src/SIL.XForge.Scripture/ClientApp/src/environments/environment.ts

@@ -23,5 +23,8 @@ export const environment = {
   realtimeUrl: '/',
   authDomain: 'sil-appbuilder.auth0.com',
   authClientId: 'aoAGb9Yx1H5WIsvCW6JJCteJhSa37ftH',
-  offlineDBVersion: 8
+  offlineDBVersion: 8,
+  googleTagManagerId: 'GTM-P2DF8SLM',
+  googleTagManagerAuth: 'AC1M72Jw4UydK-bnFoT0Cw',
+  googleTagManagerPreview: 'env-8'
 };

src/SIL.XForge.Scripture/ClientApp/src/index.html

@@ -1,16 +1,6 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-22170471-15"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-    </script>
-
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/analytics.service.spec.ts

@@ -0,0 +1,14 @@
+import { sanitizeUrl } from './analytics.service';
+
+describe('AnalyticsService', () => {
+  it('should redact the access token from URL', () => {
+    const url = 'https://example.com/#access_token=123';
+    expect(sanitizeUrl(url)).toEqual('https://example.com/#access_token=redacted');
+  });
+
+  it('should redact the join key from URL', () => {
+    ['https://example.com/join/123', 'https://example.com/join/123/en'].forEach(url => {
+      expect(sanitizeUrl(url)).toContain('https://example.com/join/redacted');
+    });
+  });
+});