在现今的互联网时代中，网站行为分析和追踪已成为了各大企业不可或缺的组成部分。Hotjar则是一款非常受欢迎的网站行为分析工具，通过收集和分析用户行为数据，让网站运营者可以更好地监控网站表现，针对性地进行改进。而Ember.js也是一款非常受欢迎的前端框架，但是它并没有自带Hotjar的集成插件，这就需要我们自己去寻找或者制作插件了。而npm包 ember-hotjar 则为我们提供了一个轻量级的解决方案，让我们轻而易举地在自己的应用中集成Hotjar跟踪分析。
安装
在使用 ember-hotjar 之前，需要先在项目中安装它。
- ----- ------- ------------
这将自动完成依赖安装和配置步骤。
配置
安装完毕后，需要在 config/environment.js 文件中添加以下配置信息：
-- ---- ----- ------------- ------- --
--- --- - -
---- -
-- --- ------ --
--
------------- -
--- -----------------
--- -----------------------------
--
-- --- --
-
-- ------ ---- ------------- --
------ ------- ---在以上配置信息中，id 和 sv 分别代表我们在Hotjar账号中配置的Site ID和snippet版本号。我们可以通过访问Hotjar官网，在个人管理后台中找到对应的ID及snippet版本，并将其填到配置文件中。如果配置信息不正确，将会导致Hotjar不能正常运行或者出现错误。
使用
配置完毕后，即可开始在应用中使用 ember-hotjar 了。我们可以在所有的Controller、Route和Component中都可以加入以下代码来启动Hotjar追踪：
------ - ------ -- ------- - ---- ----------------
------ ---------- ---- -------------------
------ ------ ---- ------------------------------
------ ------- -------------------
------- ----------
-------- -
-- ---- ------- ----
--
--------- -
----------------------------- -- -
-- ---- ------ -------- -------- --
--
--
------------- -
----- ------ - ------------------
--------------
---------------------------------------------
----------------------------------
--
------ -
-------------------------
----------------------------- -- -
------------------
--
-
--在以上代码中，我们使用了 ember-hotjar 提供的 hotjar 的Service。并调用了 hotjar, onReady, setup, virtualPageView,和 identify 函数，它们分别代表了Hotjar的一些常规操作。具体使用每个函数之前需要先阅读它们的API文档，了解它们的参数以及返回值。
示范
最后，我们来创建一个基本的示例实现：当用户进入该应用时，我们需要向Hotjar发送一个自定义纯文本事件。
------ ----- ---- ----------------------
------ ------ ---- ------------------------------
------ ------- --------------
------- ----------------
------------- -
----------------------------- -- -
------------------------------
--
--
------------------------- -
----- ------ - ------------------
---------------------------- -
------- -------------
------ ----- ------- --- ----
--
----------------------------------
-
--在以上示例中，我们首先通过 onReady 函数等待Hotjar准备好后，向Hotjar发送了一个自定义事件，并传递了 action 和 label 这两个参数，以及该用户的唯一标识符。该示例将会在用户进入该应用后立即向Hotjar发送一个自定义事件。
以上，我们已经完成了 ember-hotjar 的配置和的使用了，我们的应用现在可以方便地开始使用Hotjar做行为分析追踪。此外，我们还可以在此基础上进行更多的功能扩展，更好地实现我们所需的功能需求，让我们的应用可以更好地为用户提供服务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557fd81e8991b448d51a0