组件内的埋点#

在当前项目中，前端埋点更多是一个萝卜一个坑，产品需要埋在哪里直接就埋上了，缺少一些系统性的思考。

在整理了大部分埋点后可以发现，埋点可以分为两种：

1. 全局埋点 全局埋点一般应用于通用的全局业务组件或者其他全局行为中，例如分享，页面跳转等。这种埋点行为如果发生在业务组件中直接在组件中进行埋点行为即可。但是还需要注意一个问题，如果此组件在未来有可能复用到其他项目上，必然就会出现埋点的问题。

2. 页面埋点 页面埋点是在日常开发中遇到最多的埋点。如果页面埋点的行为发生在组件中，正确的行为应该是组件 triggerEvent 同时页面在 eventHandler 中进行处理。这样做的原因便是便于组件的复用。例如可能在设计组件时并没有考虑复用的问题，但是某个产品的新需求上需要复用这个组件。这时直接引用组件，则不同页面间的埋点必然会不一致，导致二次修改，或者只能通过 copy 一份一模一样的组件代码只为了解决埋点问题。

组件的曝光埋点很烦人#

曝光埋点一般可以分为两类：

1. 通过 wx:if 控制是否曝光 这种曝光点是很容易打上的，直接在切换展示与否的逻辑处打点即可。

2. 可滑动的列表项曝光 这种曝光相对来说就有些麻烦。现实情况也一般分为两种：
   新需求，新组件
   这时一般大家就会把列表项写成组件，选择在组件中监听曝光行为，进行打点。

/**
 * 开始节点监听
 */
__NodeRefObserver() {
    // 监听节点
    const wxObserver = this.wxObserver = this.createIntersectionObserver({ thresholds: [0.7] });

    // 开始监听
    wxObserver.relativeToViewport().observe(‘.selector’, res => {
        this.$track({}); // 打点
        wxObserver.disconnect();
    });
},

老页面，无组件
这种情况一般是老页面，当中的列表项可能是没有拆分成组件的。而当前的解决策略依然会选择把列表项拆分成组件，然后在和上面情况一样进行监听。但是在紧急需求中，这种行为就很耗费时间。

那应该使用怎么样的策略来解决这种的曝光需求？我的想法是使用曝光组件。

曝光组件#

即将打曝光埋点的代码不写在业务或 UI 组件中，而是单独写在曝光组件中，让它来处理曝光行为。

假设我们有个 <expose> 组件可以代替我们写曝光代码，那么使用的最好方式肯定是：

<block wx:for="“{{list}}”">
  <expose item="“{{item}}”" index="“{{index}}”" bind:expose="“bindExpose”">
    <业务组件 />
  </expose>
</block>

{
  bindExpose(event) {
    // event.detail 中包含 item 和 index
    this.$track({
      tp: ‘0’,
      dc: ‘1’
    });
  }
}

看，通过这样的方式，不用复制粘帖曝光埋点的代码了，同时还将埋点和业务组件分离开来，一举两得。幸运的是，不用假设，我已经为各位写好啦！如果下次遇到曝光埋点的需求就直接使用吧。

总结#

通过规定业务组件将埋点的过程抛给页面和使用曝光组件，已经在一定程度上解决了埋点混乱的问题。但是埋点代码依然会在页面上和业务混在一起，而解决这个问题还需要想出更机智的方法，让我们免受埋点之苦。

著作权声明#

本文作者 郭梓梁，首次发布于 MeloGuo Blog，转载请保留以上链接

---

GitHub · guoziliang199606@gmail.com · 微信

CC BY-NC 4.0 2024 © Melo Guo.RSS