Google Tag Manager (GTM) dynamically in Angular

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  constructor(private gtmService: GoogleTagManagerService) {}

  ngOnInit(): void {
    this.gtmService.loadGTM();
  }
}

google-tag-manager-service.ts

import { Injectable, Renderer2, RendererFactory2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class GoogleTagManagerService {
  private renderer: Renderer2;
  private readonly gtmId = 'GTM-XXXXXX';

  constructor(
    rendererFactory: RendererFactory2,
    @Inject(DOCUMENT) private document: Document
  ) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }

  loadGTM(): void {
    // Load GTM script
    const script = this.renderer.createElement('script');
    script.async = true;
    script.src = `https://www.googletagmanager.com/gtm.js?id=${this.gtmId}`;
    this.renderer.appendChild(this.document.head, script);

    // Add noscript tag (for when JavaScript is disabled)
    const noscript = this.renderer.createElement('noscript');
    noscript.innerHTML = `
      <iframe src="https://www.googletagmanager.com/ns.html?id=${this.gtmId}"
              height="0" width="0" style="display:none;visibility:hidden"></iframe>
    `;
    this.renderer.appendChild(this.document.body, noscript);
  }
}