webfunny埋点
- 1. 新建点位字段
- 2. 新建点位（进入点位仓库）
- 3. 新建项目
- 4. 创建SDK发布
- 1. 新建发布任务
- 2. 下载执行脚本
- 5. 在项目内引入执行SDK
- 1. 方式一：直接在head中添加下载的SDK文件代码
- 2. 方式二： 把下载的js文件作为资源文件引入。
- 6. 数据上报
- 7. 在埋点系统里面配置信息
- 1. 添加分組
- 2. 新增卡片
上一篇文章写到了webfunny探针的安装与使用，从而达到对前端项目的监控。本篇文章讲webfunny埋点的使用。想了解webfunny探针安装的请参考我的上一篇文章。
1. 新建点位字段
用户点击新建字段，输入埋点的名称、类型、长度和描述，进行保存。字段名称支持汉字、英文，字段类型有文本和整数进行选择。
2. 新建点位（进入点位仓库）
点位仓库就是我们用到的一个个埋点，用户根据自己的需要，选择不同的点位字段组合成一个点位
3. 新建项目
创建项目，项目归属团队，只有该团队下的项目，用户才能看到，
如果没有团队，去团队管理中新建团队。
4. 创建SDK发布
1. 新建发布任务
点击创建SDK按钮，完善相关信息
2. 下载执行脚本
将脚本代码下载下来，等待下一步执行。
5. 在项目内引入执行SDK
如何在项目内集成 sdk js文件，有两种方式。
1. 方式一：直接在head中添加下载的SDK文件代码
<head>
<script type="text/javascript"
!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";...
</script>
</head>2. 方式二： 把下载的js文件作为资源文件引入。
<head>
<script src="xxxxx/sdk.js"></script>
</head>我采用的是第二种方式：具体代码如下所示：
<head>
<!-- webfunny监控和埋点 -->
<script>
if (location.host == '正式环境地址') {
const jsName=['./webfunny.js','./webfunnySdk.js']
for(var i=0;i<jsName.length;i++){
const script=document.createElement('script')
script.src=jsName[i]
document.head.prepend(script)
if (i === 1) {
window.webfunnyEvent = function (pointId) {
if (window._webfunnyEvent && typeof (window._webfunnyEvent) === 'object') {
if(Object.prototype.hasOwnProperty.call(window._webfunnyEvent, pointId)) {
return window._webfunnyEvent[pointId];
} else {
console.warn('pointId error');
return { trackEvent: () => { } }
}
} else {
console.warn('please check SDK');
return { trackEvent: () => { } }
}
}
}
}
}
</script>
</head>其中，jsName的第一个元素是webfunny探针的代码，我也将其作为资源文件移入
6. 数据上报
集成SDK后只需要几行代码就能轻松搞定，由于我的数据上报是根据点位上报，所以需要知道当前SDK对应的点位值。如下所示：
代码如下所示：
PS：我在前面已经有过展示：
//1、在宿主项目的 html head script 或 项目主入口中添加如下代码
window.webfunnyEvent = function (pointId) {
if (window._webfunnyEvent && typeof (window._webfunnyEvent) === 'object') {
if(Object.prototype.hasOwnProperty.call(window._webfunnyEvent, pointId)) {
return window._webfunnyEvent[pointId];
} else {
console.warn('pointId error');
return { trackEvent: () => { } }
}
} else {
console.warn('please check SDK');
return { trackEvent: () => { } }
}
}
//2、调用方式为
//测试数据
const data = {
age: 20,
name: '张三'
}
webfunnyEvent(10).trackEvent(data);我再项目中所用到的埋点是统计页面点击量，所以需要在点击路由菜单时调用。代码如下所示：
// 点击菜单
const clickMenuItem = (item: any) => {
// 埋点各个菜单页面，记录页面的浏览量
try {
(window as any).webfunnyEvent[1].trackEvent({
yongHuId: store.state.userinfo.userinfo.jobNo + store.state.userinfo.userinfo.name,
dianJiNeiRong: item.key
})
} catch (error) {}
router.push(item.key)
}7. 在埋点系统里面配置信息
1. 添加分組
2. 新增卡片
其中，查询条件是路由，因为我这里是对页面访问量进行统计。
到此为止，埋点结束！！！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
