Angular 12中基于Realm参数动态加载对应客户端GA4脚本的问题求助

我现在用Angular 12开发一个多客户端的网页，每个客户端通过唯一的查询参数realm来区分，根据这个参数我会从后端获取对应客户端的自定义字体颜色、用户数据等配置。

现在有个需求：只针对网站的特定页面，让每个客户端用自己的Google Analytics（GA4）测量ID来收集各自Realm下的用户访问数据。

我尝试过在组件里动态加载gtag.js脚本，并且传入对应Realm的测量ID，但遇到了问题——Analytics没法把数据流关联到网页上，我猜测可能是因为不像SEO元标签那样在index.html里提前加载的缘故？如果我的理解不对，也欢迎指正。

这是我写的analytics.service.ts代码：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AnalyticsService {
  private isLoaded = false;

  constructor() {}

  loadGoogleAnalytics(measurementId: string): void {
    console.log('hi loadGoogleAnalytics', measurementId);
    if (!measurementId || this.isLoaded) {
      return;
    }

    this.isLoaded = true;

    // Create script tag
    const script = document.createElement('script');
    script.async = true;
    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
    document.head.appendChild(script);

    // Initialize GA
    script.onload = () => {
      (window as any).dataLayer = (window as any).dataLayer || [];
      function gtag(...args: any[]) {
        (window as any).dataLayer.push(args);
      }
      (window as any).gtag = gtag;

      gtag('js', new Date());
      gtag('config', measurementId);
      this.trackPageView();
    };
  }

  trackPageView(): void {
    console.log('Tracking page view:', window.location.hash);
    if ((window as any).gtag) {
      (window as any).gtag('event', 'page_view', {page_title: document.title, page_path: window.location.hash });
    }
  }  
}

测试时遇到的状态如图所示：

想请教一下，有没有什么可行的解决方案来解决这个问题？

备注：内容来源于stack exchange，提问作者Kardon63