The library does not add GTM script to the DOM

[pedro-olivenca]

Hi there, I'm following the manual instructions to use this package but for some reason, GTM script is not written on the DOM at all.

I'm running an angular 15 created with angular-CLI... clear fresh just to test the library. The only thing I did was install the library and add it to the app.module.ts file such as:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

@NgModule({ declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule], providers: [{ provide: 'googleTagManagerId', useValue: 'GTM-XXXXXX' }], bootstrap: [AppComponent], }) export class AppModule {}

This does not render the script.

Am I doing something wrong?

package.json file: { "name": "gtm-angular15", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^15.0.0", "@angular/common": "^15.0.0", "@angular/compiler": "^15.0.0", "@angular/core": "^15.0.0", "@angular/forms": "^15.0.0", "@angular/platform-browser": "^15.0.0", "@angular/platform-browser-dynamic": "^15.0.0", "@angular/router": "^15.0.0", "angular-google-tag-manager": "^1.7.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.0.5", "@angular/cli": "~15.0.5", "@angular/compiler-cli": "^15.0.0", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.8.2" } }

[pm20390]

It doesn't seem like you're importing it into the modules. You need to do: GoogleTagManagerModule.forRoot()

[smichel-amiltone]

You should also do some thing in your app component !

import { Component, OnInit } from '@angular/core';
import { GoogleTagManagerService } from 'angular-google-tag-manager';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(
    private readonly gtmService: GoogleTagManagerService,
  ) { }

  ngOnInit() {
    this.gtmService.addGtmToDom();
  }
}

And if with that, it's still not work use the Or use the module's forRoot method in your app.module.ts instead of the providers

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

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

[worthy7]

@mzuccaroli I noticed that the script here https://github.com/mzuccaroli/angular-google-tag-manager/blob/master/projects/angular-google-tag-manager/src/lib/angular-google-tag-manager.service.ts#L96 Does not do the "config" section that is needed for example with Google Analytics.

Honeslty I do not know why the base GTM snipped does not perform this client_id setting, I feel like Google just forgot to update it for everyone.

Anyway, I think this package should do this at the end of the snipped

gtag('config', 'AW-1234567');