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');