Easy Ngx Google Analytics Angular Module
Generates a google analytics tracking ID
It might take up to a day for Real-Time data to show for a new google analytics tracking ID
npm install easy-ngx-google-analytics --save
install gtag.js by copying the following snippet and pasting it immediately after the head tag on index.html. Replace GA_TRACKING_ID with the tracking ID of the Google Analytics property you want to send data to.
<! doctype html >
< html lang = " en " >
< head >
< script async src = " https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID " > </ script >
< script >
window . dataLayer = window . dataLayer || [ ] ;
function gtag ( ) { dataLayer . push ( arguments ) ; }
gtag ( ' js ' , new Date ( ) ) ;
gtag ( ' config ' , ' GA_TRACKING_ID ' , { ' send_page_view ' : false } ) ;
</ script >
< meta charset = " utf-8 " >
< title > MyModuleTestApp </ title >
< base href = " / " >
< meta name = " viewport " content = " width=device-width, initial-scale=1 " >
< link rel = " icon " type = " image/x-icon " href = " favicon.ico " >
</ head >
< body >
< app-root > < / app-root >
</ body >
</ html >
Add below code to your app module.
Next we import the EasyNgxGoogleAnalyticsModule to app module
import { RouterModule , Routes } from ' @angular/router ' ;
import { BrowserModule } from ' @angular/platform-browser ' ;
import { NgModule } from ' @angular/core ' ;
import { AppComponent } from ' ./app.component ' ;
import { EasyNgxGoogleAnalyticsModule } from ' easy-ngx-google-analytics ' ;
const appRoutes : Routes = [
{ path : ' ' , component : AppComponent } ,
{ path : ' 1 ' , component : AppComponent } ,
{ path : ' 2 ' , component : AppComponent }
] ;
@ NgModule ( {
declarations : [
AppComponent
] ,
imports : [
BrowserModule ,
EasyNgxGoogleAnalyticsModule ,
RouterModule . forRoot ( appRoutes )
] ,
bootstrap : [ AppComponent ]
} )
export class AppModule { }
Finally, we add the code below to inside our app.component.ts(our initial template).
import { EasyAnalyticsConfig } from ' easy-ngx-google-analytics ' ;
import { Component } from ' @angular/core ' ;
@ Component ( {
selector : ' app-root ' ,
template : ` < easy-ngx-google-analytics [ config ] = ' easyAnalyticsConfig ' > < / easy-ngx-google-analytics > ` ,
styleUrls : [ ' ./app.component.css ' ]
} )
export class AppComponent {
title = ' app ' ;
easyAnalyticsConfig : EasyAnalyticsConfig = {
gaTrackingId : ' UA-XXXXXXXXX-X ' ,
routesToIgnore : [ / \/ loading $ / ] ,
urlTrimmerFunction : ( originalUrl : string ) => {
originalUrl = originalUrl . replace ( / \d / , ' ' ) ;
return originalUrl ;
}
} ;
}
Chat with us on
If you use SystemJS to load your files, you might have to update your config with this if you don't use defaultJSExtensions: true:
System . config ( {
packages : {
" /easy-ngx-google-analytics " : { " defaultExtension " : " js " }
}
} ) ;
MIT
