序言

项目里是不是需要埋点？

埋点的时机有哪些呢？

你是不是很好的拿捏了呢？

正确时机上报埋点除了保证数据准确性，还可以帮你做什么？

上报时机

一、用户行为触发时

这个类型我的定义是：也就是用户主观上的动作，比如最常见的点击

<button id="reportButton">点击我进行上报</button>

reportButton() => {
   console.log('上报点击操作')
}

二、页面加载时

这个类型的话，主要就是上报一些界面加载时的信息，比如界面加载完成上报

load事件会在以下情况触发：

当浏览器完成页面的 DOM（文档对象模型）的解析和构建。
当所有页面资源（包括图片、样式表、脚本等）都已经加载完成。

window.performance是一个包含了各种性能相关信息的接口，它提供了对浏览器性能的监控和度量。通过 window.performance.timing 属性，我们可以获取到页面加载过程中各个关键事件的时间戳，这些事件包括：

navigationStart：浏览器开始导航到页面的时间戳。
domContentLoadedEventEnd：DOMContentLoaded 事件结束的时间点，表示 DOM 构建完毕。
loadEventEnd：load 事件结束的时间戳，表示页面加载完成。

通过对这些时间点的比较，我们可以计算出页面加载所花费的时间，从而评估页面性能。

// 当页面加载完成后执行的函数
window.addEventListener('load', function() {
    // 计算页面加载完成时间
    const loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;

    // 打印页面加载完成时间
    console.log('页面加载完成时间：', loadTime, '毫秒');
});

三、页面交互时

这一类型的话呢，就是滚动页面、停留时间这种用户页面交互时场景，举例一个列表内容单个曝光

需要列表单个元素出现在屏幕的高度>=自身高度50%时候，进行元素内容曝光

这里推荐选用由浏览器直接支持的IntersectionObserver，仅性能更好，而且提供了更为精准和灵活的配置选项。scroll事件性能不是很好，但是可以兼容低版本浏览器。这一点要支持也可以用polyfill库替代IntersectionObserver，react可用react-intersection-observer,vue可用vue-intersect

// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    // 当目标元素进入视口时
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
      // 触发曝光上报事件，可以根据具体需求调用接口或发送数据
      console.log('曝光上报：', entry.target.textContent);
    }
  });
}, {
  // 配置项，可以指定根元素、阈值等
  threshold: 0.5, // 当目标元素可见部分占比超过50%时触发回调
});

// 获取列表中的所有项
const items = document.querySelectorAll('.list-item');

// 遍历每个项并观察
items.forEach(item => {
  observer.observe(item);
});

四、错误发生时

这个比较容易理解也比较简单，但是很重要哦，你想想线上出问题，看错误埋点不到一分钟就查到了原因！

下面简单意思一个使用try catch 来捕捉逻辑错误方法。

function complexCalculation(data) {
  try {
   return data.reduce((acc, val) => acc + val, 0);
  } catch (error) {
    // 捕获并处理错误
    console.error('错误上报', error.message);
    // 返回默认值或执行其他错误处理逻辑
    return null;
  }
}

五、网络请求完成时

这个类型的话呢，举例一个接口状态上报，也是一个问题排查的保险,

function reportApiStatus(params) {
  // 你可以使用Ajax请求、fetch API或其他适合你项目的方式
  // 这里只是一个简单的示例
  fetch('https://example.com/report_api', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  })
  .then(response => {
    if (response.success) {
      console.log('接口成功上报');
    } else {
      console.error('接口失败上报');
    }
  })
  .catch(error => {
    console.error('逻辑错误上报');
  });
}

结尾

针对埋点这一块，

首先，埋点肯定是必要的，不管是前端服务端客户端。因为对于整个系统流程，都要有一个链路还有汇总。

数据埋点的话像点击量、下载量、PU\VU啥的，这些是项目统计数据，要注意上报的时机准确，才能保证数据的准确性。

还更要注重技术埋点，主要是有问题能够快速帮助你定位、排查问题原因，细致一些总是不会错的，不要怕麻烦。

JYM对于埋点又是什么看法呢？

埋点上报时机你知道有哪些？

序言