An Angular library to work with Google Tags Manager (GTM), specially with SSR. (inspired from angular-gtag : https://github.com/codediodeio/angular-gtag )
npm install --save @bloomscorp/ngx-gtag
Add the the tracking code from GA admin dashboard to index.html and set send_page_view to false.
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-YOUR_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-YOUR_TRACKING_ID', { 'send_page_view': false });
</script>
</head>Add the package to to your app.module.ts.
import { NgxGoogleTagsManagerModule } from 'ngx-gtag';
@NgModule({
imports: [
NgxGoogleTagsManagerModule.forRoot(
{
trackingId: 'UA-YOUR_TRACKING_ID',
trackPageviews: true
}
)
]
})Options
trackingId: string (required)Google Analytics UA tracking ID.trackPageviews: booleanDefault true.debug: booleanDefault false, console logs every gtag event/pageview.
The package will listen to route changes by default, you just need to instantiate service in the root of the project.
import { GtagAPIService } from 'ngx-gtag';
export class AppComponent {
constructor(gtag: GtagAPIService) {}
}GtagAPIService also allows you to track pageviews manually.
gtag.sendPageviewData();
// or with custom params
gtag.sendPageviewData({
page_title: 'Shopping Products',
page_path: '/products',
page_location: 'https://abc.com/products'
});Events expect an action.
gtag.sendEventData({ action: 'view_promotion' });You can optionally pass in addtional params.
gtag.sendEventData({
action: 'login',
method: 'Instagram',
event_category: 'engagemnt',
event_label: 'New user logged in via OAuth'
});To submit an issue or feature request please report to here