@bravobit/ng-google-tag-manager

The Angular Google Tag Manager library of the Bravobit team.

• Use ⌘ Command + F or ctrl + F to search for a keyword.

Installation

To use the Angular Google Tag Manager in your project install it via npm:

$ npm install @bravobit/ng-google-tag-manager --save

Setup

You need to provide the Google Tag Manager config in your providers array in the AppModule. You can do that by using the provideGoogleTagManagerConfig() method.

import {provideGoogleTagManagerConfig} from '@bravobit/ng-google-tag-manager';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {NgModule} from '@angular/core';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [
        provideGoogleTagManagerConfig({id: 'GTM-XXXXXXX'})
    ]
})
export class AppModule {
}

Usage

You can use the Tag Manager everywhere in your project. You can simply push any object to the window.dataLayer by using the .push(object) method.

import {GoogleTagManager} from '@bravobit/ng-google-tag-manager';
import {OnInit} from '@angular/core';

export class AppComponent implements OnInit {

    constructor(private _tagManager: GoogleTagManager) {
    }

    ngOnInit() {
        this._tagManager.push({event: 'app root event'});
    }

}