前言
Google Analytics 是一个极为强大的分析工具，但是在代码中使用 GA 时也有一定的难度。为此，OudyWorks 开发了一个非常简单易用的 npm 包：**@oudyworks/webscripts-ga**，它降低了使用 Google Analytics 的门槛，并且可以在前端任何 JS 框架中使用。
安装
在项目中使用下面的命令来安装：
--- - ------------------------
使用方法
导入和初始化
使用时，首先需要导入这个包：
------ - ------------ - ---- ---------------------------
然后，初始化 WebScriptsGA：
----- ------------ - --- -------------- ----------- ------------- -- -- ------ --------- -- -- ------ ----- -- -------- ---
结构化数据追踪
在 WebScriptsGA 中，使用了结构化数据（Indexes）来进行分析，实现了更为深入的分析效果，同时也使得使用更为方便。在开始使用数据追踪之前，需要确定你的项目中的可追踪行为。比如，你可以追踪按钮的点击次数，页面的访问次数等等。对于每个追踪行为，都需要为它定义一个索引。这里主要介绍如何定义索引。
---------------------------------------- - -- ---- ------- -------- -- ------- ------ -------- -- ---- ---
以上代码中，我们为一个名为 button_click 的 Index 定义了两个属性：action 和 label。这两个属性的含义如下：
action表示这个 Index 对象所代表的行为类型，比如 "click"、"submit" 等等。label表示 Index 所代表行为的标签，可以是一个按钮，一个链接，或者一个页面名字。最好使用特定的名字。
如果在网站的每个页面都需要使用 Index，我们可以在中间件中进行定义，以便使用它们的时间和精确跟踪。
-------------------------------- -- -
------------------------------------- -
------- -------
------ ------------
---
---这个中间件将在每个页面加载时调用，为每个页面的视图添加分析代码。
进行追踪
定义好 Index 后，我们就可以在代码中使用它了。我们使用 track 函数来进行追踪。这个函数返回一个 Promise，如果正常执行，它会在 Google Analytics 中添加一项事件。
----------------------------------------------------------- -- -- -
---------------------------------- - -- -- -------------- --
------ - -- --------- ------ ---
---
---以上代码中，我们追踪一个名为 button_click 的 Index。在数据中，我们添加了一个名为 value 的属性，它的值为 4。
如果你需要在页面加载时进行追踪，可以使用以下代码：
------------------------------- - ------ - ---
当然，不同的追踪行为可以添加不同的属性，比如一个成功的提交，我们就可以添加 success: true 属性。
查看和分析数据
定义和追踪事件之后，就可以登录到 Google Analytics 的控制台来查看和分析数据了。在 "实时" 页面中，你可以看到最近一段时间内的活动。
如果你需要更深入的分析，你可以使用 "目标" 和 "转化" 等功能来设置更为精准的跟踪。默认情况下，WebScriptsGA 不对此进行包装，这些功能需要在 Google Analytics 控制台中进行设置。
示例代码
------ - ------------ - ---- ---------------------------
----- ------------ - --- --------------
----------- -------------
------ -----
---
-------------------------------- -- -
------------------------------------- -
------- -------
------ ------------
---
---------------------------------------- -
------- --------
------ --------
---
------------------------------- -
------ -
---
---
----------------------------------------------------------- -- -- -
---------------------------------- -
------ -
---
---结论
通过使用 @oudyworks/webscripts-ga 包，我们可以降低使用 Google Analytics 的成本，并且可以更加简单地进行结构化数据追踪。使得前端开发人员可以更好地理解和分析网站访问情况。值得一提的是，数据追踪本身也是需要谨慎使用的，我们应该在合适的场合、并合理处理具体用途，保证用户信息的安全性和隐私性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fc481e8991b448dd230