Vue
采集方法和普通网站相同,完整说明见 JavaScript(w.js)。
安装
把脚本放进 index.html 的头部,全站只出现一次:
<script async src="https://YOUR_ORIGIN/w.js" data-site="YOUR_SITE_KEY"></script>初始化
脚本在浏览器里自己启动,不要在 setup 里重复插入。Vue Router 使用浏览器历史时,地址变化会自动变成一次浏览。哈希模式在同一标签上加 data-hash="true"。
页面浏览
默认会在首次进入和路由变化时发送。若设置了 data-auto-track="false",在路由完成后调用 webcount.pageview()。说明见 页面浏览与 SPA。
事件
webcount.track('purchase', { revenue: 19.9 });名称最长 100 个字符,属性最多 20 个。键最长 50,字符串值最长 200。组合式函数里调用前先确认 webcount 已存在。
身份
登录成功后调用 webcount.login。这个方法要等身份脚本加载,见 JavaScript(w.js)。
webcount.login(userId, { plan: 'pro' }, { type: 'login' });限制
| 项目 | 默认 | 说明 |
|---|---|---|
| 安装次数 | 一次 | 组件里再插脚本会被已有实例忽略 |
| 本机 | 跳过 | 本机预览默认不上报 |
| 属性 | 20 个 | 多出来的键被丢掉;对象值被丢掉,只留字符串、数字和布尔 |
错误
开发服务器里看不到请求时,确认 data-site 已换成控制台里的站点标识,并且浏览器没有开请勿跟踪。webcount.siteKey 已存在时脚本直接返回,热更新再插入一次也不会重发启动。路由使用哈希而标签上没有 data-hash="true" 时,切换页面不会产生新的浏览。login 在身份脚本回来之前不存在,调用前要判断。入库核对见 验证安装。
Nuxt
采集方法和普通网站相同,完整说明见 JavaScript(w.js)。
安装
把下面这一行放进 app.html 的头部,全站只放一次:
<script async src="https://YOUR_ORIGIN/w.js" data-site="YOUR_SITE_KEY"></script>初始化
脚本随文档加载后自己发送第一次浏览。客户端路由沿用浏览器历史时,后续跳转也会自动发送。哈希路由在同一标签上加 data-hash="true"。
页面浏览
默认覆盖首次文档和客户端跳转。关闭自动采集后,在路由完成时调用 webcount.pageview()。见 页面浏览与 SPA。
事件
webcount.track('purchase', { revenue: 19.9 });事件名最长 100 个字符,属性最多 20 个。键最长 50,字符串值最长 200。请在点击回调里调用,不要写在服务端中间件。
身份
只在浏览器里、登录成功之后调用。login 要等身份脚本出现,见 JavaScript(w.js)。
webcount.login(userId, undefined, { type: 'login' });限制
| 项目 | 默认 | 说明 |
|---|---|---|
| 运行位置 | 浏览器 | 服务端渲染里没有 webcount |
| 安装次数 | 一次 | 页面组件里不要再插脚本 |
| 本机 | 跳过 | 本机预览默认不上报 |
错误
服务端日志里不会出现采集请求。请在浏览器网络面板查看,并按 验证安装 核对是否入库。app.html 若被布局又输出一次,第二次会被已有的 webcount.siteKey 忽略。在服务端插件里调用 webcount 会因为对象不存在而失败,应把调用留在客户端。哈希路由要在同一标签上写 data-hash="true",否则只看得到首次文档。项目未开识别时 login 不会出现。
React
组件里只调用已经存在的 webcount,方法与普通网站相同,完整说明见 JavaScript(w.js)。
安装
<script async src="https://YOUR_ORIGIN/w.js" data-site="YOUR_SITE_KEY"></script>把这一行放在 index.html,不要在组件渲染时再创建 script 节点。
初始化
脚本自己完成启动。使用浏览器历史的路由会在地址变化时自动发送浏览。哈希路由给同一标签加上 data-hash="true"。
页面浏览
首次加载和后续历史变化默认会发送。关闭自动采集后,在路由结束时调用 webcount.pageview()。见 页面浏览与 SPA。
事件
webcount.track('purchase', { revenue: 19.9 });属性只接受字符串、数字和布尔,最多 20 个。键最长 50,字符串值最长 200。事件名为空时调用直接丢掉。
身份
webcount.login(userId, { plan: 'pro' }, { type: 'login' });请在登录成功的事件里调用。login 来自身份脚本,见 身份关联。
限制
| 项目 | 默认 | 说明 |
|---|---|---|
| 严格模式 | 可忽略重复 | 第二次插入脚本不会再创建实例 |
| 事件名 | 100 字符 | 超出部分被截断 |
| 本机 | 跳过 | 本机主机名默认不上报 |
错误
调用时若 webcount 尚不存在,说明脚本还没执行或缺少 data-site。哈希路由忘记 data-hash="true" 时,只有第一次浏览。属性超过 20 个或值为对象时,多余部分被丢掉,调用本身不抛错。项目未开识别时 login 不会出现。本机开发默认不上报,容易误以为安装失败。核对见 验证安装。
Next.js
服务端组件和服务端动作里没有 webcount。方法与普通网站相同,完整说明见 JavaScript(w.js)。
安装
在根布局的头部放一次:
<script async src="https://YOUR_ORIGIN/w.js" data-site="YOUR_SITE_KEY"></script>页面组件里不要再输出这段标签。
初始化
脚本在浏览器加载后发送第一次浏览。应用路由的客户端跳转走浏览器历史,后续浏览会自动发送。
页面浏览
默认包含首次文档和客户端跳转。需要手发时先在脚本上设置 data-auto-track="false",再调用 webcount.pageview()。见 页面浏览与 SPA。
事件
webcount.track('purchase', { revenue: 19.9 });请放在浏览器事件里。事件名最长 100 个字符,属性最多 20 个。键最长 50,字符串值最长 200。对象和数组不会进入属性。
身份
在客户端登录成功后调用。方法来自身份脚本,加载前不要假设 login 已存在。
webcount.login(userId, { plan: 'pro' }, { type: 'login' });限制
| 项目 | 默认 | 说明 |
|---|---|---|
| 运行位置 | 浏览器 | 服务端渲染阶段不要调用 |
| 标签 | 一段 | 根布局放一次即可 |
| 本机 | 跳过 | 本机开发默认不上报 |
错误
服务端终端里看不到采集请求是正常的。到浏览器里确认脚本和 data-site,再按 验证安装 核对入库。根布局和服务端组件如果各输出一次标签,第二次会被忽略,但仍然应当只保留一段。在服务端动作里调用 webcount.track 会失败。客户端跳转若改的是哈希,要在同一标签上加 data-hash="true"。