在前端开发中，我们通常需要收集用户行为数据，并进行统计和分析。为了实现这一目的，微软推出了一套名为 Application Insights 的应用程序性能监视和用户行为分析工具。而在 Angular 5 中，我们可以使用官方提供的 npm 包——microsoft-applicationinsights-angular5，来方便地集成 Application Insights。
本文将为大家提供 microsoft-applicationinsights-angular5 的使用教程，内容将包括深度学习和指导意义，并提供详细的示例代码，帮助读者尽快掌握该工具的使用方法。
什么是 microsoft-applicationinsights-angular5
microsoft-applicationinsights-angular5 是微软针对 Angular 5 开发者推出的一款开源 npm 包，它与 Application Insights 结合，能够一键集成 Application Insights 工具，实现对 Angular 5 应用程序性能和用户行为数据的监视和统计。
如何使用 microsoft-applicationinsights-angular5
安装 microsoft-applicationinsights-angular5
要使用 microsoft-applicationinsights-angular5，首先需要安装该 npm 包。我们可以通过 npm 命令行工具，执行以下命令来安装它：
npm install microsoft-applicationinsights-angular5 --save
配置微软 Application Insights
在使用 microsoft-applicationinsights-angular5 之前，我们需要先在 Application Insights 中创建一个仪表盘。我们可以登陆微软 Azure 门户网站，按照该平台提供的教程进行创建。
创建之后，我们需要在应用程序中开启 Application Insights，以便能够在应用程序中集成并使用该服务。在此之前，确保我们已拥有从 Azure 门户 portal中获取的应用程序ID和仪表板密钥。
集成 microsoft-applicationinsights-angular5 到 Angular 5 应用程序
步骤1：在项目的根目录中，创建一个新的文件名为 appInsights.ts，并将以下代码插入到该文件中：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- - ---- -------------------------
-------------
------ ----- ------------------ -
------------- -
----- ------------------ - ------------------------------------
------------------------------ ------------------ ---
-
-------------- ------- ------------ - ----- -------- --- -- -
------------------------ ---- -- ------------
-
------------------ ------- ----- ------- -
--------------------------- ----- --- ---
-
----------------------- ------ -
---------------------------- --------- ---
-
-注：请使用您的 Application Insights 仪表板密钥替换上面代码例子中的YourAppInsightsInstrumentationKey。
步骤2：在我们的项目的 app.module.ts 中，将新创建的 AppInsightsService 服务添加到 providers 数组中：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ----------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- ---------------------
---------- --------------
--
------ ----- --------- - -步骤3：使用 AppInsights 服务跟踪应用程序性能和用户行为。在该步骤，我们主要介绍 AppInsights 服务能够实现的功能：
- 跟踪自定义事件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------------- ------------------- - -
--------- -
-- ------
-------------------------------------- ------ ---- - --------- ------ ---
-
-- 跟踪浏览器屏幕：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------------- ------------------- - -
---------- -
-- --------
------------------------------------------- ---------
-
-- 跟踪异常：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------ - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------------- ------------------- - -
--------- -
--- -
-- -- ----- ---
-
----- ------- -
-- ------
--------------------------------------------
-
-
-在什么情况下应该使用 microsoft-applicationinsights-angular5
我们可以在以下情况下使用该 npm 包：
收集应用程序的用户行为数据：该工具可轻松跟踪自定义事件，并查看用户对应用程序的行为。
收集应用程序的性能数据：该工具可轻松跟踪页面视图并检查应用程序性能指标，诸如总加载时间和总请求次数等。
创建应用程序的错误日志：该工具可轻松监视和记录异常，以便更快地修复错误。
总结
microsoft-applicationinsights-angular5 是用于集成 Application Insights 工具的 Angular 5 npm 包。通过使用该 npm 包，可以方便地在 Angular 应用程序中启用 Application Insights，以收集和分析有关应用程序的性能和用户行为数据。本文提供了该工具的详细使用教程以及示例代码，希望能够帮助读者轻松掌握该工具的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d281e8991b448e4927