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


Posted in Javascript onOctober 15, 2019

背景

最近项目中,开发一个小程序列表页,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 文档

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

Javascript 相关文章推荐
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
javascript网页随机点名实现过程解析
Oct 15 #Javascript
javascript随机变色实例代码
Oct 15 #Javascript
vue中axios的二次封装实例讲解
Oct 14 #Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 #Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 #Javascript
vue实现百度语音合成的实例讲解
Oct 14 #Javascript
vue中进行微博分享的实例讲解
Oct 14 #Javascript
You might like
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php debug 安装技巧
2011/04/30 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
列表内容的选择
2006/06/30 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
python编写猜数字小游戏
2019/10/06 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
Python文件操作的面试题
2013/06/22 面试题
幼儿师范毕业生自荐信
2013/11/09 职场文书
企业申诉管理制度
2014/01/30 职场文书
项目申请汇报材料
2014/08/16 职场文书
社区党支部承诺书
2015/04/29 职场文书
检察院起诉书
2015/05/20 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python