在React Native中如何实现对商品、文章的Show埋点

1. 背景

在我们工作中，有很多场景需要埋点，举个例子：某篇文章在用户使用中的露出量是多少，点击量又是多少。这个时候需要前端来做一些埋点，实现对用户操作的数据的统计，能够帮助PM分析产品的质量和提供一个优化的方向。接下来我们主要说的是在混合App中使用React Native如何实现Show的埋点。

2. 理解flatlist中的onViewableItemsChanged

什么是 onViewableItemsChanged

onViewableItemsChanged 是 VirtualizedList 和 FlatList 中的一个 prop。 当您滚动 FlatList 时，显示在 FlatList 上的项目会发生变化。 然后，调用此函数，告诉您当前的 viewableItems 是什么以及更改的项目是什么。官方文档 reactnative.cn/docs/flatli…

该函数需要和viewabilityConfig一起使用。 当满足相应的 ViewabilityConfig 条件时，将调用特定的 onViewableItemsChanged。

这是 ViewabilityConfig

export type ViewabilityConfig = {
  /**
   * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
   * viewability callback will be fired. A high number means that scrolling through content without
   * stopping will not mark the content as viewable.
   */
  minimumViewTime?: number,

  /**
   * Percent of viewport that must be covered for a partially occluded item to count as
   * "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means
   * that a single pixel in the viewport makes the item viewable, and a value of 100 means that
   * an item must be either entirely visible or cover the entire viewport to count as viewable.
   */
  viewAreaCoveragePercentThreshold?: number,

  /**
   * Similar to `viewAreaPercentThreshold`, but considers the percent of the item that is visible,
   * rather than the fraction of the viewable area it covers.
   */
  itemVisiblePercentThreshold?: number,

  /**
   * Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
   * render.
   */
  waitForInteraction?: boolean,
};

如果上面的文档都看过，那就直接进入主题，如果没有那么推荐阅读 onViewableItemsChanged in FlatList

3. 怎样才算Show，然后又怎么埋点？

首先我们定义:

    const viewabilityConfigCallbackConfig = useMemo(() => ([
        {
            viewabilityConfig: {
                minimumViewTime: 300, // 至少停留300毫秒才认为是"show"
                viewAreaCoveragePercentThreshold: 90 // 90%出现在屏幕中认为是show
            },
            onViewableItemsChanged: ItemsChangedHandle
        }
    ]), []);

根据viewabilityConfig的属性，我们决定一个item在视野中停留300ms 并且露出90%才算是一个露出元素，我们会在回掉函数中调用埋点函数。

<FlatList
    data={this._items}
    renderItem={this._renderItem}
    keyExtractor={(item) => item.id }
    viewabilityConfigCallbackPairs={this.viewabilityConfigCallbackConfig}
/>

到这一步，基本上能够采集show的埋点了，但是flatList可以上下滑动，上下滑动都会触发viewabilityConfigCallbackPairs配置的函数，这样就造成了我们的show 埋点变得异常大，也不是我们想要的数据。这个时候我们在回掉函数中给item添加一个标志位，只要露出过就设置为true, 这样上下拖动只有在第一次露出的时候计作为show 埋点数据。

    // show日志操作方法
    const ItemsChangedHandle = useCallback(info => {
        const {changed} = info;
        const showItems = [];
        _.each(changed, changeItem => {
            const {isViewable, item} = changeItem;
            const {extraMap} = item;
            if ((isViewable) && (!item[item.id]) && !item.isAuthor) {
                // TODO 添加SHOW埋点
                item[item.id] = true;
                showItems.push({
                    itemId: item.id,
                    publisherId: item.publisherId,
                    actionType: ACTION_TYPE.SHOW,
                    sequence: item.sequence ? item.sequence : "",
                    actionTime: new Date().getTime()
                });
            }
        });
        addCacheActions(showItems, actions);
    }, []);

到这里我们就在react native 中利用flatList 的viewabilityConfigCallbackPairs属性完成了对一个元素的show埋点。