gst

Google Global Site Tag (gtag.js)

• homepage: google.com/analytics
• docs: developers.google.com/analytics/devguides/collection/gtagjs
• import: import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2';

Initial Setup

Add the full tracking code from developers.google.com/analytics/devguides/collection/gtagjs/

Include it in your application

Bootstrapping the application with Angulartics2:

// bootstrap
import { Angulartics2Module } from 'angulartics2';

@NgModule({
  imports: [
    ...
    // import Angulartics2GoogleGlobalSiteTag in root ngModule
    Angulartics2Module.forRoot()
  ],
})
export class AppModule { }

Then injecting Angulartics2GoogleGlobalSiteTag (or any provider) into the root component and calling startTracking will hook into the router and send every route change to your analytics provider.

// component
import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2';

@Component({ ... })
export class AppComponent {
  // import Angulartics2GoogleGlobalSiteTag in root component
  constructor(angulartics: Angulartics2GoogleGlobalSiteTag) {
    angulartics.startTracking();
  }
}

Send tracking events in a component or template

Check out the documentation for Tracking Events.

Extended Event properties.

All extended properties that can be added to events, for e-commerce (items, shipping, tax...), adwords (send_to, account_type, transaction_id) and another can be passed through the gstCustom:

constructor(private angulartics2: Angulartics2) {
  angulartics2.eventTrack.next({
    action: 'conversion',
    properties: {
      gstCustom: {
        send_to: 'AW-XXXXXX/R-12345678',
        transaction_id: ''
      }
    }
  });
}

Custom dimension and tracker settings

custom_map and other config settings you could set inside your HTML page will be overridden after each pagetrack. Therefore, you need to pass them to the GST configuration if you want to use them. At this point, you're probably better to remove completely the gtag('config' call from you HTML page and to add all required properties at module definition.

// bootstrap
import { Angulartics2Module } from 'angulartics2';

@NgModule({
  imports: [
    ...
    // import Angulartics2GoogleGlobalSiteTag in root ngModule
    Angulartics2Module.forRoot(
      gst: {
        trackingIds: ['UA-11111111-1'],
        customMap: {
          dimension1: 'version',
          dimension2: 'page_language',
          dimension3: 'custom_dimension_name'
        },
        anonymizeIp: true
      },
    )
  ],
})
export class AppModule { }

Then, you can use the normal angulartic approach:

this.angulartics2.setUserProperties.next({
  custom_dimension_name: 'example'
});

You can also pass custom dimension with a specific event using the gstCustom property described in previous section