Provider: Google Global Site Tag (gtag.js)

Setup

1. Add gtag.js Snippet

Add the tracking code provided by Google, which uses gtag.js, to your index.html file.

2. Configure Angulartics2

In your root component (e.g., app.component.ts), inject Angulartics2GoogleGlobalSiteTag and call startTracking().

import { Component } from '@angular/core';
import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(angulartics2Gst: Angulartics2GoogleGlobalSiteTag) {
    angulartics2Gst.startTracking();
  }
}

Extended Event Properties

All extended properties for services like Google Ads (send_to, transaction_id) can be passed through the gstCustom property.

import { Angulartics2 } from 'angulartics2';

constructor(private angulartics2: Angulartics2) {}

trackConversion() {
  this.angulartics2.eventTrack.next({
    action: 'conversion',
    properties: {
      gstCustom: {
        send_to: 'AW-XXXXXX/R-12345678',
        transaction_id: 'TXN-123'
      }
    }
  });
}

Custom Dimensions and Configuration

To set custom dimensions or other configuration properties, it's best to configure them in the forRoot method. This ensures they are applied correctly with each page track.

// app.module.ts
import { Angulartics2Module } from 'angulartics2';

@NgModule({
  imports: [
    Angulartics2Module.forRoot({
      gst: {
        trackingIds: ['UA-11111111-1'],
        customMap: {
          dimension1: 'version',
          dimension2: 'page_language',
        },
        anonymizeIp: true
      },
    })
  ]
})
export class AppModule { }

Then, you can set the values for these custom dimensions using setUserProperties:

import { Angulartics2 } from 'angulartics2';

// ...
this.angulartics2.setUserProperties.next({
  version: '1.2.3',
  page_language: 'en'
});