npm 包 @oudyworks/webscripts-ga 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

Google Analytics 是一个极为强大的分析工具，但是在代码中使用 GA 时也有一定的难度。为此，OudyWorks 开发了一个非常简单易用的 npm 包：@oudyworks/webscripts-ga，它降低了使用 Google Analytics 的门槛，并且可以在前端任何 JS 框架中使用。

安装

在项目中使用下面的命令来安装：

npm i @oudyworks/webscripts-ga

使用方法

导入和初始化

使用时，首先需要导入这个包：

import { WebScriptsGA } from "@oudyworks/webscripts-ga";

然后，初始化 WebScriptsGA：

const webScriptsGA = new WebScriptsGA({
  trackingID: "UA-XXXXX-Y", // 你的 Google Analytics 追踪 ID
  debug: false // 是否开启调试模式
});

结构化数据追踪

在 WebScriptsGA 中，使用了结构化数据（Indexes）来进行分析，实现了更为深入的分析效果，同时也使得使用更为方便。在开始使用数据追踪之前，需要确定你的项目中的可追踪行为。比如，你可以追踪按钮的点击次数，页面的访问次数等等。对于每个追踪行为，都需要为它定义一个索引。这里主要介绍如何定义索引。

webScriptsGA.defineIndex("button_click", { // 定义索引
  action: "click", // 具体的行为类型
  label: "button" // 行为标签
});

以上代码中，我们为一个名为 button_click 的 Index 定义了两个属性：action 和 label。这两个属性的含义如下：

action 表示这个 Index 对象所代表的行为类型，比如 "click"、"submit" 等等。
label 表示 Index 所代表行为的标签，可以是一个按钮，一个链接，或者一个页面名字。最好使用特定的名字。

如果在网站的每个页面都需要使用 Index，我们可以在中间件中进行定义，以便使用它们的时间和精确跟踪。

webScriptsGA.useMiddleware((ctx) => {
  webScriptsGA.defineIndex("page_view", {
    action: "view",
    label: ctx.pathname
  });
});

这个中间件将在每个页面加载时调用，为每个页面的视图添加分析代码。

进行追踪

定义好 Index 后，我们就可以在代码中使用它了。我们使用 track 函数来进行追踪。这个函数返回一个 Promise，如果正常执行，它会在 Google Analytics 中添加一项事件。

document.querySelector("#button").addEventListener("click", () => {
  webScriptsGA.track("button_click", { // 追踪 "button_click" 索引
    value: 4 // 其他数据可以添加到 result 参数中
  });
});

以上代码中，我们追踪一个名为 button_click 的 Index。在数据中，我们添加了一个名为 value 的属性，它的值为 4。

如果你需要在页面加载时进行追踪，可以使用以下代码：

webScriptsGA.track("page_view", {
  value: 2
});

当然，不同的追踪行为可以添加不同的属性，比如一个成功的提交，我们就可以添加 success: true 属性。

查看和分析数据

定义和追踪事件之后，就可以登录到 Google Analytics 的控制台来查看和分析数据了。在 "实时" 页面中，你可以看到最近一段时间内的活动。

如果你需要更深入的分析，你可以使用 "目标" 和 "转化" 等功能来设置更为精准的跟踪。默认情况下，WebScriptsGA 不对此进行包装，这些功能需要在 Google Analytics 控制台中进行设置。

示例代码

-- -------------------- ---- -------
------ - ------------ - ---- ---------------------------

----- ------------ - --- --------------
  ----------- -------------
  ------ -----
---

-------------------------------- -- -
  ------------------------------------- -
    ------- -------
    ------ ------------
  ---

  ---------------------------------------- -
    ------- --------
    ------ --------
  ---

  ------------------------------- -
    ------ -
  ---
---

----------------------------------------------------------- -- -- -
  ---------------------------------- -
    ------ -
  ---
---

结论

通过使用 @oudyworks/webscripts-ga 包，我们可以降低使用 Google Analytics 的成本，并且可以更加简单地进行结构化数据追踪。使得前端开发人员可以更好地理解和分析网站访问情况。值得一提的是，数据追踪本身也是需要谨慎使用的，我们应该在合适的场合、并合理处理具体用途，保证用户信息的安全性和隐私性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055fc481e8991b448dd230