# ng-google-tag-manager

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

Latest version **1.7.5** (published 2023-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-google-tag-manager
pnpm add ng-google-tag-manager
yarn add ng-google-tag-manager
bun add ng-google-tag-manager
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.5 |
| Published | 2023-02-14 |
| First published | 2023-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 82.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | pm2039012@gmail.com |
| Maintainers | pm20390 |

## Links

- npm: https://www.npmjs.com/package/ng-google-tag-manager
- Repository: https://github.com/pm20390/ng-google-tag-manager
- Homepage: https://github.com/pm20390/ng-google-tag-manager#readme
- Issues: https://github.com/pm20390/ng-google-tag-manager/issues
- npm.io page: https://npm.io/package/ng-google-tag-manager

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.4.1

## Recent versions

- 1.7.5 (latest) — 2023-02-14
- 1.7.4 — 2023-02-14
- 1.7.3 — 2023-02-14
- 1.7.2 — 2023-02-14
- 1.7.1 — 2023-02-14
- 1.7.0 — 2023-02-14

## README

# 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](https://github.com/angular/angular-cli)
For more info see this [how to install google tag manager article](https://itnext.io/how-to-add-google-tag-manager-to-an-angular-application-fc68624386e2)

## 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](https://github.com/mzuccaroli)
- **Perry M.** - _Maintainer of fork_ - [Pm20390](https://github.com/pm20390)

See also the list of [contributors](https://github.com/pm20390/ng-google-tag-manager/graphs/contributors) who participated in this project.

## License

This project is licensed under the MIT License

## Acknowledgments

- Thanks to PurpleBooth for the [Readme Template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)

---
_Source: https://npm.io/package/ng-google-tag-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._