JS SDK 提供了 npm 安装的版本,如果您网站的 Javascript 代码也是通过 npm 进行管理,可以直接使用 npm 安装 SDK。比如针对用 React、Vue、Angular 等框架开发的的网站,可以更好的维护跟踪代码。
npm i @hypers/hwa-sdk
创建跟踪实例
import HyperWebAnalytics from "@hypers/hwa-sdk";
const hwa = new HyperWebAnalytics({
// 脚本地址
// jsUrl: "//t.hypers.com.cn/hwt.js",
});
// projectId 应该以实际获取的 ID 为准
hwa.create("projectId");
在创建跟踪实例前,需要登录到 Hyper Web Analytics ,获取到项目 ID。
在路由发生改变后调用
hwa.sendPageview();
带参数的页面访问
// 示例: 在登录页面传递 title 与 url
hwa.sendPageview({
title: "登录页面",
url: "/index.html#login",
});
注:url和tite默认取当前页面的标题和名称;如果调用该方法时对url和title赋值,则优先取所填写的内容(因此,仅建议在必须更改名称&参数或自定义页面时再强制赋值,否则可能会出现原始参数丢失的问题)。
用户行为跟踪
// 示例:一个男性用户关注了 5 个领域的标签,这里的标签也是存在多个,所以采用了数组的类型。
hwa.sendAction("follow", {
labels: ["数码", "音乐", "体育", "篮球", "动漫"],
gender: "男",
});
开启全埋点需要在 create
方法传入参数 auto_track:true
。
hwa.create("projectId", {
auto_track: true,
});
// 创建跟踪对象
hwa.create(projectId, [options], [callback]);
// 认证用户信息
hwa.identify([options]);
// 页面访问跟踪
hwa.sendPageview([options], [callback]);
// 行为跟踪
hwa.sendAction(name, [params], [callback]);
// 表单跟踪
hwa.sendForm([params], [callback]);
npm 安装版本的的跟踪器与默认部署的方式功能上是一致的,只是在参数位置发生了改变,所以可以完全参考默认安装方式的文档。比如:
// 默认方式
_ha("send", "action", "follow", { gender: "男" });
// 新的方式
hwa.sendAction("follow", { gender: "男" });