ng-gtag

A simple and easy solution for adding google analytics page tracking to your angular project

Installation

npm install ng-gtag

Setup

In your root module import GtagModule

import { GtagModule } from 'ng-gtag';

@NgModule({
  imports: [
    GtagModule.forRoot({trackingId: 'UA-<YOUR-GA-TRACKINGID>'})
  ]
})

Additionally you can pass options to the forRoot function. For example:

GtagModule.forRoot({
  trackingId: "UA-<YOUR-GA-TRACKINGID>",
  options: { send_page_view: false },
});

Then in your app.component.html add the tags

<ng-gtag></ng-gtag>

You will not need to add any additional code, this package will inject the correct <script> tags for you into the head section.

This package is also designed to work with Angular Universal projects.

Events

Service

GtagEventService.event({
  action: "sale",
  options: { event_category: "engagement" },
});

Directive

<button
  ngGtagEvent
  gtagOn="click"
  gtagAction="sale"
  [gtagOptions]="{ event_category: 'engagement' }"
>
  Purchase
</button>

Multiple Tracking ID's

It is as simple as passing array to the forRoot function when importing

GtagModule.forRoot([
  {
    trackingId: "UA-<YOUR-GA-TRACKINGID1>",
    options: { send_page_view: false },
  },
  {
    trackingId: "UA-<YOUR-GA-TRACKINGID2>",
    options: { send_page_view: true },
  },
]);

If you then want to specify a trackingId for an event you can use the option send_to as per the gta.js API

<button
  ngGtagEvent
  gtagOn="click"
  gtagAction="sale"
  [gtagOptions]="{ send_to: 'UA-<YOUR-GA-TRACKINGID1>' }"
>
  Purchase
</button>

FAQ

Why?
The move to gtag.js was a fairly significant API change and I was tired of having to add script tags to my index.html along with additional code to get page views to work correctly with Angular. I am also a strong believer in using server side rendering (SSR) and ran into numerous issues with some other packages.