简介
Angulartics 是一款用于在 Angular 应用程序中集成分析服务的 npm 包。它支持许多流行的分析工具，如 Google Analytics、Mixpanel 和 Segment 等。
本文将介绍如何使用 Angulartics 来集成 Google Analytics 到一个基于 Angular 的 web 应用程序。
安装
在开始之前，需要安装 Angulartics 和 Google Analytics。可以通过以下命令来安装 Angulartics：
npm install angulartics2 --save
接下来，在 index.html 文件中添加 Google Analytics 跟踪代码：
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>将 GA_MEASUREMENT_ID 替换为您的 Google Analytics 跟踪 ID。
现在，我们已经准备好在 Angular 中使用 Angulartics 了。
配置
首先，在 app.module.ts 文件中导入 Angulartics2Module 并添加到 imports 数组中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ---------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接下来，在 app.component.ts 文件中注入 Angulartics2GoogleAnalytics 并将其添加到 constructor 中：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------------------------- - ---- ------------------ ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- ---------------------------- ---------------------------- - - -
现在，我们已经准备好开始使用 Angulartics 来跟踪页面和事件了。
页面跟踪
要跟踪页面视图，请在组件的 ngOnInit 方法中调用 angulartics2GoogleAnalytics.pageView 方法，并传递页面名称：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------------------- - ---- ------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
------------------- ---------------------------- ---------------------------- -
-
---------- -
---------------------------------------------------
-
-事件跟踪
要跟踪事件，请在组件中调用 angulartics2GoogleAnalytics.eventTrack 方法，并传递事件名称和事件属性：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------------- - ---- ------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- -
------------------- ---------------------------- ---------------------------- -
-
--------- -
---------------------------------------------------- - --------- --------- ------ --- ------- ---
-
-总结
在本文中，我们介绍了如何使用 Angulartics 包来集成 Google Analytics 到一个基于 Angular 的 web 应用程序。通过页面跟踪和事件跟踪，我们可以收集应用程序的有价值的数据，并优化用户体验。
示例代码：[https://github.com/angulart
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34352