将Google Analytics添加到不同环境的Angular 5项目中。

我正在使用Angular 5,想添加Google Analytics。

这方面已经有很多教程了,比如。

我看到的所有教程都要求在index.html中加入以下代码。

index.html

...
<app-root></app-root>
<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', 'UA-109919601-1', 'auto'); // add your tracking ID here. ISSUE HERE!
ga('send', 'pageview');
</script>
...

问题是行。

ga('create', 'UA-109919601-1', 'auto');

我想根据我所处的环境使用不同的跟踪代码,怎么做呢?

有些解决方案建议像这样在Angular代码中加入这段代码。

import { environment } from './environments/environment';

if (environment.production) {
  document.write('<script type="text/javascript">// ProductionAnalyticsCodeHere</script>');
} else if (environment.staging) {
  document.write('<script type="text/javascript">// StagingAnalyticsCodeHere</script>');
}

这种解决方案的问题是,Google Analytics的运行速度没有那么快,影响了加载时间的分析。

解决方案:

Index.html

在下面几行注释

 ga('create', 'UA-XXXXXX-X', 'auto'); 
 ga('send', 'pageview');

app.component.ts

从环境变量中获取跟踪ID。

在构造函数中加入以下代码

this.router.events.subscribe(event => {

        if (event instanceof NavigationEnd) {

          (<any>window).ga('create',environment.gaTrackingId,'auto');
          (<any>window).ga('set', 'page', event.urlAfterRedirects);
          (<any>window).ga('send', 'pageview');
        }
      });

给TA打赏
共{{data.count}}人
人已打赏
未分类

Map函数在Iterable List中返回值?Scala

2022-9-8 23:06:37

未分类

如何在Vue中加载外部html作为模板或x-template?

2022-9-8 23:06:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索