Angular Google Analytics Integration for NG-LOG

Google Analytics Global Site Tag gtag.js integration of DagonMetric/ng-log for Angular applications.

Getting Started

Add the global site tag

Add gtag.js to your site, see instruction from developers.google.com/analytics/devguides/collection/gtagjs.

Installation

npm

npm install @dagonmetric/ng-log @dagonmetric/ng-log-gtag

or yarn

yarn add @dagonmetric/ng-log @dagonmetric/ng-log-gtag

Module Setup (app.module.ts)

import { LogModule } from '@dagonmetric/ng-log';
import { GTagLoggerModule } from '@dagonmetric/ng-log-gtag';

@NgModule({
  imports: [
    // Other module imports

    // ng-log modules
    LogModule,
    GTagLoggerModule.withOptions({
      measurementId: 'GA_MEASUREMENT_ID'
    })
  ]
})
export class AppModule { }

Live edit app.module.ts in stackblitz

Usage (app.component.ts)

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

Samples

• Demo app view source / live edit in stackblitz

Related Projects

• 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-firebase-analytics - Firebase Analytics implementation for ng-log
• ng-log-facebook-analytics - Facebook Pixel Analytics implementation for ng-log

Feedback and Contributing

Check out the Contributing page.

License

This repository is licensed with the MIT license.