CommonWeb 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00097/article/details/139617834

CommonWeb 开源项目教程

common-web Turn web user activity into a analyzable stream of JSON event data 项目地址: https://gitcode.com/gh_mirrors/co/common-web

1. 项目介绍

CommonWeb 是一个开源的 JavaScript 库，旨在将常见的网页用户活动转换为可分析的 JSON 事件数据流。它能够自动收集网页浏览、点击、表单提交等用户行为，并将其转换为结构化的 JSON 数据，便于后续的分析和报告。

CommonWeb 的设计理念是自动收集大部分常见的用户行为数据（即 80% 的数据），同时允许用户自定义和添加特定的事件和属性（即 20% 的个性化数据）。通过这种方式，CommonWeb 不仅简化了数据收集的过程，还提供了灵活性，以满足不同项目的需求。

2. 项目快速启动

2.1 安装依赖

首先，确保你的项目中已经包含了 jQuery 和 Keen IO JS SDK v3。你可以通过以下方式引入这些依赖：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/keen-js@3"></script>

2.2 引入 CommonWeb

将 common-web.min.js 文件下载到你的项目中，并在页面中引入：

<script type="text/javascript" src="/javascripts/common-web.min.js"></script>

2.3 配置 Keen IO 客户端

如果你使用 Keen IO 作为后端，你需要配置 Keen IO 客户端并将其与 CommonWeb 关联：

CommonWeb.Keen.Client = new Keen({
  projectId: "your_project_id",
  writeKey: "your_write_key"
});

CommonWeb.addGlobalProperties(CommonWeb.Keen.globalProperties);
CommonWeb.Callback = CommonWeb.Keen.Callback;

2.4 启动跟踪

在所有 JavaScript 依赖加载完成后，你可以开始使用 CommonWeb 进行跟踪。以下是一些常见的跟踪方法示例：

// 为所有事件添加用户特定的 GUID 以跟踪用户流程
CommonWeb.trackSession();

// 跟踪页面浏览
CommonWeb.trackPageview();

// 跟踪页面上的所有链接点击
CommonWeb.trackClicks();

// 跟踪页面上的所有表单提交
CommonWeb.trackFormSubmissions();

// 跟踪页面上的所有输入变化
CommonWeb.trackInputChanges();

// 跟踪非链接标签的点击（需要传入参数）
CommonWeb.trackClicksPassive($("span"));