Hello,大家好,欢迎使用webfunny埋点系统,这里将介绍如何使用埋点的SDK,以及如何安装点位代码。
第一步、创建、并下载SDK代码
第二步、在业务方项目中添加SDK代码
注意:埋点的SDK代码是动态生成的,所以不支持npm安装方式
webfunny引入SDK的方式是不区分vue,react,angular的,只需要找到项目的html模板,通过下边方式引入,二选一就可以了。
方式一、直接在head中添加下载文件内容如下实例代码:
<head>
<script type="text/javascript">
/** 这里填写SDK代码 */
</script>
</head>
方式二、把下载的javascript文件做为资源文件引入,如下实例代码
<script src="xxxxx/event.sdk.js"></script>
第三步、执行兼容代码,初始化用户信息
1、兼容代码是为了防止SDK加载失败,或者用户在移除SDK时,没有完全清理埋点代码,会导致报错的情况。所以需要手动执行,尽量在代码最开始的地方执行一次即可。
PS:为什么需要手动引入,而不是webfunny自动引入呢? 由于用户在移除SDK后,或者SDK加载失败时,都无法执行兼容代码,所以需要用户手动引入执行。
/** 在业务项目的 html head script 或 项目主入口中添加如下代码 */
window.webfunnyEvent = function(pointId) {
/**
* 你可以判断环境变量,选择性上报
if (process.env.BUILD_TYPE === 'dev') {
return { trackEvent: () => {
console.log('开发环境,埋点不上报')
} }
}
*/
if (window._webfunnyEvent && typeof(window._webfunnyEvent) === 'object') {
if (Object.prototype.hasOwnProperty.call(window._webfunnyEvent, pointId)) {
return window._webfunnyEvent[pointId];
} else {
console.warn('【' + pointId + '】点位ID不存在!');
return {
trackEvent: () => {}
}
}
} else {
console.warn('SDK异常,请检查!');
return {
trackEvent: () => {}
}
}
}
2、初始化信息主要用于关联userId,告诉SDK环境变量,版本等信息。传入后,可以通过userId查询出用户生命周期中所有的点位记录。
/** 初始化信息可以在获取到userId后执行 */
window.localStorage.wmUserInfo = JSON.stringify({
userId: '189xxxxxx19', // 身份标识,可以是:身份证号、手机号、userId
userTag: 'tag', // 用户标签,可以是:某公司、某地方、某品牌
projectVersion: '1.0.1', // 项目版本号
env: 'pro', // 环境变量,可以是:dev、sit、stag、pro
platform: '' // 平台,可以是:web、app、小程序
})
第四步、上报埋点数据
打开SDK详情页,复制对应的点位上报代码即可
执行上报代码如下,这样点位就安装成功了。
PS: 字段信息有长度和类型的判断,不要填写错类型,或者超长,否则可能无法触发上报接口。
// 浏览量,其中 8 是点位ID
window.webfunnyEvent(8).trackEvent({
shenFenBiaoShi: "185xxxx1234", // 身份标识 | 类型:文本 | 描述:标识用户唯一性:身份证,手机号,userId
shouJiHao: "185xxxx1234", // 手机号 | 类型:文本 | 描述:手机号码
yeMianDiZhi: "www.webfunny.com", // 页面地址 | 类型:文本 | 描述:页面访问的url, 尽量不要携带参数
});
第五步、验证点位是否上报成功
webfunny埋点系统提供了点位测试功能,进入「查询点位 -> 点位测试」页面,选择点位和时间范围,点击查询即可验证上报是否成功
第六步、如何添加曝光和点击埋点
第一步、两者都是通过添加自定义属性来实现。其中曝光埋点的自定义属性为:_webfunny-eo (webfunny exposure observer),点击埋点的自定义属性为:_webfunny-ce(webfunny click event)。
第二步、添加需要上报的数据,数据为JSON字符串。可以通过创建JSON对象,利用JSON.stringify(object)转换成JSON字符串,放置到第一步自定义属性的值。
备注:点击和曝光的埋点若要同时使用,需要定义不同的点位,不然数据会统计不出来。
<!--曝光埋点-->
<li _webfunny-eo='{"pointId":10, "Doratest":"adwq", "name": "hahaha"}'>我是曝光埋点示例</li>
<!--点击埋点-->
<li _webfunny-ce='{"pointId":11, "Doratest":"adwq", "name": "hahaha"}'>我是点击埋点示例</li>
最后,如果想进行自定义上报,可以参考 自定义上报埋点。