在 Angular2 中跟踪 Google Analytics 页面浏览量

Question

我使用 Angular 2 作为前端构建了一个新站点。由于一切都是通过推送状态完成的，因此通常不会触发 Google Analytics 代码将页面视图发送到 Google 服务器的页面加载。

如何手动向 Google 发送页面浏览事件，以便跟踪我网站的哪些用户正在浏览？

原文由 Ian Belcher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我设法通过订阅路由器上的更改、检查路由是否实际更改（我有时在某些路由上收到多个事件）然后将新路径发送给 Google 来实现这一点。

应用程序组件.ts

 import { ... } from '...';

// Declare ga function as ambient
declare var ga:Function;

@Component({ ... })

export class AppComponent {
    private currentRoute:string;

    constructor(_router:Router) {
        // Using Rx's built in `distinctUntilChanged ` feature to handle url change c/o @dloomb's answer
        router.events.distinctUntilChanged((previous: any, current: any) => {
            // Subscribe to any `NavigationEnd` events where the url has changed
            if(current instanceof NavigationEnd) {
                return previous.url === current.url;
            }
            return true;
        }).subscribe((x: any) => {
            ga('set', 'page', x.url);
            ga('send', 'pageview')
        });
      }
    }
}

在加载 angular2 应用程序之前，您还需要在主索引文件中包含谷歌分析代码，以便全局 ga 对象存在，但您不想发送两次初始视图。为此，请从 GA 脚本中删除以下行

索引.html

 <script>
  (function(i,s,o,g,r,a,m){...})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  // Remove this line to avoid sending the first page view twice.
  //ga('send', 'pageview');

</script>
<!--
    Load your ng2 app after ga.
    This style of deferred script loading doesn't guarantee this will happen
    but you can use Promise's or what works for your particular project.
-->
<script defer type="text/javascript" src="/app.js"></script>

---

使用第三方库

作为自己实施 GA 的替代方案， Angulartics2 库也是一种用于实施 GA 跟踪的流行工具，并且还与其他分析供应商集成。

原文由 Ian Belcher 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

扩展伊恩的回答。您可以使用 Rx 的内置功能来处理当前路由和新路由之间的区别。

 import { NavigationEnd, Router } from '@angular/router';

declare var ga: any;

export class AppComponent {
        constructor(public router: Router) {
            router.events.distinctUntilChanged((previous: any, current: any) => {
                if(current instanceof NavigationEnd) {
                    return previous.url === current.url;
                }
                return true;
            }).subscribe((x: any) => {
                console.log('router.change', x);
                ga('send', 'pageview', x.url);
            });
        }
    }

我们正在使用 distinctUntilChanged 运算符使观察者仅发射 NavigationEnd 类型的项目，并且与先前发射的项目不具有相同的路线。

原文由 dloomb 发布，翻译遵循 CC BY-SA 3.0 许可协议