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


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实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
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与ASP
2006/10/09 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Python对数据库操作
2016/03/28 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Python 爬虫性能相关总结
2020/08/03 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
《挑山工》的教学反思
2014/02/16 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
工作收入证明模板
2014/10/10 职场文书
高三复习计划
2015/01/19 职场文书
乌镇导游词
2015/02/02 职场文书
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle