页面停留时长埋点实现技术详解

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 一、引言
- 二、埋点收集页面停留时长的原理
- 三、前端埋点实现
- - [3.1 记录页面进入时间](#3.1 记录页面进入时间)
  - [3.2 记录页面离开时间](#3.2 记录页面离开时间)
  - [3.3 单页面应用（SPA）的特殊处理](#3.3 单页面应用（SPA）的特殊处理)
- 四、后端接收与数据存储
- - [4.1 接口设计](#4.1 接口设计)
  - [4.2 数据存储](#4.2 数据存储)
- 五、数据处理与分析
- 六、总结

在数字化运营和用户行为分析场景下，实现埋点收集用户在页面的停留时长，能为优化产品体验、调整运营策略提供关键数据。下面我将从原理、前端后端实现方法、数据处理等方面，详细阐述具体实现路径。

一、引言

在互联网产品的用户行为分析中，用户在页面的停留时长是一项重要的数据指标。它能够反映用户对页面内容的兴趣程度、交互深度，帮助产品经理和运营人员优化页面设计、调整内容策略。而实现页面停留时长的准确收集，离不开埋点技术的应用。本文将深入探讨如何通过埋点实现用户页面停留时长的收集。

二、埋点收集页面停留时长的原理

用户页面停留时长的计算，基于用户进入页面和离开页面两个关键时间点。通过在页面加载完成时记录进入时间，在用户离开页面（如关闭页面、跳转至其他页面）时记录离开时间，两者的时间差即为用户在该页面的停留时长。而埋点就是在这两个关键事件发生时，触发数据采集并发送到服务器的机制。

三、前端埋点实现

3.1 记录页面进入时间

在前端页面加载完成的事件中，利用 JavaScript 的 DOMContentLoaded 或 load 事件来记录页面进入时间。DOMContentLoaded 事件在 HTML 文档已完全加载和解析完毕时触发，此时页面的 DOM 结构已准备好，但像图片、样式表等外部资源可能尚未加载完成；load 事件则在整个页面（包括所有资源）都加载完成后触发。一般选择 DOMContentLoaded 事件能更及时地记录用户进入页面的时间。示例代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <title>页面停留时长埋点</title>
</head>

<body>
  <script>
    let enterTime;
    document.addEventListener('DOMContentLoaded', function () {
      enterTime = new Date().getTime();
    });
  </script>
</body>

</html>

3.2 记录页面离开时间

用户离开页面的行为可以通过 beforeunload 或 unload 事件来捕获。beforeunload 事件在浏览器窗口即将关闭或刷新时触发，此时可以向用户询问是否确认离开；unload 事件在页面卸载时触发，常用于执行一些清理操作，但由于页面即将卸载，在该事件中进行复杂操作可能不稳定。示例代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <title>页面停留时长埋点</title>
</head>

<body>
  <script>
    let enterTime;
    document.addEventListener('DOMContentLoaded', function () {
      enterTime = new Date().getTime();
    });
    window.addEventListener('beforeunload', function () {
      const leaveTime = new Date().getTime();
      const stayTime = leaveTime - enterTime;
      // 发送停留时长数据到服务器
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/track', true);
      xhr.setRequestHeader('Content - Type', 'application/json');
      xhr.send(JSON.stringify({ stayTime: stayTime }));
    });
  </script>
</body>

</html>

3.3 单页面应用（SPA）的特殊处理

在单页面应用中，页面跳转通常不会触发 unload 事件，因为页面只是局部更新，而不是整体重新加载。此时可以利用路由变化事件来判断用户是否"离开"当前页面。以 Vue.js 为例，在路由守卫中进行埋点操作：

javascript 复制代码

import Vue from 'vue';
import Router from 'vue - router';
Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/page1',
      component: Page1
    },
    {
      path: '/page2',
      component: Page2
    }
  ]
});

let enterTime;
router.beforeEach((to, from, next) => {
  if (from.name) {
    const leaveTime = new Date().getTime();
    const stayTime = leaveTime - enterTime;
    // 发送停留时长数据到服务器
    //...
  }
  enterTime = new Date().getTime();
  next();
});

export default router;

四、后端接收与数据存储

4.1 接口设计

后端需要设计一个接收页面停留时长数据的接口，如 /track。该接口可以使用 HTTP POST 方法接收 JSON 格式的数据。以 Node.js 和 Express 为例，代码如下：

javascript 复制代码

const express = require('express');
const app = express();
app.use(express.json());

app.post('/track', (req, res) => {
  const { stayTime } = req.body;
  // 处理和存储停留时长数据
  console.log('接收的停留时长:', stayTime);
  res.status(200).send('数据接收成功');
});

const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

4.2 数据存储

接收的数据可以存储在关系型数据库（如 MySQL、PostgreSQL）或非关系型数据库（如 MongoDB）中。以 MongoDB 为例，将停留时长数据存储到集合中：

javascript 复制代码

const express = require('express');
const app = express();
app.use(express.json());
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/user - behavior', { useNewUrlParser: true, useUnifiedTopology: true });

const stayTimeSchema = new mongoose.Schema({
  stayTime: Number,
  // 可以添加其他字段，如页面路径、用户ID等
  pagePath: String,
  userId: String
});

const StayTime = mongoose.model('StayTime', stayTimeSchema);

app.post('/track', async (req, res) => {
  const { stayTime, pagePath, userId } = req.body;
  const newStayTime = new StayTime({ stayTime, pagePath, userId });
  try {
    await newStayTime.save();
    res.status(200).send('数据存储成功');
  } catch (error) {
    res.status(500).send('数据存储失败');
  }
});

const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

五、数据处理与分析

收集到的页面停留时长数据需要进一步处理和分析，才能发挥其价值。可以使用数据可视化工具（如 Tableau、PowerBI）对数据进行可视化展示，直观呈现不同页面的平均停留时长、用户群体间的停留时长差异等。同时，结合其他用户行为数据（如点击行为、浏览路径）进行综合分析，挖掘用户行为模式，为产品优化和运营决策提供依据。

六、总结

通过前端在页面加载和卸载事件中进行埋点，记录用户进入和离开页面的时间，再由后端接收并存储数据，最后进行数据处理与分析，能够实现用户页面停留时长的有效收集。在实际应用中，还需考虑数据的准确性、完整性以及性能优化等问题，不断完善埋点方案，以获取更有价值的数据洞察。