前言
在今天的互联网时代，网站或应用程序想要得到更好的用户体验和更好的转化率，都需要不断优化和调整。其中数据分析是不可或缺的一部分。而 ngx-analytics 的 npm 包提供了一种简单，灵活且可扩展的集成分析测量解决方案。 使用 ngx-analytics 可以轻松地设置自定义数据点和跟踪用户行为。
安装 ngx-analytics
在命令行中运行以下命令即可安装 @kurkov87/ngx-analytics：
npm install --save @kurkov87/ngx-analytics
使用 ngx-analytics
通过代码集成 ngx-analytics
首先，在 TypeScript 中导入包和常量：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------------- ---------------- ------------------ - ---- --------------------------
-- -------------------------------------
------ ----- ------------------------ --------------- - -
---------- -
- -------- -------- --------- - ---- ----------------------- ------- - - -
-
--如上所示，我们的分析服务是 Piwik，但 ngx-analytics 也支持 Google 分析服务。
然后将分析配置添加到应用程序中：
@NgModule({
imports: [ AnalyticsModule.forRoot(ANALYTICS_CONFIGURATION) ],
providers: [{ provide: ANGULARTICS2_TOKEN, useExisting: AnalyticsService }]
})
export class AppModule {}最后，您可以使用下面的代码控制分析的收集：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------------
------ ----- ------------- -
------------------- ---------- ----------------- --
-------------- -
--------------------------------
------- ------------------
----------- - --------- ---------- -
---
-
-在模板中集成 ngx-analytics
只需在元素中添加指令即可轻松设置分析跟踪：
<button (click)="myMethod()" analyticsOn="click" analyticsCategory="Category">Click Me!</button>
自定义事件跟踪
一个典型的事件跟踪包括三个重要的维度：类别，操作和属性。@kurkov87/ngx-analytics 包允许您对其进行自定义以更好地适应您的需求。例如：
this.analytics.eventTrack.next({
action: 'custom-action',
properties: {
category: 'custom-category',
label: 'custom-label',
value: 1
}
});在配置分析服务时，可以为自定义事件设置别名：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------------
----- ------------------------ --------------- - -
---------- -
-
-------- --------
--------- -
---- -----------------------
------- --
--------------- -
-------------- - ------ ------------------ --------- ---------- -
-
-
-
-
--自定义页面视图跟踪
@kurkov87/ngx-analytics 还支持页面视图跟踪。在页面导航期间，页面视图将自动跟踪并将其发送到分析服务：
import { AnalyticsService } from '@kurkov87/ngx-analytics';
export class YourComponent {
constructor(private analytics: AnalyticsService) {
analytics.pageTrack('/your-page-url');
}
}总结
通过使用 @kurkov87/ngx-analytics 包，可以轻松地实现自定义事件跟踪，页面视图跟踪等。 此包的灵活性和可扩展性使其成为 Web 应用程序的必备工具。 通过使用 ngx-analytics，您可以更加清晰地了解用户行为并提高应用程序的用户体验和转化率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583cd7