揭秘！如何用Flutter设计一个100%准确的埋点框架？(2)

那么我们的问题就是如何算出坑位在屏幕内曝光面积的比例。要算出这个值，需要知道以下几个数值：

• 容器相对屏幕的偏移量
• 坑位相对容器的偏移量
• 坑位的位置和宽高
• 容器的位置和宽高

其中坑位和容器的宽和高很容易获取和计算，这里就不再累述。

获得容器相对屏幕的偏移量

//监听容器滚动，得到容器的偏移量 
double 
 _scrollContainerOffset = scrollNotification.metrics.pixels; 

获得坑位相对屏幕的偏移量

//曝光坑位Widget的context 
final 
  
RenderObject 
 childRenderObject = context.findRenderObject(); 
final 
  
RenderAbstractViewport 
 viewport =  
RenderAbstractViewport 
.of(childRenderObject); 
if 
 (viewport ==  
null 
) { 
   
return 
; 
} 
if 
 (!childRenderObject.attached) { 
   
return 
; 
} 
//曝光坑位在容器内的偏移量 
final 
  
RevealedOffset 
 offsetToRevealTop = viewport.getOffsetToReveal(childRenderObject,  
0.0 

逻辑判断

if 
 (当前坑位是invisible && 曝光比例 >= { 0.5) 
 
记录当前坑位是visible状态 
 
记录出现时间 
 
}  else if (当前坑位是visible && 曝光比例 <  0.5 ) { 
 
记录当前坑位是invisible状态 
 
if (当前时间-出现时间 >  { 500ms )
 
 
调用曝光埋点接口 
 
} 
 
} 

点击坑位

点击坑位埋点没什么难点，很容易就可以想到下面的方案：

效果

经过多轮迭代和优化，目前线上Flutter页面的埋点准确率已经达到100%，有力地支持了业务的分析和判断。同时这套方案让业务同学在做开发时，对于页面进入/离开、曝光坑位可以做到无感知，即不用关心何时去触发，做到了简单易用和无侵入性。

未来

此外，针对页面进入/离开这个场景，由于闲鱼是基于Flutter Boost混合栈的方案，因此我们的解决方案还不够通用。不过未来随着闲鱼上的Flutter页面越来越多，我们后续也会去实现基于Flutter原生的方案。

（编辑：ASP站长网）