angular - 在Angular SPA中运行GTM(Google跟踪代码管理器)

Question

我正在构建Angular 6 SPA。使用Google Analytics（分析）时，我使用以下代码：

<script>
  (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'XXXXXXX', 'auto');    //tracking code

在 index.html中
由于我想触发 app.component.ts中每个页面的分析，因此有以下代码：

this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
     (window as any).ga("set", "page", event.urlAfterRedirects);
        (window as any).ga("send", "pageview");
  }
}

到目前为止，一切都很好。问题出在 Google Tag Manager上。这是index.html中的代码：

<script nonce="1234567890">
    (function (w, d, s, l, i) {
        w[l] = w[l] || []; w[l].push({
            'gtm.start':
                new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true;
        j.nonce = "1234567890"; j.src =
            '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
  })(window, document, 'script', 'dataLayer', 'XXXXXXXX');
</script>

Angular引导时，上面的命令仅运行 once。当Angular路由器导航到另一条路线时，我无法找到与上述方法类似的方法来使其再次运行。有任何想法吗？

Answer 1

对于GTM和SPA，运行一次即可。 GTM中的基本“网页浏览”事件与实际的网页加载相对应，因此在SPA中仅触发一次。但是，您可以在GTM中使用GTM历史记录事件来触发SPA应用程序中的GA浏览量标记。
这是文档https://support.google.com/tagmanager/answer/7679322?hl=en