埋点文档

拱墅吴彦祖
455 阅读5分钟

集成文档

1. 集成SDK

1.1 同步载入

将下面这段代码，放入项目入口html文件的<head>标签内(注意替换SDK地址、数据接收地址)

<script charset='UTF-8' src="SDK地址 "></script>
<script>
var sensors = window['sensorsDataAnalytic201505'];
sensors.init({
    server_url: '数据接收地址',
    is_track_single_page:true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
    use_client_time:true, 
    send_type:'beacon',
    heatmap: {
        //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
        clickmap:'default',
        //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
        scroll_notice_map:'default'
    }   
});
sensors.quick('autoTrack');  //用于采集 $pageview 事件。
</script>

1.2 模块加载

从 npm 获取 sdk ， npm install sa-sdk-javascript -D

import sensors from 'sa-sdk-javascript'
sensors.init({
  server_url: '数据接收地址',
  is_track_single_page:true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
  use_client_time:true, 
  send_type:'beacon',
  heatmap: {
     //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
     clickmap:'default',
     //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
     scroll_notice_map:'default'
  }
});
sensors.quick('autoTrack'); //用于采集 $pageview 事件。
  • vue3项目可如下设置全局引用
const app = createApp(App)
app.config.globalProperties.$sensors = sensors

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()!
const sensors = appContext.config.globalProperties.$sensors
</script>

2. 全埋点细分

全埋点包括三种事件：Web 页面浏览($pageview)、Web 元素点击($WebClick)、Web 视区停留($WebStay)。

2.1 Web 页面浏览($pageview)

// 设置之后，SDK 就会自动收集页面浏览事件，以及设置初始来源。
sensors.quick('autoTrack')

// 另外，如果想加额外的属性，可以如下方式（添加 platform 属性为 h5）
sensors.quick('autoTrack', {
    platform:'h5'
})
  • 页面切换、刷新页面 ，SDK 会自动发送一次页面浏览事件。

实例如下：

// 从首页跳转到关于页面，触发页面浏览($pageView)埋点
<el-button type="primary" @click="$router.push({ name: 'about' })">关于</el-button>

image.png

注意： 页面信息，如页面标题($title)、访问路径($url)、访问路由($url_path)等会自动上报。

单页项目，需要动态修改document.title。

router.beforeEach((to, from) => {
  document.title = to.meta.title as string
})

2.2 Web 元素点击($WebClick)

// SDK 初始化参数配置
heatmap: {
    // 是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    // 默认只有点击 a input button textarea 四种元素时，才会触发 $WebClick 元素点击事件
    clickmap:'default'
}
  • 默认点击 a标签、input输入框、button按钮、textarea文本域四种元素，会自动发送一次元素点击事件。

button按钮 实例如下：

    <el-button type="primary">按钮点击测试</el-button>

注意： 这里并没有主动添加点击事件@click，在页面上点击按钮，会自动触发$WebClick信息上报；按钮名称($element_type)会自动添加上报。

image.png

input输入框 实例如下：

<el-input v-model="input" placeholder="请输入" />

const input = ref('')

当鼠标点击输入框时，输入框激活，会自动触发$WebClick信息上报

image.png

2.3 Web 视区停留($WebStay)

// SDK 初始化参数配置
heatmap: {
    //是否开启触达图，default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭。
    //需要 Web JS SDK 版本号大于 1.9.1
    scroll_notice_map:'default'
}
  • 如果发生页面滚动时候，之前的页面停留是有效停留，也就是超过默认的 4 秒或者自定义的时间，javascript SDK 就会发送一次页面停留事件。
  • 关闭页面时，发送一次页面停留事件。 $WebStay 事件的采集是基于在 window 上绑定的 scroll 事件，如果页面滚动是绑定在 div 上，则无法采集。

image.png

3. 其他元素类型的元素点击事件采集

3.1 支持 div 类型元素的自动采集

在原来的全埋点（采集 a、button、input 、textarea 标签）基础上新增对 div 标签的采集，采集规则为：

  • div 为叶子结点（无子元素）时采集 div 的点击
  • div 中有且只有样式标签（['mark','strong','b','em','i','u','abbr','ins','del','s','sup']）时，点击 div 或者样式标签都采集 div 的点击

通过 collect_tags 配置是否开启 div 的全埋点采集，默认不采集。如需开启 ，配置 collect_tags 参数如下：

heatmap:{  
    collect_tags:{
        div : true
    }
}

实例如下：

<div class="text-30px font-bold m-30px cursor-pointer">div点击事件测试</div>

image.png

3.2 支持任意类型元素的自动采集

不建议配置超过 3 个任意元素标签，尤其是会嵌套的元素标签如 span，因为全埋点采集的元素会在点击图中展示，太多的元素或者嵌套会导致点击图效果混乱！！！ 通过 collect_tags 配置是否开启其他任意元素的全埋点采集（默认不采集），其中 div 通过配置最多可以采集 3 层嵌套情况。

heatmap: {
  //是否开启点击图，默认 default 表示开启
  clickmap:'default',
  collect_tags: {
    div: {
        max_level: 1 // 默认是 1，即只支持叶子 div。可配置范围是 [1, 2, 3],非该范围配置值，会被当作 1 处理。
    },
    li: true,
    img: true
    // ... 其他标签
  }
}

4. 自定义事件

  sensors.track('事件名', {
   // 自定义属性
 })

实例如下：

<el-button type="primary" @click="handleCustomEvent">自定义事件测试</el-button>

const handleCustomEvent = () => {
 sensors.track('MyCustomEvent', {
   // 自定义属性
   BusinessType: '权限控制',
   ButtonType: 'add',
 })
}

image.png

5. 设置事件公共属性

对于所有事件都需要添加的属性，可在初始化 SDK 后，sensors.quick('autoTrack') 前，调用 registerPage() 将属性注册为公共属性：

<script>
// 初始化 SDK

// 注册公共属性
sensors.registerPage({
    // 自定义属性
});

sensors.quick('autoTrack')
</script>

实例如下:

sensors.registerPage({
  appName: '项目名称',
  appType: 'PC',
})

任意事件，都会自动添加appName、appType属性上报

image.png

image.png

6. 用户关联

用户关联是为了对用户进行唯一标识，提高用户行为分析的准确性。

可根据具体业务，例如在用户登录之后，执行下面方法，添加上自定义用户id属性。

 sensors.login("登录 ID");

实例如下：

<el-button type="primary" @click="doLogin">登录</el-button>

const doLogin = () => {
  sensors.login('UserId_123456')
}

image.png

7. 调试查看事件信息

7.1 事件的触发日志

测试阶段在初始化代码中添加 show_log 设置为 true，页面上有事件触发时，浏览器开发者工具会打印采集的事件信息，如下图。上线时初始化代码中将 show_log 设置为 false 即可关闭日志输出功能，show_log 和 server_url 平级。

微信图片编辑_20240328150526.jpg

7.2 事件的发送情况

事件数据发送成功时，在浏览器开发者工具的 Network 模块中，可以看到 sa.gif 的网络请求，如果状态码为 200，则代码事件数据发送成功。

image-1.png

avatar
文章
阅读
粉丝