Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mzuccaroli/angular-google-tag-manager
A service library for integrate google tag manager in your angular project
https://github.com/mzuccaroli/angular-google-tag-manager
Last synced: 2 months ago
JSON representation
A service library for integrate google tag manager in your angular project
- Host: GitHub
- URL: https://github.com/mzuccaroli/angular-google-tag-manager
- Owner: mzuccaroli
- License: mit
- Created: 2019-05-17T14:59:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-11T13:51:43.000Z (6 months ago)
- Last Synced: 2024-10-30T08:00:29.308Z (3 months ago)
- Language: TypeScript
- Homepage: https://itnext.io/how-to-add-google-tag-manager-to-an-angular-application-fc68624386e2
- Size: 2.66 MB
- Stars: 138
- Watchers: 2
- Forks: 78
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-google-tag-manager - A service library for integrate google tag manager in your angular project. (Table of contents / Angular)
- fucking-awesome-angular - angular-google-tag-manager - A service library for integrate google tag manager in your angular project. (Table of contents / Angular)
- fucking-awesome-angular - angular-google-tag-manager - A service library for integrate google tag manager in your angular project. (Table of contents / Angular)
README
# Angular Google Tag Manager Service
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(googleTagManagerConfiguration);
```
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
})
]
```
## Authors
- **Marco Zuccaroli** - _Initial work_ - [Marco Zuccaroli](https://github.com/mzuccaroli)
See also the list of [contributors](https://github.com/mzuccaroli/angular-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)