亲宝软件园·资讯

展开

小程序数据埋点实践之曝光量

WahFung 人气:1

什么是数据埋点

所谓数据埋点就是应用在规定流程中 对特定行为或事件进行数据采集 。使用采集的数据做用户分析和页面分析,可以获得应用的总体使用情况,为后续优化产品和运营提供数据支撑。常见数据埋点内容包括:访问量、停留时长、曝光量、点击量、跳出率等等。

微信小程序也为我们提供了自定义分析统计,其中包括 API 上报(代码埋点),填写配置(无埋点,只需在公众后台配置)。而第三方统计平台比较有名的就是阿拉丁统计,只需引入集成的 SDK,开发成本低,能够满足大部分的需求。

数据埋点需要分析页面流程,确定埋点需求,选择埋点方式。如果是代码埋点,主要关注触发时机、条件判断、捕获数据,其次要注意是否有遗漏的场景没有做到埋点。代码埋点虽然成本较大(侵入代码),但是精准度较高,能够很好的满足埋点需求。

什么是曝光量

曝光量顾名思义是 指定元素出现在可观察视图内的次数 ,也可以理解为展示量。

通常我们会使用 点击量 / 曝光量 得出 点击率 ,作为衡量一个内容是否受用户喜爱的指标之一。比如,曝光 100 次只有 10 人点击,和曝光 100 次 有 100 个人点击,很明显后者更受用户喜爱。利用这些数据参考,可以推荐更多用户喜爱的内容,以此来留住用户。

交叉观察者

IntersectionObserver 接口,提供了一种异步观察 目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态 的方法,祖先元素与视窗(viewport)被称为根(root)。简单来说就是,观察的目标是否和祖先元素和视窗发生交叉,即进入或离开。

小程序从基础库 1.9.3 开始支持 wx.createIntersectionObserver 接口(组件内使用 this.createIntersectionObserver ),使用此接口可创建 IntersectionObserver对象 。对此接口不了解的可以查看官方文档。

基础使用

// 创建实例
let ob = this.createIntersectionObserver()
// 相对于文档视窗监听
ob.relativeToViewport()
    .observe('.box', res => {
        // res.intersectionRatio 为相交比例
        if (res.intersectionRatio > 0) {
            console.log('进入页面')
        } else {
            console.log('离开页面')
        }
    })

阈值

在创建实例时可以传入一些配置,其中 thresholds (阈值)是比较重要的一项配置,它可以控制触发回调的时机。 thresholds 是一个数字类型的数组,默认为 [0] 。即相交比例为 0 时触发一次回调,下面我们来设置阈值,看看会有什么改变:

// 创建实例
let ob = this.createIntersectionObserver({
    thresholds: [0, 0.5, 1]
})

从图上可以看到,元素在相交比例为 00.51 都各自触发了一次回调。在统计曝光量设置阈值非常有用,通常我会设置为 1 ,表示元素要完全展示在页面上才会进行记录,这样数据会更加真实准确。

收缩和扩展参照区域

除了阈值之外还有另一项重要的设置,在使用 relativeTorelativeToViewport 规定参照区域时,我们可以传入配置 margins 来收缩和扩展参照区域。 margins 包括 leftrighttopbottom 四个参数配置。

// 创建实例
let ob = this.createIntersectionObserver()
// 相对于文档视窗监听
ob.relativeToViewport({
        bottom: -330
    })
    .observe('.box', res => {
        // res.intersectionRatio 为相交比例
        if (res.intersectionRatio > 0) {
            console.log('进入页面')
        } else {
            console.log('离开页面')
        }
    })

上面将参照区域底部收缩 330px,可以理解为整体的区域从底部开始被裁剪 330px,因此元素只有进入页面上半区才会触发回调。

进入正题

经过以上一些介绍,相信大家对交叉观察者的好处和使用都了解的差不多。接下来进入正题 ~

背景

此次我做的项目是资讯类目的小程序,主要用于发布和转载一些学术文章。对于这种资讯的项目,需要通过数据埋点来收集用户的阅读习惯,以此来为用户推荐文章。

埋点方面用微信后台提供的自定义分析以文章为单位进行收集,而我们自己后台会以用户为单位进行收集。前者得出整体用户阅读偏好和文章热度,后者主要精确到用户,分析用户单位的阅读偏好。

改造组件

在分析页面布局和pm的商讨后,多处需要统计曝光量的文章区域展示都大致相同,刚好也在封装的列表组件里。于是将收集曝光量的逻辑都交由组件内部处理。

组件改造:

  1. 定义 isObserver 属性,该属性由外部传入的布尔值控制是否收集曝光量
  2. 监听传入的 list ,为每个元素绑定交叉观察者

以下部分代码省略,只展示主要逻辑:

<block wx:for="{{list}}" wx:key="id">
    <view class="artic-item artic-item-{{index}}" data-id="{{item.id}}" data-index="{{index}}">
    </view>
</block>
const app = getApp()
Component({
    data: {
        currentLen: 0
    }
    properties: {
        list: {
            type: Array,
            value: []
        },
        isObserver: {
            type: Boolean,
            value: false
        }
    },
    observers: {
        list(list) {
            if (this.data.isObserver === false) {
                return
            }
            if (list.length) {
                // currentLen 记录当前列表的长度
                // 用于计算监听元素的索引,对已经监听过的元素不再重复监听
                let currentLen = this.data.currentLen
                for (let i = 0; i < list.length - currentLen; i++) {
                    let ob = this.createIntersectionObserver({
                        thresholds: [1]
                    })
                    ob.relativeToViewport()
                        .observe('.artic-item-' + (currentLen + i), res => {
                            // 获取元素的dataset
                            let {
                                id,
                                index
                            } = res.dataset
                            if (res.intersectionRatio === 1) {
                                // 此处收集曝光量,内部处理逻辑会在下面提及
                                this.sendExsureId(id)
                                // 元素出现后取消观察者监听,避免重复触发
                                ob.disconnect()
                            }
                        })
                }
            }
            this.data.currentLen = list.length
        }
    }
})

发现

加载全部内容

相关教程
猜你喜欢
用户评论