Google Firebase Analytics integration of DagonMetric/ng-log for Angular applications.
npm
npm install @dagonmetric/ng-log @dagonmetric/ng-log-firebase-analyticsor yarn
yarn add @dagonmetric/ng-log @dagonmetric/ng-log-firebase-analyticsimport { LogModule } from '@dagonmetric/ng-log';
import { FirebaseAnalyticsLoggerModule } from '@dagonmetric/ng-log-firebase-analytics';
@NgModule({
imports: [
// Other module imports
// ng-log modules
LogModule,
FirebaseAnalyticsLoggerModule.configure({
firebaseConfig : {
apiKey: '<your_firebase_app_api_key>',
projectId: '<your_firebase_project_id>',
appId: '<your_firebase_app_id>',
// Replace 'G-1111111111' with your measurementId
measurementId: 'G-1111111111',
// ...
}
})
]
})
export class AppModule { }Live edit app.module.ts in stackblitz
import { Component, OnInit } from '@angular/core';
import { LogService } from '@dagonmetric/ng-log';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private readonly logService: LogService) { }
ngOnInit(): void {
// Track traces
this.logService.trace('Testing trace');
this.logService.debug('Testing debug');
this.logService.info('Testing info');
this.logService.warn('Testing warn');
// Track exceptions
this.logService.error(new Error('Testing error'));
this.logService.fatal(new Error('Testing critical'));
// Track page view
this.logService.trackPageView({
name: 'My Angular App',
uri: '/home'
});
// Track page view with timing
this.logService.startTrackPage('about');
this.logService.stopTrackPage('about', { uri: '/about' });
// Track custom event
this.logService.trackEvent({
name: 'video_auto_play_start',
properties: {
non_interaction: true
}
});
// Track custom event with metrics
this.logService.trackEvent({
name: 'foo',
custom_map: {
dimension2: 'age',
metric5: 'avg_page_load_time'
},
measurements: {
avg_page_load_time: 1
},
properties: {
age: 12
}
});
// Track custom event with timing
this.logService.startTrackEvent('video_auto_play');
this.logService.stopTrackEvent('video_auto_play', {
properties: {
non_interaction: true
}
});
// Set user properties
this.logService.setUserProperties('<Authenticated User Id>', '<Account Id>');
// Clear user properties
this.logService.clearUserProperties();
}
}Live edit app.component.ts in stackblitz
- Demo app view source / live edit in stackblitz
- ng-log - Vendor-agnostic logging, analytics and telemetry service abstractions and some implementations for Angular applications
- ng-log-applicationinsights - Microsoft Azure Application Insights implementation for
ng-log - ng-log-gtag - Angular Google Analytics (gtag.js) logger implementation for
ng-log - ng-log-facebook-analytics - Facebook Pixel Analytics implementation for
ng-log
Check out the Contributing page.
This repository is licensed with the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent