@dagonmetric/ng-log-gtag
TypeScript icon, indicating that this package has built-in type declarations

2.3.2 • Public • Published

Angular Google Analytics Integration for NG-LOG

GitHub Actions Status Azure Pipelines Status codecov npm version Gitter

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

Related Projects

Feedback and Contributing

Check out the Contributing page.

License

This repository is licensed with the MIT license.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @dagonmetric/ng-log-gtag

    Weekly Downloads

    369

    Version

    2.3.2

    License

    MIT

    Unpacked Size

    209 kB

    Total Files

    31

    Last publish

    Collaborators

    • mmzliveid
    • dagonmetric-contributor