feat(docs-infra): switch from GA to Firebase Analytics

- enable Firebase Performance

Fixes angular#6

aio/package.json

@@ -93,13 +93,17 @@
     "@angular/compiler": "10.0.2",
     "@angular/core": "10.0.2",
     "@angular/elements": "10.0.2",
+    "@angular/fire": "6.0.0",
     "@angular/forms": "10.0.2",
     "@angular/material": "10.0.1",
     "@angular/platform-browser": "10.0.2",
     "@angular/platform-browser-dynamic": "10.0.2",
     "@angular/router": "10.0.2",
     "@angular/service-worker": "10.0.2",
     "@webcomponents/custom-elements": "1.2.1",
+    "firebase": "~7.18.0",
+    "first-input-delay": "^0.1.3",
+    "proxy-polyfill": "^0.3.2",
     "rxjs": "^6.5.3",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.3"

aio/src/app/app.component.spec.ts

@@ -13,7 +13,6 @@ import { NavigationNode, NavigationService } from 'app/navigation/navigation.ser
 import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
 import { SearchService } from 'app/search/search.service';
 import { Deployment } from 'app/shared/deployment.service';
-import { GaService } from 'app/shared/ga.service';
 import { LocationService } from 'app/shared/location.service';
 import { Logger } from 'app/shared/logger.service';
 import { ScrollService } from 'app/shared/scroll.service';
@@ -1262,7 +1261,6 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
     providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
       { provide: ElementsLoader, useClass: TestElementsLoader },
-      { provide: GaService, useClass: TestGaService },
       { provide: HttpClient, useClass: TestHttpClient },
       { provide: LocationService, useFactory: () => mockLocationService },
       { provide: Logger, useClass: MockLogger },
@@ -1284,10 +1282,6 @@ class TestElementsLoader {
       .and.returnValue(Promise.resolve());
 }
 
-class TestGaService {
-  locationChanged = jasmine.createSpy('locationChanged');
-}
-
 class TestHttpClient {
 
   static versionInfo = {

aio/src/app/app.module.ts

@@ -11,14 +11,16 @@ import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { AngularFireModule } from '@angular/fire';
+import { AngularFireAnalyticsModule, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
+import { AngularFirePerformanceModule } from '@angular/fire/performance';
 
 import { AppComponent } from 'app/app.component';
 import { CustomIconRegistry, SVG_ICONS } from 'app/shared/custom-icon-registry';
 import { Deployment } from 'app/shared/deployment.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { DtComponent } from 'app/layout/doc-viewer/dt.component';
 import { ModeBannerComponent } from 'app/layout/mode-banner/mode-banner.component';
-import { GaService } from 'app/shared/ga.service';
 import { Logger } from 'app/shared/logger.service';
 import { LocationService } from 'app/shared/location.service';
 import { NavigationService } from 'app/navigation/navigation.service';
@@ -143,6 +145,9 @@ export const svgIconProviders = [
     MatToolbarModule,
     SwUpdatesModule,
     SharedModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAnalyticsModule,
+    AngularFirePerformanceModule,
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
   ],
   declarations: [
@@ -161,7 +166,6 @@ export const svgIconProviders = [
     Deployment,
     DocumentService,
     { provide: ErrorHandler, useClass: ReportingErrorHandler },
-    GaService,
     Logger,
     Location,
     { provide: LocationStrategy, useClass: PathLocationStrategy },
@@ -175,6 +179,8 @@ export const svgIconProviders = [
     TocService,
     { provide: CurrentDateToken, useFactory: currentDateProvider },
     { provide: WindowToken, useFactory: windowProvider },
+    ScreenTrackingService,
+    UserTrackingService,
   ],
   bootstrap: [ AppComponent ]
 })

aio/src/app/shared/location.service.spec.ts

@@ -3,7 +3,6 @@ import { Location, LocationStrategy, PlatformLocation } from '@angular/common';
 import { MockLocationStrategy } from '@angular/common/testing';
 import { Subject } from 'rxjs';
 
-import { GaService } from 'app/shared/ga.service';
 import { SwUpdatesService } from 'app/sw-updates/sw-updates.service';
 import { LocationService } from './location.service';
 import { ScrollService } from './scroll.service';
@@ -19,7 +18,6 @@ describe('LocationService', () => {
     injector = ReflectiveInjector.resolveAndCreate([
         LocationService,
         Location,
-        { provide: GaService, useClass: TestGaService },
         { provide: LocationStrategy, useClass: MockLocationStrategy },
         { provide: PlatformLocation, useClass: MockPlatformLocation },
         { provide: SwUpdatesService, useClass: MockSwUpdatesService },
@@ -571,55 +569,6 @@ describe('LocationService', () => {
       });
     });
   });
-
-  describe('google analytics - GaService#locationChanged', () => {
-
-    let gaLocationChanged: jasmine.Spy;
-
-    beforeEach(() => {
-      const gaService = injector.get(GaService);
-      gaLocationChanged = gaService.locationChanged;
-      // execute currentPath observable so that gaLocationChanged is called
-      service.currentPath.subscribe();
-    });
-
-    it('should call locationChanged with initial URL', () => {
-      const initialUrl = location.path().replace(/^\/+/, '');  // strip leading slashes
-
-      expect(gaLocationChanged.calls.count()).toBe(1, 'gaService.locationChanged');
-      const args = gaLocationChanged.calls.first().args;
-      expect(args[0]).toBe(initialUrl);
-    });
-
-    it('should call locationChanged when `go` to a page', () => {
-      service.go('some-new-url');
-      expect(gaLocationChanged.calls.count()).toBe(2, 'gaService.locationChanged');
-      const args = gaLocationChanged.calls.argsFor(1);
-      expect(args[0]).toBe('some-new-url');
-    });
-
-    it('should call locationChanged with url stripped of hash or query', () => {
-      // Important to keep GA service from sending tracking event when the doc hasn't changed
-      // e.g., when the user navigates within the page via # fragments.
-      service.go('some-new-url#one');
-      service.go('some-new-url#two');
-      service.go('some-new-url/?foo="true"');
-      expect(gaLocationChanged.calls.count()).toBe(4, 'gaService.locationChanged called');
-      const args = gaLocationChanged.calls.allArgs();
-      expect(args[1]).toEqual(args[2], 'same url for hash calls');
-      expect(args[1]).toEqual(args[3], 'same url for query string call');
-    });
-
-    it('should call locationChanged when window history changes', () => {
-      location.simulatePopState('/next-url');
-
-      expect(gaLocationChanged.calls.count()).toBe(2, 'gaService.locationChanged');
-      const args = gaLocationChanged.calls.argsFor(1);
-      expect(args[0]).toBe('next-url');
-    });
-
-  });
-
 });
 
 /// Test Helpers ///
@@ -635,7 +584,3 @@ class MockSwUpdatesService {
 class MockScrollService {
   removeStoredScrollInfo() { }
 }
-
-class TestGaService {
-  locationChanged = jasmine.createSpy('locationChanged');
-}

aio/src/app/shared/location.service.ts

@@ -2,9 +2,8 @@ import { Injectable } from '@angular/core';
 import { Location, PlatformLocation } from '@angular/common';
 
 import { ReplaySubject } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
-import { GaService } from 'app/shared/ga.service';
 import { SwUpdatesService } from 'app/sw-updates/sw-updates.service';
 import { ScrollService } from './scroll.service';
 
@@ -20,11 +19,9 @@ export class LocationService {
 
   currentPath = this.currentUrl.pipe(
     map(url => (url.match(/[^?#]*/) || [])[0]),  // strip query and hash
-    tap(path => this.gaService.locationChanged(path)),
   );
 
   constructor(
-    private gaService: GaService,
     private location: Location,
     private scrollService: ScrollService,
     private platformLocation: PlatformLocation,

aio/src/environments/environment.next.ts

@@ -1,6 +1,15 @@
-// This is for the staging site, which is hosted at https://next.angular.io (and https://aio-staging.firebaseapp.org)
+// This is for the staging site, which is hosted at https://angular-hispano-docs-staging.web.app/
 export const environment = {
-  gaId: 'UA-8594346-15', // Production id (since it is linked from the main site)
+  firebase: {
+    apiKey: 'AIzaSyB6nIQPdT0LtGs7SZgWBrHf77cO-JsgDaE',
+    authDomain: 'angular-hispano-staging.firebaseapp.com',
+    databaseURL: 'https://angular-hispano-staging.firebaseio.com',
+    projectId: 'angular-hispano-staging',
+    storageBucket: 'angular-hispano-staging.appspot.com',
+    messagingSenderId: '589769577276',
+    appId: '1:589769577276:web:6e86185a9a0877586a0439',
+    measurementId: 'G-EZYJEBFTV7'
+  },
   production: true,
   mode: 'next'
 };

aio/src/environments/environment.stable.ts

@@ -1,6 +1,15 @@
-// This is for the production site, which is hosted at https://angular.io
+// This is for the production site, which is hosted at https://docs.angular.lat/
 export const environment = {
-  gaId: 'UA-8594346-15', // Production id
+  firebase: {
+    apiKey: 'AIzaSyD2ofxXTZHHcsmaAt5H9Zd17vj2ne57mIQ',
+    authDomain: 'angular-latino.firebaseapp.com',
+    databaseURL: 'https://angular-latino.firebaseio.com',
+    projectId: 'angular-latino',
+    storageBucket: 'angular-latino.appspot.com',
+    messagingSenderId: '1050547922973',
+    appId: '1:1050547922973:web:0eb42eb1f83938c1317ef4',
+    measurementId: 'G-8EYEC7KL0R'
+  },
   production: true,
   mode: 'stable'
 };

aio/src/environments/environment.ts

@@ -5,7 +5,16 @@
 
 
 export const environment = {
-  gaId: 'UA-8594346-26', // Development id
+  firebase: {
+    apiKey: 'AIzaSyB6nIQPdT0LtGs7SZgWBrHf77cO-JsgDaE',
+    authDomain: 'angular-hispano-staging.firebaseapp.com',
+    databaseURL: 'https://angular-hispano-staging.firebaseio.com',
+    projectId: 'angular-hispano-staging',
+    storageBucket: 'angular-hispano-staging.appspot.com',
+    messagingSenderId: '589769577276',
+    appId: '1:589769577276:web:6e86185a9a0877586a0439',
+    measurementId: 'G-EZYJEBFTV7'
+  },
   production: false,
   mode: 'stable'
 };

aio/src/polyfills.ts

@@ -71,3 +71,7 @@ import '@webcomponents/custom-elements';
 //       - Samsung browser 5.0-8.1 (~0.43% global usage)
 //       - Opera 41-47 (~0.02% global usage)
 import '@webcomponents/custom-elements/src/native-shim';
+// Polyfill for browser performance API for tracking First Input Delay
+import 'first-input-delay';
+// Proxy polyfill is required to support IE11 with Angular Fire
+import 'proxy-polyfill/proxy.min';