埋点上报系统

埋点类型分类：

在埋点中，主要埋点类型有点击埋点、曝光埋点，也可以具体定义业务上的埋点，比如下单埋点，加购埋点等。

其中，曝光事件通常在用户浏览应用或网站时触发。当用户进入一个页面或滚动页面时，页面中的元素（如广告、文章、图片等）可能会被用户看到，这时就可以触发相应的曝光事件。曝光事件的触发可以通过在相应元素上添加相应的代码片段来实现。一旦曝光事件被触发，相关的数据就可以被采集并发送到后端进行记录和分析。

曝光埋点原理 - IntersectionObserver

判断元素是否处于用户可见状态的具体代码可以使用 Intersection Observer API 来实现。以下是一个示例代码：

// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    // 判断元素是否处于用户可见状态
    if (entry.isIntersecting) {
      // 元素进入可见区域，触发曝光事件
      // 在这里可以执行相应的操作，比如发送曝光数据到后端
      console.log('Element is visible');
    }
  });
});

// 需要追踪曝光的元素
const targetElement = document.querySelector('.target-element');

// 开始观察目标元素
observer.observe(targetElement);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在上述代码中，我们首先创建了一个 IntersectionObserver 实例，通过传入一个回调函数来处理元素的可见状态变化。在回调函数中，我们判断 entry.isIntersecting 属性是否为 true，如果是，则表示元素进入了用户可见区域，可以触发曝光事件。然后，我们选择需要追踪曝光的目标元素，并调用 observer.observe() 方法开始观察目标元素的可见状态变化。

请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。

Demo：

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
    head>
    <body>
        <h1 id="h1">1h1>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <p>1p>
        <h2 id="h2">h2>
    body>
    <script>
        // 创建 IntersectionObserver 实例
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 目标元素进入视口
                    console.log('Element is in viewport');
                } else {
                    // 目标元素离开视口
                    console.log('Element is out of viewport');
                }
            });
        });

        // 需要观察的目标元素
        const targetElement = document.querySelector('#h1');

        // 开始观察目标元素，如果想观察多个元素，可以for循环
        observer.observe(targetElement);
    script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

相关阅读:
vmware虚拟化平台虚拟机迁移至H3C CAS虚拟化平台
洛谷P4549 裴蜀定理模板
使用 AWS S3 SDK 访问 COS-腾讯云国际站代充
苹果酸-壳聚糖纳米孔水凝胶微球/SA/CS/GT三元复合/载血小板源性生长因子壳聚糖水凝胶微球
机器视觉工程师吐槽的常见100个名场面
Linux常见操作命令（1）
kafka随笔
【英语：基础进阶_读写专项训练】G5.议论文写作
YOLOv5 烟叶病害检测系统优化教程
Java基础简单题目练习

原文地址：https://blog.csdn.net/yexudengzhidao/article/details/134448174