埋点上报系统

最新推荐文章于 2024-04-30 18:01:59 发布

. . . . .

最新推荐文章于 2024-04-30 18:01:59 发布

阅读量88

点赞数

文章标签：安全

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/134448174

版权

埋点类型分类：

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

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

曝光埋点原理 - 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);

在上述代码中，我们首先创建了一个 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>Document</title>
    </head>
    <body>
        <h1 id="h1">1</h1>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <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>

. . . . .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
埋点上报系统

在回调函数中，我们判断 entry.isIntersecting 属性是否为 true，如果是，则表示元素进入了用户可见区域，可以触发曝光事件。然后，我们选择需要追踪曝光的目标元素，并调用 observer.observe() 方法开始观察目标元素的可见状态变化。当用户进入一个页面或滚动页面时，页面中的元素（如广告、文章、图片等）可能会被用户看到，这时就可以触发相应的曝光事件。在埋点中，主要埋点类型有点击埋点、曝光埋点，也可以具体定义业务上的埋点，比如下单埋点，加购埋点等。// 需要观察的目标元素。
复制链接

扫一扫