You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

ng-google-tag-manager

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-google-tag-manager

A service library for integrate google tag manager in your angular project

1.7.5
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

Ng Google Tag Manager Service

Fork of "angular-google-tag-manager" as there were some issues that needed to be fixed, and some features that I have added. I am using this in production, so will continue to maintain it and encourage feature requests and pull requests.

A service library for integrate google tag manager in your angular project This library was generated with Angular CLI For more info see this how to install google tag manager article

Getting Started

After installing it you need to provide your GTM id in app.module.ts

    providers: [
        ...
        {provide: 'googleTagManagerId',  useValue: YOUR_GTM_ID}
    ],

Or use the module's forRoot method

import { GoogleTagManagerModule } from 'angular-google-tag-manager';

imports: [
    ...
    GoogleTagManagerModule.forRoot({
      id: YOUR_GTM_ID,
    })
]

Or use the APP_INITIALIZER

import { GoogleTagManagerConfiguration } from 'angular-google-tag-manager-config.service';

imports: [
    ...
    GoogleTagManagerModule.forRoot()
]

providers: [
    {
      ...
      provide: APP_INITIALIZER,
      useFactory: configInitializer,
      deps: [
        HttpBackend,
        GoogleTagManagerConfiguration,
      ],
      multi: true,
    },
  ],

set the config in the method assigned to useFactory

googleTagManagerConfiguration.set({id: XYZ});

inject the gtmService in your controller

constructor(
        ...
        private gtmService: GoogleTagManagerService,
    ) { }

then you can start pushing events on your gtm

 this.router.events.forEach(item => {
            if (item instanceof NavigationEnd) {
                const gtmTag = {
                    event: 'page',
                    pageName: item.url
                };

                this.gtmService.pushTag(gtmTag);
            }
        });

if you want to recive tags without pushing events simply call the function to enable it

    this.gtmService.addGtmToDom();

Installing

In your Angular project run

npm i --save  angular-google-tag-manager

Custom configuration and GTM environments

You can pass gtm_preview and gtm_auth optional variables to your GTM by providing them in app.module.ts

    providers: [
        ...
        {provide: 'googleTagManagerId',  useValue: YOUR_GTM_ID},
        {provide: 'googleTagManagerAuth',  useValue: YOUR_GTM_AUTH},
        {provide: 'googleTagManagerPreview',  useValue: YOUR_GTM_ENV},
        {provide: 'googleTagManagerResourcePath',  useValue: YOUR_GTM_RESOURCE_PATH},
        {provide: 'googleTagManagerCSPNonce',  useValue: YOUR_CSP_NONCE},
        {provide: 'googleTagManagerMode', useValue: "silent" | "noisy"}
    ],

Or using forRoot

import { GoogleTagManagerModule } from 'angular-google-tag-manager';

imports: [
    ...
    GoogleTagManagerModule.forRoot({
      id: YOUR_GTM_ID,
      gtm_auth: YOUR_GTM_AUTH,
      gtm_preview: YOUR_GTM_ENV
    })
]

⭐ New Features (v1.7.3)

Added "Silent mode" to stop error from throwing if GTM can't attach. Particularly useful is dynamically loading GTM ids that may or may not exist.

    providers: [
        ...
        {provide: 'googleTagManagerMode', useValue: "silent" | "noisy"}
    ],

Authors

  • Marco Zuccaroli - Initial work - Marco Zuccaroli
  • Perry M. - Maintainer of fork - Pm20390

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License

Acknowledgments

FAQs

Package last updated on 14 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts