html - 如何在 Angular2 中实现 Google Analytics？

Question

我在尝试在 angular2 中实现谷歌分析时遇到了问题。根据我找到的信息，例如，在 this post 中这似乎很容易。但到目前为止，我还没有找到任何示例，说明如何不是从 .html 而是从 .ts 来做到这一点。

我正在尝试使用谷歌分析创建一个私有(private)方法，然后在构造函数中调用它。像那样的东西。

constructor() {
  this.initializeAnalytics();
}

private initializeAnalytics() {
    (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', '//www.google-analytics.com/analytics.js', 'ga');

    ...
    ...
}

但是仅仅放置谷歌分析代码是行不通的(错误:提供的参数与调用目标的任何签名不匹配)。我可能做错了。

我怎样才能做到这一点？

Answer 1

我就是这样做的。

您需要将 GA 代码放入您的 index.html 中。(不要忘记注释以下行://ga('send', 'pageview');)

然后您需要在导入后将 ga 函数声明到您的 app.component.ts 文件中:

import { ... } ...;

declare var ga:Function;

@component(...)

然后您可以在您的 app.component.ts 中订阅路由更改事件并像这样发送 ga 数据:

this.router.events.subscribe((event:Event) => {
    // Send GA tracking on NavigationEnd event. You may wish to add other 
    // logic here too or change which event to work with
    if (event instanceof NavigationEnd) {
        // When the route is '/', location.path actually returns ''.
        let newRoute = this.location.path() || '/';
        // If the route has changed, send the new route to analytics.
        if (this.currentRoute != newRoute) {
            ga('send', 'pageview', newRoute);
            //console.log('would send to ga: ' + newRoute);
            this.currentRoute = newRoute;
        }
    }
});