浅谈微信小程序列表埋点曝光指南

背景

最近项目中,开发一个小程序列表页,PM大大给我提了一个埋点需求,列表中的每一项,出现在屏幕中的时候,需要上报一条记录。

目标

如图中操作,要依次上报 item 1 - item7,但是上滑的时候,不再重复上报

怎么做

接到需求的第一感觉是,我难道要监听页面滚动,然后通过offsetTop 去算吗!!!??? 这样显然不是最高效的。于是我去翻了一下微信的开发文档,发现有一个IntersectionObserver 的API,正好满足我的需求。

首先我们需要创建一个 IntersectionObserver wx.createIntersectionObserver(Object component, Object options)

IntersectionObserver 一共有四个方法

  • IntersectionObserver.relativeTo 使用选择器指定一个节点,作为参照区域之一。
  • IntersectionObserver.relativeToViewport(Object margins) 指定页面显示区域作为参照区域之一
  • IntersectionObserver.observeCallback callback) 指定目标节点并开始监听相交状态变化情况
  • IntersectionObserver.disconnect()
  • 停止监听。回调函数将不再触发

我们这里的参照物是屏幕,所以我们使用 IntersectionObserver.relativeToViewport 来制定我们的参照物,并制定相较规则

Page({
 data: {
 list: [
  { value: 1, hadReport: false },
  { value: 2, hadReport: false },
  { value: 3, hadReport: false },
  { value: 4, hadReport: false },
  { value: 5, hadReport: false },
  { value: 6, hadReport: false },
  { value: 7, hadReport: false },
  { value: 8, hadReport: false },
  { value: 9, hadReport: false },
 ]
 },
 onLoad() {
 this._observer = this.createIntersectionObserver({ observeAll: true })
 this._observer.relativeToViewport({ bottom: 0 })
  .observe('.item', (res) => {
  const { index } = res.dataset;
  if (!this.data.list[index].hadReport) {
   console.log(`report ${index}`)
   this.data.list[index].hadReport = true;
   this.setData({ list: [].concat(this.data.list)})
  }

  })
 },
 onUnload() {
 if (this._observer) this._observer.disconnect()
 }
})

最后实现的效果如下

结论

  1. 类似这样的埋点,我们以后可以采用监听dom的方式去做,而不是一昧的只想着监听滚动计算位置。
  2. 除了可以做埋点上报,这种监听的方式,还是很适合去做一些图片懒加载等一系列操作。

 联想

上述的所有操作,都是基于微信小程序去做的,那么浏览器有没有相应的API呢?

浏览器是有相应的API的, Intersection Observer API,具体的用法与上述的用法类似。

 var options = {
 rootMargin: '0px',
 threshold: 1.0
 }

 var observer = new IntersectionObserver((...args) => {
 console.log(args);
 }, options);
 observer.observe(document.querySelector('.item'));

注意这个会监测dom元素的可见性变化,也就是说当dom出现在视窗的时候会触发回调,消失在视窗的时候也会触发回调

但是浏览器的 IntersectionObserver 属性兼容性一般,如果想要在浏览器做曝光或者懒加载可以考虑采用原始的方法,监听浏览器滚动,并计算dom的offsetTop,可以参考笔者很久前写的 图片延时 加载原理 及应用

参考文档

谈谈IntersectionObserver懒加载

微信小程序IntersectionObserver 文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 小程序从手动埋点到自动埋点的实现方法

    前言 小程序由于封闭性较强,要像web应用一样实现灵活的数据收集,会有一定难度.目前开源的埋点SDK,一般采用手动埋点的方式,这种方式有较强的侵入型,为了解决这个问题就有了该文章. 手动埋点 以腾讯移动分析的SDK为例,如果要记录埋点信息,只要插入一句代码即可 // 例如,记录搜索行为 search(keyword) { if (keyword) { ...业务代码 } mta.Event.stat("ico_search", {"query":keyword});

  • 浅谈微信小程序列表埋点曝光指南

    背景 最近项目中,开发一个小程序列表页,PM大大给我提了一个埋点需求,列表中的每一项,出现在屏幕中的时候,需要上报一条记录. 目标 如图中操作,要依次上报 item 1 - item7,但是上滑的时候,不再重复上报 怎么做 接到需求的第一感觉是,我难道要监听页面滚动,然后通过offsetTop 去算吗!!!??? 这样显然不是最高效的.于是我去翻了一下微信的开发文档,发现有一个IntersectionObserver 的API,正好满足我的需求. 首先我们需要创建一个 IntersectionO

  • 浅谈微信小程序flex布局基础

    1:Flex布局 Flex布局如图1所示 图1 1.1 Flex容器属性 1.2 Flex容器内元素属性 align如果定义会覆写掉容器属性中的justify-content,align-items设置的属性 微信小程序开发工程中,新建文件layout,然后新建各种文件(以layout命名), 在layout.wxml中加入如下代码: <view class="container1"> <view class="item1"> 1 </

  • 浅谈微信小程序之官方UI框架we-ui使用教程

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素. 首先先看一下这套框架的GItHub地址 微信小程序UI框架we-ui 1.从git上clone到本地 太简单的东西我就不解释了,直接讲怎么用吧 这是解压后的目录 2.新建一个项目 将 dist/style/目录下的weui.wxss

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序列表中item左滑删除功能

    第一步:把想要的两种样式写出来 1.正常显示的样式 css: .box{ height: 100%; } .item{ position:relative; top: 0; width: 100%; height: 150rpx; border-bottom: #d9d9d9 solid 1rpx; padding: 0; } .item .content{ background-color: #ffffff; height: 100%; position: relative; left: 0;

  • 微信小程序列表时间戳转换实现过程解析

    这篇文章主要介绍了微信小程序列表时间戳转换实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一步先写js 随便命名为times.js function toDate(number){ var n=number * 1000; var date = new Date(n); var Y = date.getFullYear() + '/'; var M = (date.getMonth()+1 < 10 ? '0'+(date.get

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 微信小程序用户授权最佳实践指南

    前言 开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息.你要做人脸识别,就要获取相机权限.你要做位置地图功能.就要获取用户的位置权限,你要将图片保存在用户的相册,需要获取相册权限等等 微信的 scope 流程: 大多数功能都是没有授权不可用的,一般我会检测是否开启权限,然后如果开启了就继续使用,没开启就给出提示继续请求授权..如果还是拒绝 就给出提示 然后让用户手动去设置页打开... #正常逻辑 但是这一套写下来可能就是这样的: wx.getSetting({

  • 微信小程序 实现列表刷新的实例详解

    微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

  • 微信小程序实现全国机场索引列表

    本文为大家分享了微信小程序实现MUI索引列表的具体代码,供大家参考,具体内容如下 效果展示图 实现的原理 '当前选择机场'和右侧的导航栏采用的是固定定位: 左侧的展示窗口的滚动采用的是scroll-view组件: 选择中的字母提示是自己WXSS样式制作. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIndex == index ?

随机推荐