Provider: Google Tag Manager (GTM)

Setup

1. Add GTM Snippet

Add the full tracking code provided by Google Tag Manager to your index.html file. This usually involves one snippet in the <head> and one at the start of the <body>.

2. Configure Angulartics2

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

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

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

3. Configure Tags in GTM

Angulartics2 sends events to the dataLayer. You need to configure Google Tag Manager to listen for these events and forward them to your desired services (like Google Analytics).

  1. Create a Trigger:

    • Go to your GTM container and create a new Trigger.
    • Choose Trigger Type: Custom Event.
    • For Event Name, use Page View to capture page tracks, or interaction for custom events.
    • You can use RegEx matching for the event name if needed (e.g., .*).

  2. Create a Tag:

    • Create a new Tag (e.g., a "Google Analytics: GA4 Event" tag).
    • Configure the tag with your Measurement ID and the event parameters.
    • You can use Data Layer Variables in GTM to access the data sent by Angulartics2 (e.g., action, category, label).
    • Assign the trigger you created in the previous step to this tag.

Angulartics2 will push the following objects to the dataLayer:

  • Page Views: { event: 'Page View', 'content-name': '/your/path' }
  • Events: { event: 'interaction', target: 'category', action: 'action', label: 'label', ... }