![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
@fullerstack/ngx-gtag
Advanced tools
A simple gTag module for Angular applications
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.
npm i @fullerstack/ngx-gtag |OR| yarn add @fullerstack/ngx-gtag
// In your environment{prod,staging}.ts
import { ApplicationConfig } from '@fullerstack/ngx-config';
import { LogLevel } from '@fullerstack/ngx-logger';
export const environment: ApplicationConfig = {
// app name
appName: '@fullerstack/ngx-gtag',
production: true,
log: {
// log level (application-wide)
level: LogLevel.debug,
},
gtag: {
// ability to disable tracking (ex; dev / staging mode)
isEnabled: true,
// google tracking ID for your application domain
trackingId: 'UA-XXXXXX-Y',
// track page view on start (on route changes)
routeChangeTracking: true,
},
};
// In your app.module.ts
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), // make the environment injectable
LoggerModule,
GTagModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
// In your app.component.ts
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 ...');
// all route changes are tracked automatically from now on
this.trackDetailedEvent();
this.trackEvent();
}
trackDetailedEvent() {
// example of event with params
tagger.trackEvent('home-page', {
event_category: 'SEO',
event_label: 'Page loaded, anonymous user',
});
}
trackEvent() {
// example of event without params
tagger.trackEvent('home-page-visit');
}
}
// In your environment{prod,staging}.ts
import { ApplicationConfig, TargetPlatform } from '@fullerstack/ngx-config';
import { LogLevel } from '@fullerstack/ngx-logger';
export const environment: ApplicationConfig = {
appName: '@fullerstack/ngx-gtag',
// ...
gtag: {
// ability to disable tracking (ex; dev / staging mode)
isEnabled: true,
// google tracking ID for domain
trackingId: 'UA-XXXXXX-Y',
// track page view on start (on route change)
routeChangeTracking: false,
},
};
// track page view manually with specific options
tagger.trackPageView({
page_path: '/',
page_title: 'Home Page',
page_location: 'http://fullerstack.net'
});
// or with default options
tagger.trackPageView();
// where defaults are:
// page_path = router.url
// page_title = [active-route.data.title] | [environment.appName]
const routes: Routes = [
{ path: '', component: HomeComponent, { title: 'Home page direct' }},
{ path: 'home', component: HomeComponent, data: { title: 'Home page' } }
];
Released under a (MIT) license.
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
FAQs
A simple gTag module for Angular applications
We found that @fullerstack/ngx-gtag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.