Adding AngularFireAnalytics, AngularFireRemoteConfig, and refactoring DI Tokens

README.md

@@ -64,6 +64,12 @@ export class MyApp {
 
 - [Installation & Setup](docs/install-and-setup.md)
 
+### **NEW:** Monitor usage of your application in production
+
+> `AngularFireAnalytics` provides a convient method of interacting with Google Analytics in your Angular application. The provided `ScreenTrackingService` and `UserTrackingService` automatically log events when you're using the Angular Router or Firebase Authentication respectively. [Learn more about Google Analytics](https://firebase.google.com/docs/analytics).
+
+- [Getting started with Google Analytics](docs/analytics/getting-started.md)
+
 ### Interacting with your database(s)
 
 Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. [Learn about the differences between them in the Firebase Documentation](https://firebase.google.com/docs/firestore/rtdb-vs-firestore).
@@ -94,11 +100,19 @@ Firebase offers two cloud-based, client-accessible database solutions that suppo
 
 - [Getting started with Cloud Storage](docs/storage/storage.md)
 
-### Send push notifications
+### Receive push notifications
 
 - [Getting started with Firebase Messaging](docs/messaging/messaging.md)
 
-### Monitor your application performance in production
+### **NEW:** Change behavior and appearance of your application without deploying
+
+> Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. [Learn more about Remote Config](https://firebase.google.com/docs/remote-config).
+
+- [Getting started with Remote Config](docs/remote-config/getting-started.md)
+
+### **NEW:** Monitor your application performance in production
+
+> Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your iOS, Android, and web apps. [Learn more about Performance Monitor](https://firebase.google.com/docs/perf-mon).
 
 - [Getting started with Performance Monitoring](docs/performance/getting-started.md)
 

docs/analytics/getting-started.md

@@ -0,0 +1,27 @@
+# Getting started with Google Analytics
+
+### Something, something
+
+TBD
+
+### Putting it all together
+
+```ts
+@NgModule({
+  imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAnalyticsModule
+  ],
+  providers: [
+    ScreenTrackingService,
+    UserTrackingService
+  ]
+})
+export class AppModule { }
+```
+
+```ts
+constructor(analytics: AngularFireAnalytics) {
+    analytics.logEvent('custom_event', { ... });
+}
+```

docs/remote-config/getting-started.md

@@ -0,0 +1,30 @@
+# Getting started with Remote Config
+
+### Something, something
+
+TBD
+
+### Putting it all together
+
+```ts
+@NgModule({
+  imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireRemoteConfigModule
+  ],
+  providers: [
+    { provide: DEFAULT_CONFIG, useValue: { enableAwesome: true } },
+    {
+      provide: REMOTE_CONFIG_SETTINGS,
+      useFactory: () => isDevMode ? { minimumFetchIntervalMillis: 1 } : {}
+    }
+  ]
+})
+export class AppModule { }
+```
+
+```ts
+constructor(remoteConfig: AngularFireRemoteConfig) {
+    remoteConfig.changes.subscribe(changes => …);
+}
+```

karma.conf.js

@@ -34,10 +34,13 @@ module.exports = function(config) {
       'node_modules/firebase/firebase-storage.js',
       'dist/packages-dist/bundles/core.umd.{js,map}',
       'dist/packages-dist/bundles/auth.umd.{js,map}',
+      'dist/packages-dist/bundles/analytics.umd.{js,map}',
       'dist/packages-dist/bundles/auth-guard.umd.{js,map}',
       'dist/packages-dist/bundles/database.umd.{js,map}',
       'dist/packages-dist/bundles/firestore.umd.{js,map}',
       'dist/packages-dist/bundles/functions.umd.{js,map}',
+      'dist/packages-dist/bundles/messaging.umd.{js,map}',
+      'dist/packages-dist/bundles/remote-config.umd.{js,map}',
       'dist/packages-dist/bundles/storage.umd.{js,map}',
       'dist/packages-dist/bundles/performance.umd.{js,map}',
       'dist/packages-dist/bundles/database-deprecated.umd.{js,map}',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/fire",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {

src/analytics/analytics.module.ts

@@ -0,0 +1,12 @@
+import { NgModule, Optional } from '@angular/core';
+import { UserTrackingService, ScreenTrackingService } from './analytics.service';
+import { AngularFireAnalytics } from './analytics';
+
+@NgModule()
+export class AngularFireAnalyticsModule {
+  constructor(
+    analytics: AngularFireAnalytics,
+    @Optional() screenTracking: ScreenTrackingService,
+    @Optional() userTracking: UserTrackingService
+  ) { }
+}

src/analytics/analytics.service.ts

@@ -0,0 +1,145 @@
+import { Injectable, Inject, Optional, NgZone, OnDestroy, InjectionToken } from '@angular/core';
+import { Subscription, from, Observable, empty, of } from 'rxjs';
+import { filter, withLatestFrom, switchMap, map, tap, pairwise, startWith, groupBy, mergeMap } from 'rxjs/operators';
+import { Router, NavigationEnd, ActivationEnd } from '@angular/router';
+import { runOutsideAngular, _lazySDKProxy, _firebaseAppFactory } from '@angular/fire';
+import { AngularFireAnalytics } from './analytics';
+import { User } from 'firebase/app';
+
+export const APP_VERSION = new InjectionToken<string>('angularfire2.analytics.appVersion');
+export const APP_NAME = new InjectionToken<string>('angularfire2.analytics.appName');
+
+const DEFAULT_APP_VERSION = '?';
+const DEFAULT_APP_NAME = 'Angular App';
+
+type AngularFireAnalyticsEventParams = {
+    app_name: string;
+    firebase_screen_class: string | undefined;
+    firebase_screen: string;
+    app_version: string;
+    screen_name: string;
+    outlet: string;
+    url: string;
+};
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ScreenTrackingService implements OnDestroy {
+
+    private disposable: Subscription|undefined;
+
+    constructor(
+      analytics: AngularFireAnalytics,
+      @Optional() router:Router,
+      @Optional() @Inject(APP_VERSION) providedAppVersion:string|null,
+      @Optional() @Inject(APP_NAME) providedAppName:string|null,
+      zone: NgZone
+    ) {
+        if (!router) { return this }
+        const app_name = providedAppName || DEFAULT_APP_NAME;
+        const app_version = providedAppVersion || DEFAULT_APP_VERSION;
+        const activationEndEvents = router.events.pipe(filter<ActivationEnd>(e => e instanceof ActivationEnd));
+        const navigationEndEvents = router.events.pipe(filter<NavigationEnd>(e => e instanceof NavigationEnd));
+        this.disposable = navigationEndEvents.pipe(
+            withLatestFrom(activationEndEvents),
+            switchMap(([navigationEnd, activationEnd]) => {
+                const url = navigationEnd.url;
+                const screen_name = activationEnd.snapshot.routeConfig && activationEnd.snapshot.routeConfig.path || url;
+                const params: AngularFireAnalyticsEventParams = {
+                    app_name, app_version, screen_name, url,
+                    firebase_screen_class: undefined,
+                    firebase_screen: screen_name,
+                    outlet: activationEnd.snapshot.outlet
+                };
+                const component = activationEnd.snapshot.component;
+                const routeConfig = activationEnd.snapshot.routeConfig;
+                const loadedConfig = routeConfig && (routeConfig as any)._loadedConfig;
+                const loadChildren = routeConfig && routeConfig.loadChildren;
+                if (component) {
+                    return of({...params, firebase_screen_class: nameOrToString(component) });
+                } else if (loadedConfig && loadedConfig.module && loadedConfig.module._moduleType) {
+                    return of({...params, firebase_screen_class: nameOrToString(loadedConfig.module._moduleType)});
+                } else if (typeof loadChildren === "string") {
+                    // TODO is this an older lazy loading style parse
+                    return of({...params, firebase_screen_class: loadChildren });
+                } else if (loadChildren) {
+                    // TODO look into the other return types here
+                    return from(loadChildren() as Promise<any>).pipe(map(child => ({...params, firebase_screen_class: nameOrToString(child) })));
+                } else {
+                    // TODO figure out what forms of router events I might be missing
+                    return of(params);
+                }
+            }),
+            tap(params => {
+                // TODO perhaps I can be smarter about this, bubble events up to the nearest outlet?
+                if (params.outlet == "primary") {
+                    // TODO do I need to add gtag config for firebase_screen, firebase_screen_class, firebase_screen_id?
+                    //      also shouldn't these be computed in the setCurrentScreen function? prior too?
+                    //      do we want to be logging screen name or class?
+                    analytics.setCurrentScreen(params.screen_name, { global: true })
+                }
+            }),
+            map(params => ({ firebase_screen_id: nextScreenId(params), ...params})),
+            groupBy(params => params.outlet),
+            mergeMap(group => group.pipe(startWith(undefined), pairwise())),
+            map(([prior, current]) => prior ? {
+                firebase_previous_class: prior.firebase_screen_class,
+                firebase_previous_screen: prior.firebase_screen,
+                firebase_previous_id: prior.firebase_screen_id,
+                ...current!
+            } : current!),
+            tap(params => analytics.logEvent('screen_view', params)),
+            runOutsideAngular(zone)
+        ).subscribe();
+    }
+
+    ngOnDestroy() {
+      if (this.disposable) { this.disposable.unsubscribe(); }
+    }
+
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class UserTrackingService implements OnDestroy {
+
+    private disposable: Subscription|undefined;
+
+    // TODO a user properties injector
+    constructor(
+        analytics: AngularFireAnalytics,
+        zone: NgZone
+    ) {
+        this.disposable = from(analytics.app).pipe(
+            // TODO can I hook into auth being loaded...
+            map(app => app.auth()),
+            switchMap(auth => auth ? new Observable<User>(auth.onAuthStateChanged.bind(auth)) : empty()),
+            switchMap(user => analytics.setUserId(user ? user.uid : null!, { global: true })),
+            runOutsideAngular(zone)
+        ).subscribe();
+    }
+
+    ngOnDestroy() {
+        if (this.disposable) { this.disposable.unsubscribe(); }
+    }
+}
+
+// firebase_screen_id is an INT64 but use INT32 cause javascript
+const randomInt32 = () => Math.floor(Math.random() * (2**32 - 1)) - 2**31;
+
+const currentScreenIds: {[key:string]: number} = {};
+
+const nextScreenId = (params:AngularFireAnalyticsEventParams) => {
+    const scope = params.outlet;
+    if (currentScreenIds.hasOwnProperty(scope)) {
+        return ++currentScreenIds[scope];
+    } else {
+        const ret = randomInt32();
+        currentScreenIds[scope] = ret;
+        return ret;
+    }
+}
+
+const nameOrToString = (it:any): string => it.name || it.toString();

src/analytics/analytics.spec.ts

@@ -0,0 +1,86 @@
+import { ReflectiveInjector, Provider } from '@angular/core';
+import { TestBed, inject } from '@angular/core/testing';
+import { FirebaseApp, FirebaseOptionsToken, AngularFireModule, FirebaseNameOrConfigToken } from '@angular/fire';
+import { AngularFireAnalytics, AngularFireAnalyticsModule, AUTOMATICALLY_SET_CURRENT_SCREEN, AUTOMATICALLY_LOG_SCREEN_VIEWS, ANALYTICS_COLLECTION_ENABLED, AUTOMATICALLY_TRACK_USER_IDENTIFIER, APP_VERSION, APP_NAME } from '@angular/fire/analytics';
+import { COMMON_CONFIG } from './test-config';
+
+
+describe('AngularFireAnalytics', () => {
+  let app: FirebaseApp;
+  let analytics: AngularFireAnalytics;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AngularFireModule.initializeApp(COMMON_CONFIG),
+        AngularFireAnalyticsModule
+      ]
+    });
+    inject([FirebaseApp, AngularFireAnalytics], (app_: FirebaseApp, _analytics: AngularFireAnalytics) => {
+      app = app_;
+      analytics = _analytics;
+    })();
+  });
+
+  afterEach(done => {
+    app.delete();
+    done();
+  });
+
+  it('should be exist', () => {
+    expect(analytics instanceof AngularFireAnalytics).toBe(true);
+  });
+
+  it('should have the Firebase Functions instance', () => {
+    expect(analytics.analytics).toBeDefined();
+  });
+
+});
+
+const FIREBASE_APP_NAME_TOO = (Math.random() + 1).toString(36).substring(7);
+
+describe('AngularFireAnalytics with different app', () => {
+  let app: FirebaseApp;
+  let analytics: AngularFireAnalytics;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AngularFireModule.initializeApp(COMMON_CONFIG),
+        AngularFireAnalyticsModule
+      ],
+      providers: [
+        { provide: FirebaseNameOrConfigToken, useValue: FIREBASE_APP_NAME_TOO },
+        { provide: FirebaseOptionsToken, useValue: COMMON_CONFIG },
+        { provide: AUTOMATICALLY_SET_CURRENT_SCREEN, useValue: true }
+        { provide: AUTOMATICALLY_LOG_SCREEN_VIEWS, useValue: true },
+        { provide: ANALYTICS_COLLECTION_ENABLED, useValue: true },
+        { provide: AUTOMATICALLY_TRACK_USER_IDENTIFIER, useValue: true },
+        { provide: APP_VERSION, useValue: '0.0' },
+        { provide: APP_NAME, useValue: 'Test App!' }
+      ]
+    });
+    inject([FirebaseApp, AngularFireAnalytics], (app_: FirebaseApp, _analytics: AngularFireAnalytics) => {
+      app = app_;
+      analytics = _analytics;
+    })();
+  });
+
+  afterEach(done => {
+    app.delete();
+    done();
+  });
+
+  describe('<constructor>', () => {
+
+    it('should be an AngularFireAuth type', () => {
+      expect(analytics instanceof AngularFireAnalytics).toEqual(true);
+    });
+
+    it('should have the Firebase Functions instance', () => {
+      expect(analytics.analytics).toBeDefined();
+    });
+
+  });
+
+});