埋点系统探针 SDK 的使用

发布于 2023-08-08 23:14:10 字数 3771 浏览 0 评论 0 收藏 0

Hello，大家好，欢迎使用webfunny埋点系统，这里将介绍如何使用埋点的SDK，以及如何安装点位代码。

第一步、创建、并下载SDK代码

1. 进入「数据管理 -> SDK发布」页面，如果当前项目没有SDK，请点击创建SDK按钮，添加需要的点位。 2. 进入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>

最后，如果想进行自定义上报，可以参考自定义上报埋点。

分享到QQ

分享到微博