@fullerstack/ngx-gtag ![](https://raw.githubusercontent.com/neekware/fullerstack/main/libs/agx-assets/src/lib/images/tech/fullerstack-x250.png)
A simple gTag module for Angular applications
![download-image](https://img.shields.io/npm/dm/@fullerstack/ngx-gtag.svg)
Overview
Description
Tracking application page view and events for the purpose of monitoring trends and recalibrating your application is great.
This library helps you achieving just that via Google's Analytics.
@fullerstack/ngx-gtag attempts to streamline the analytics of your application, while promoting DRY DRY.
How to install
npm i @fullerstack/ngx-gtag |OR| yarn add @fullerstack/ngx-gtag
How to use
import { ApplicationConfig } from '@fullerstack/ngx-config';
import { LogLevel } from '@fullerstack/ngx-logger';
export const environment: ApplicationConfig = {
appName: '@fullerstack/ngx-gtag',
production: true,
log: {
level: LogLevel.debug,
},
gtag: {
isEnabled: true,
trackingId: 'UA-XXXXXX-Y',
routeChangeTracking: true,
},
};
import { CfgModule } from '@fullerstack/ngx-config';
import { LoggerModule } from '@fullerstack/ngx-logger';
import { GTagModule } from '@fullerstack/ngx-gtag';
import { environment } from '../environments/environment';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CfgModule.forRoot(environment),
LoggerModule,
GTagModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Component } from '@angular/core';
import {
ConfigService,
DefaultApplicationConfig,
} from '@fullerstack/ngx-config';
import { LogService } from '@fullerstack/ngx-logger';
import { GTagService } from '@fullerstack/ngx-gtag';
@Component({
selector: 'fullerstack-root',
template: `<h1>Welcome to {{ title }}!</h1>`,
})
export class AppComponent {
title = 'Fullerstack';
constructor(
readonly config: ConfigService,
readonly logger: LogService,
readonly tagger: GTagService
) {
this.title = this.config.options.appName;
this.logger.info('AppComponent loaded ...');
this.trackDetailedEvent();
this.trackEvent();
}
trackDetailedEvent() {
tagger.trackEvent('home-page', {
event_category: 'SEO',
event_label: 'Page loaded, anonymous user',
});
}
trackEvent() {
tagger.trackEvent('home-page-visit');
}
}
Advanced usage
import { ApplicationConfig, TargetPlatform } from '@fullerstack/ngx-config';
import { LogLevel } from '@fullerstack/ngx-logger';
export const environment: ApplicationConfig = {
appName: '@fullerstack/ngx-gtag',
gtag: {
isEnabled: true,
trackingId: 'UA-XXXXXX-Y',
routeChangeTracking: false,
},
};
tagger.trackPageView({
page_path: '/',
page_title: 'Home Page',
page_location: 'http://fullerstack.net'
});
tagger.trackPageView();
const routes: Routes = [
{ path: '', component: HomeComponent, { title: 'Home page direct' }},
{ path: 'home', component: HomeComponent, data: { title: 'Home page' } }
];
License
Released under a (MIT) license.
Version
X.Y.Z Version
`MAJOR` version -- making incompatible API changes
`MINOR` version -- adding functionality in a backwards-compatible manner
`PATCH` version -- making backwards-compatible bug fixes