在前端开发领域中，谁都不会否认 Google 的 Angular 是一款强大的框架。不过，如果你需要在 Angular 应用程序中集成分析和跟踪，那么 angulartics2 就是不能缺少的 npm 包之一。本教程将向读者介绍如何使用 angulartics2，实现数据统计与分析的功能。
一、什么是 angulartics2
angulartics2 是一个用于在 Angular 应用程序中集成不同网站分析工具的 npm 包。它可以让你更加方便的集成 Google Analytics、Facebook Pixcel 或 Segment.io 等第三方统计工具。
二、安装 angulartics2
使用 angulartics2 之前，你需要先将其安装到你的应用程序中。输入以下命令即可安装 angulartics2：
npm install angulartics2
三、集成 Google Analytics
现在，我们假设你要在应用程序中集成 Google Analytics。接下来，我们需要首先配置 tracking ID。打开 src/environments/environment.ts 文件，并添加以下代码：
export const environment = {
production: false,
angulartics2: {
trackingIds: ['UA-XXXXXXXXX-X'] // Your tracking id here
}
};替换 UA-XXXXXXXXX-X 为你的追踪 ID。之后，我们需要在 app.module.ts 文件中，导入 Angulartics2Module 并添加到 NgModule 的 imports 中：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- ------------------------------
------ - ------------------ - ---- ---------------
-----------
------------- -
------------
--
-------- -
--------------
----------------------------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -执行上述操作后，我们已经成功集成了 Google Analytics！现在，我们可以在组件中使用 Angular 的依赖注入来跟踪页面浏览、事件等等。
四、在组件中使用 angulartics2
为了更加了解如何使用 angulartics2，我们创建一个名为 HomePageComponent 的组件。假设我们想要在该组件中跟踪 “用户访问主页” 这一事件，我们可以在组件中，导入 Angulartics2 并使用依赖注入将其注入到组件中：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ------ - --------- - ---- ---------------- ------------ --------- ---------------- ------------ ----------------------------- ---------- ----------------------------- -- ------ ----- ----------------- - ------------------- ------------- ------------- - - -
在组件中，我们需要 import Angulartics2 来获取 angulartics2 实例。然后，我们可以 inject（注入） Angulartics2 到组件的 constructor 中，并将其保存到实例变量中。
在组件中，我们将使用它的 eventTrack 方法来跟踪我们的事件。在 HomePageComponent 类中，我们添加一个 ngAfterViewInit 方法，在该方法中，我们将该事件传递给 eventTrack 方法：
ngAfterViewInit() {
this.angulartics2.eventTrack.next({
action: 'Visiting home page',
properties: { category: 'HomePage' }
});
}现在，我们已经完成了在 HomePageComponent 中跟踪 “用户访问主页” 事件的操作。通过使用 eventTrack 我们可以在任何需要跟踪的组件中进行类似的操作。
五、总结
在本教程中，我们已经学会如何使用 angulartics2 这个npm 包，集成 Google 功能并跟踪用户页面。angulartics2 是用于 Angular 应用程序中的分析和跟踪工具，可以方便地将第三方分析工具与 Angular 应用程序集成起来，并实现统计和分析的功能。通过本教程的学习，希望能够帮助你更加方便地使用 angulartics2，来实现你的数据统计与分析需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61033