Skip to content

Commit 460170c

Browse files
jamesdanielsjamesdaniels
committed
more expirimentation
1 parent 91778ff commit 460170c

File tree

2 files changed

+52
-18
lines changed

2 files changed

+52
-18
lines changed

‎src/analytics/analytics.service.ts‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,19 @@ const SCREEN_NAME_KEY = 'screen_name';
1616
const PAGE_PATH_KEY = 'page_path';
1717
const EVENT_ORIGIN_KEY = 'event_origin';
1818
const FIREBASE_SCREEN_NAME_KEY = 'firebase_screen';
19-
const SCREEN_CLASS_KEY = 'firebase_screen_class';
19+
const FIREBASE_SCREEN_CLASS_KEY = 'firebase_screen_class';
2020
const OUTLET_KEY = 'outlet';
2121
const PAGE_TITLE_KEY = 'page_title';
2222
const PREVIOUS_SCREEN_CLASS_KEY = 'firebase_previous_class';
2323
const PREVIOUS_SCREEN_INSTANCE_ID_KEY = 'firebase_previous_id';
2424
const PREVIOUS_SCREEN_NAME_KEY = 'firebase_previous_screen';
2525
const SCREEN_INSTANCE_ID_KEY = 'firebase_screen_id';
2626

27+
// Do I need these?
28+
const SCREEN_CLASS_KEY = 'screen_class';
29+
const GA_SCREEN_CLASS_KEY = 'ga_screen_class';
30+
const GA_SCREEN_NAME_KEY = 'ga_screen';
31+
2732
const SCREEN_VIEW_EVENT = 'screen_view';
2833
const EVENT_ORIGIN_AUTO = 'auto';
2934
const DEFAULT_SCREEN_CLASS = '???';
@@ -54,7 +59,9 @@ export class ScreenTrackingService implements OnDestroy {
5459
[SCREEN_NAME_KEY]: screen_name,
5560
[PAGE_PATH_KEY]: page_path,
5661
[EVENT_ORIGIN_KEY]: EVENT_ORIGIN_AUTO,
57-
[FIREBASE_SCREEN_NAME_KEY]: screen_name,
62+
// TODO remove unneeded, just testing here
63+
[FIREBASE_SCREEN_NAME_KEY]: `${screen_name} (firebase)`,
64+
[GA_SCREEN_NAME_KEY]: `${screen_name} (ga)`,
5865
[OUTLET_KEY]: activationEnd.snapshot.outlet
5966
};
6067
if (title) { params[PAGE_TITLE_KEY] = title.getTitle() }
@@ -78,16 +85,25 @@ export class ScreenTrackingService implements OnDestroy {
7885
return of({...params, [SCREEN_CLASS_KEY]: DEFAULT_SCREEN_CLASS});
7986
}
8087
}),
88+
map(params => ({
89+
// TODO remove unneeded, just testing here
90+
[GA_SCREEN_CLASS_KEY]: `${params[SCREEN_CLASS_KEY]} (ga)`,
91+
[FIREBASE_SCREEN_CLASS_KEY]: `${params[SCREEN_CLASS_KEY]} (firebase)`,
92+
[SCREEN_INSTANCE_ID_KEY]: getScreenInstanceID(params),
93+
...params
94+
})),
8195
tap(params => {
8296
// TODO perhaps I can be smarter about this, bubble events up to the nearest outlet?
8397
if (params[OUTLET_KEY] == NG_PRIMARY_OUTLET) {
8498
// TODO do we want to track the firebase_ attributes?
85-
analytics.setCurrentScreen(params.screen_name);
86-
analytics.updateConfig({ [PAGE_PATH_KEY]: params[PAGE_PATH_KEY] });
99+
analytics.setCurrentScreen(params[SCREEN_NAME_KEY]);
100+
analytics.updateConfig({
101+
[PAGE_PATH_KEY]: params[PAGE_PATH_KEY],
102+
[SCREEN_CLASS_KEY]: params[SCREEN_CLASS_KEY]
103+
});
87104
if (title) { analytics.updateConfig({ [PAGE_TITLE_KEY]: params[PAGE_TITLE_KEY] }) }
88105
}
89106
}),
90-
map(params => ({ [SCREEN_INSTANCE_ID_KEY]: getScreenInstanceID(params), ...params })),
91107
groupBy(params => params[OUTLET_KEY]),
92108
mergeMap(group => group.pipe(startWith(undefined), pairwise())),
93109
map(([prior, current]) => prior ? {

‎src/analytics/analytics.ts‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Injectable, Inject, Optional, NgZone, InjectionToken } from '@angular/core';
1+
import { Injectable, Inject, Optional, NgZone, InjectionToken, PLATFORM_ID } from '@angular/core';
22
import { of } from 'rxjs';
3+
import { isPlatformBrowser } from '@angular/common';
34
import { map, tap, shareReplay, switchMap } from 'rxjs/operators';
45
import { FirebaseAppConfig, FirebaseOptions, runOutsideAngular, ɵlazySDKProxy, FirebaseAnalytics, FIREBASE_OPTIONS, FIREBASE_APP_NAME, _firebaseAppFactory } from '@angular/fire';
56
import { analytics, app } from 'firebase';
@@ -15,9 +16,8 @@ const APP_VERSION_KEY = 'app_version';
1516
const DEBUG_MODE_KEY = 'debug_mode';
1617
const ANALYTICS_ID_FIELD = 'measurementId';
1718
const GTAG_CONFIG_COMMAND = 'config';
18-
19-
// TODO can we get this from js sdk?
20-
const GTAG_FUNCTION = 'gtag';
19+
const GTAG_FUNCTION_NAME = 'gtag';
20+
const DATA_LAYER_NAME = 'dataLayer';
2121

2222
// SEMVER: once we move to Typescript 3.6 use `PromiseProxy<analytics.Analytics>`
2323
type AnalyticsProxy = {
@@ -36,17 +36,42 @@ export interface AngularFireAnalytics extends AnalyticsProxy {};
3636
@Injectable()
3737
export class AngularFireAnalytics {
3838

39-
public updateConfig: (options: {[key:string]: any}) => void;
39+
private gtag: (...args: any[]) => {};
40+
private analyticsInitialized: Promise<void>;
41+
42+
async updateConfig(config: {[key:string]: any}) {
43+
await this.analyticsInitialized;
44+
this.gtag(GTAG_CONFIG_COMMAND, this.options[ANALYTICS_ID_FIELD], { ...config, update: true });
45+
};
4046

4147
constructor(
42-
@Inject(FIREBASE_OPTIONS) options:FirebaseOptions,
48+
@Inject(FIREBASE_OPTIONS) private options:FirebaseOptions,
4349
@Optional() @Inject(FIREBASE_APP_NAME) nameOrConfig:string|FirebaseAppConfig|null|undefined,
4450
@Optional() @Inject(ANALYTICS_COLLECTION_ENABLED) analyticsCollectionEnabled:boolean|null,
4551
@Optional() @Inject(APP_VERSION) providedAppVersion:string|null,
4652
@Optional() @Inject(APP_NAME) providedAppName:string|null,
4753
@Optional() @Inject(DEBUG_MODE) debugModeEnabled:boolean|null,
54+
@Inject(PLATFORM_ID) platformId,
4855
zone: NgZone
4956
) {
57+
58+
if (isPlatformBrowser(platformId)) {
59+
window[DATA_LAYER_NAME] = window[DATA_LAYER_NAME] || [];
60+
this.gtag = window[GTAG_FUNCTION_NAME] || function() { window[DATA_LAYER_NAME].push(arguments) }
61+
this.analyticsInitialized = new Promise(resolve => {
62+
window[GTAG_FUNCTION_NAME] = (...args: any[]) => {
63+
if (args[0] == 'js') { resolve() }
64+
this.gtag(...args);
65+
}
66+
});
67+
} else {
68+
this.analyticsInitialized = Promise.reject();
69+
}
70+
71+
if (providedAppName) { this.updateConfig({ [APP_NAME_KEY]: providedAppName }) }
72+
if (providedAppVersion) { this.updateConfig({ [APP_VERSION_KEY]: providedAppVersion }) }
73+
if (debugModeEnabled) { this.updateConfig({ [DEBUG_MODE_KEY]: 1 }) }
74+
5075
const analytics = of(undefined).pipe(
5176
// @ts-ignore zapping in the UMD in the build script
5277
switchMap(() => zone.runOutsideAngular(() => import('firebase/analytics'))),
@@ -55,18 +80,11 @@ export class AngularFireAnalytics {
5580
map(app => <analytics.Analytics>app.analytics()),
5681
tap(analytics => {
5782
if (analyticsCollectionEnabled === false) { analytics.setAnalyticsCollectionEnabled(false) }
58-
if (providedAppName) { this.updateConfig({ [APP_NAME_KEY]: providedAppName }) }
59-
if (providedAppVersion) { this.updateConfig({ [APP_VERSION_KEY]: providedAppVersion }) }
60-
if (debugModeEnabled) { this.updateConfig({ [DEBUG_MODE_KEY]: 1 }) }
6183
}),
6284
runOutsideAngular(zone),
6385
shareReplay(1)
6486
);
6587

66-
this.updateConfig = (config: {[key:string]: any}) => analytics.toPromise().then(() =>
67-
window[GTAG_FUNCTION](GTAG_CONFIG_COMMAND, options[ANALYTICS_ID_FIELD], { ...config, update: true })
68-
);
69-
7088
return ɵlazySDKProxy(this, analytics, zone);
7189
}
7290

0 commit comments

Comments
 (0)