{"id":13806397,"url":"https://github.com/mzuccaroli/angular-google-tag-manager","last_synced_at":"2025-05-13T21:32:54.330Z","repository":{"id":38835633,"uuid":"187235912","full_name":"mzuccaroli/angular-google-tag-manager","owner":"mzuccaroli","description":"A service library for integrate google tag manager in your angular project","archived":false,"fork":false,"pushed_at":"2024-12-04T10:27:40.000Z","size":2522,"stargazers_count":144,"open_issues_count":23,"forks_count":78,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-01T20:02:01.211Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://itnext.io/how-to-add-google-tag-manager-to-an-angular-application-fc68624386e2","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mzuccaroli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-05-17T14:59:59.000Z","updated_at":"2025-02-21T19:40:46.000Z","dependencies_parsed_at":"2023-11-30T10:28:49.382Z","dependency_job_id":"db0c4141-452d-49dc-a829-5eea549dbb94","html_url":"https://github.com/mzuccaroli/angular-google-tag-manager","commit_stats":{"total_commits":155,"total_committers":21,"mean_commits":7.380952380952381,"dds":0.6129032258064516,"last_synced_commit":"5a53c879f54698529740584ef5cd2bf9137a24b4"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzuccaroli%2Fangular-google-tag-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzuccaroli%2Fangular-google-tag-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzuccaroli%2Fangular-google-tag-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzuccaroli%2Fangular-google-tag-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzuccaroli","download_url":"https://codeload.github.com/mzuccaroli/angular-google-tag-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253795133,"owners_count":21965485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:11.271Z","updated_at":"2025-05-13T21:32:54.309Z","avatar_url":"https://github.com/mzuccaroli.png","language":"TypeScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Analytics"],"readme":"# Angular Google Tag Manager Service\n\nA service library for integrate google tag manager in your angular project\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli)\nFor 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)\n\n## Getting Started\n\nAfter installing it you need to provide your GTM id in app.module.ts\n\n```\n    providers: [\n        ...\n        {provide: 'googleTagManagerId',  useValue: YOUR_GTM_ID}\n    ],\n```\n\nOr use the module's `forRoot` method\n\n```\nimport { GoogleTagManagerModule } from 'angular-google-tag-manager';\n\nimports: [\n    ...\n    GoogleTagManagerModule.forRoot({\n      id: YOUR_GTM_ID,\n    })\n]\n```\n\nOr use the standalone based provider\n\n```\nimport { provideGoogleTagManager } from 'angular-google-tag-manager';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    ...\n    provideGoogleTagManager({\n      id: 'YOUR_GTM_ID',\n      gtm_csp_none: 'CSP-NONCE',\n      // gtm_auth: YOUR_GTM_AUTH,\n      // gtm_preview: YOUR_GTM_RESOURCE_PATH\n      // gtm_resource_path:\n      // gtm_mode: \"silent\" | \"noisy\"\n    }),\n  ],\n};\n```\n\nOr use the `APP_INITIALIZER`\n\n```\nimport { GoogleTagManagerConfiguration } from 'angular-google-tag-manager-config.service';\n\nimports: [\n    ...\n    GoogleTagManagerModule.forRoot()\n]\n\nproviders: [\n    {\n      ...\n      provide: APP_INITIALIZER,\n      useFactory: configInitializer,\n      deps: [\n        HttpBackend,\n        GoogleTagManagerConfiguration,\n      ],\n      multi: true,\n    },\n  ],\n```\n\nset the config in the method assigned to useFactory\n\n```\ngoogleTagManagerConfiguration.set(googleTagManagerConfiguration);\n```\n\ninject the gtmService in your controller\n\n```\nconstructor(\n        ...\n        private gtmService: GoogleTagManagerService,\n    ) { }\n```\n\nthen you can start pushing events on your gtm\n\n```\n this.router.events.forEach(item =\u003e {\n            if (item instanceof NavigationEnd) {\n                const gtmTag = {\n                    event: 'page',\n                    pageName: item.url\n                };\n\n                this.gtmService.pushTag(gtmTag);\n            }\n        });\n```\n\nif you want to recive tags without pushing events simply call the function to enable it\n\n```\n    this.gtmService.addGtmToDom();\n```\n\n### Installing\n\nIn your Angular project run\n\n```\nnpm i --save  angular-google-tag-manager\n```\n\n### Custom configuration and GTM environments\n\nYou can pass _gtm_preview_ and _gtm_auth_ optional variables to your GTM by providing them in app.module.ts\n\n```\n    providers: [\n        ...\n        {provide: 'googleTagManagerId',  useValue: YOUR_GTM_ID},\n        {provide: 'googleTagManagerAuth',  useValue: YOUR_GTM_AUTH},\n        {provide: 'googleTagManagerPreview',  useValue: YOUR_GTM_ENV},\n        {provide: 'googleTagManagerResourcePath',  useValue: YOUR_GTM_RESOURCE_PATH},\n        {provide: 'googleTagManagerCSPNonce',  useValue: YOUR_CSP_NONCE},\n        {provide: 'googleTagManagerMode', useValue: \"silent\" | \"noisy\"}\n    ],\n```\n\nOr using `forRoot`\n\n```\nimport { GoogleTagManagerModule } from 'angular-google-tag-manager';\n\nimports: [\n    ...\n    GoogleTagManagerModule.forRoot({\n      id: YOUR_GTM_ID,\n      gtm_auth: YOUR_GTM_AUTH,\n      gtm_preview: YOUR_GTM_ENV\n    })\n]\n```\n\n## Authors\n\n- **Marco Zuccaroli** - _Initial work_ - [Marco Zuccaroli](https://github.com/mzuccaroli)\n\nSee also the list of [contributors](https://github.com/mzuccaroli/angular-google-tag-manager/graphs/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License\n\n## Acknowledgments\n\n- Thanks to PurpleBooth for the [Readme Template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzuccaroli%2Fangular-google-tag-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzuccaroli%2Fangular-google-tag-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzuccaroli%2Fangular-google-tag-manager/lists"}