• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    基于Vue+Node.js实现埋点功能全流程

    发布者: 涵韵 | 发布时间: 2025-6-14 15:32| 查看数: 44| 评论数: 0|帖子模式


    要实现用户访问量统计和模块点击统计功能，可以采用以下方案：

    一、前端(Vue)实现


    1. 安装必要的依赖
    1. npm install axios --save  # 用于发送请求
    2. npm install js-cookie --save  # 用于识别用户
    复制代码
    2. 创建埋点工具类 (tracker.js)
    1. import axios from 'axios';
    2. import Cookies from 'js-cookie';

    4. const Tracker = {
    5.   // 初始化用户ID（如果不存在）
    6.   initUserId() {
    7.     let userId = Cookies.get('user_id');
    8.     if (!userId) {
    9.       userId = 'user_' + Math.random().toString(36).substr(2, 9);
    10.       Cookies.set('user_id', userId, { expires: 365 });
    11.     }
    12.     return userId;
    13.   },

    15.   // 发送页面访问埋点
    16.   trackPageView() {
    17.     const userId = this.initUserId();
    18.     const data = {
    19.       userId: userId,
    20.       eventType: 'pageview',
    21.       pageUrl: window.location.href,
    22.       timestamp: new Date().toISOString()
    23.     };
    24.     this.sendData(data);
    25.   },

    27.   // 发送模块点击埋点
    28.   trackModuleClick(moduleName) {
    29.     const userId = this.initUserId();
    30.     const data = {
    31.       userId: userId,
    32.       eventType: 'module_click',
    33.       moduleName: moduleName,
    34.       timestamp: new Date().toISOString()
    35.     };
    36.     this.sendData(data);
    37.   },

    39.   // 发送数据到后端
    40.   sendData(data) {
    41.     axios.post('/api/track', data)
    42.       .catch(error => {
    43.         console.error('Tracking error:', error);
    44.       });
    45.   }
    46. };

    48. export default Tracker;
    复制代码
    3. 在Vue应用中使用


    全局埋点 (main.js)
    1. import Tracker from './utils/tracker';
    2. import router from './router';

    4. // 页面访问埋点
    5. router.afterEach((to, from) => {
    6.   Tracker.trackPageView();
    7. });

    9. // 挂载到Vue原型，方便组件内使用
    10. Vue.prototype.$tracker = Tracker;
    复制代码
    组件内模块点击埋点
    1. <template>
    2.   <div>
    3.     <button @click="handleClick('module1')">模块1</button>
    4.     <button @click="handleClick('module2')">模块2</button>
    5.   </div>
    6. </template>

    8. <script>
    9. export default {
    10.   methods: {
    11.     handleClick(moduleName) {
    12.       // 业务逻辑...
    13.       
    14.       // 埋点
    15.       this.$tracker.trackModuleClick(moduleName);
    16.     }
    17.   }
    18. }
    19. </script>
    复制代码
    二、后端(Node.js)实现


    1. 创建数据库表

    假设使用MySQL:
    1. CREATE TABLE tracking_events (
    2.   id INT AUTO_INCREMENT PRIMARY KEY,
    3.   user_id VARCHAR(255),
    4.   event_type VARCHAR(50),
    5.   page_url VARCHAR(500),
    6.   module_name VARCHAR(100),
    7.   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    8. );

    10. CREATE TABLE daily_stats (
    11.   id INT AUTO_INCREMENT PRIMARY KEY,
    12.   date DATE UNIQUE,
    13.   total_visits INT DEFAULT 0,
    14.   unique_visitors INT DEFAULT 0,
    15.   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    16.   updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    17. );

    19. CREATE TABLE module_stats (
    20.   id INT AUTO_INCREMENT PRIMARY KEY,
    21.   module_name VARCHAR(100) UNIQUE,
    22.   click_count INT DEFAULT 0,
    23.   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    24.   updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    25. );
    复制代码
    2. Node.js 后端接口 (Express示例)
    1. const express = require('express');
    2. const bodyParser = require('body-parser');
    3. const mysql = require('mysql2/promise');
    4. const app = express();

    6. // 数据库连接配置
    7. const pool = mysql.createPool({
    8.   host: 'localhost',
    9.   user: 'root',
    10.   password: 'password',
    11.   database: 'tracking_db',
    12.   waitForConnections: true,
    13.   connectionLimit: 10,
    14.   queueLimit: 0
    15. });

    17. app.use(bodyParser.json());

    19. // 埋点数据接收接口
    20. app.post('/api/track', async (req, res) => {
    21.   try {
    22.     const { userId, eventType, pageUrl, moduleName } = req.body;
    23.    
    24.     // 1. 记录原始事件
    25.     await pool.query(
    26.       'INSERT INTO tracking_events (user_id, event_type, page_url, module_name) VALUES (?, ?, ?, ?)',
    27.       [userId, eventType, pageUrl, moduleName]
    28.     );
    29.    
    30.     // 2. 如果是页面访问，更新每日统计
    31.     if (eventType === 'pageview') {
    32.       await updateDailyStats(userId);
    33.     }
    34.    
    35.     // 3. 如果是模块点击，更新模块统计
    36.     if (eventType === 'module_click' && moduleName) {
    37.       await updateModuleStats(moduleName);
    38.     }
    39.    
    40.     res.status(200).send('OK');
    41.   } catch (error) {
    42.     console.error('Tracking error:', error);
    43.     res.status(500).send('Internal Server Error');
    44.   }
    45. });

    47. // 更新每日统计
    48. async function updateDailyStats(userId) {
    49.   const today = new Date().toISOString().split('T')[0];
    50.   
    51.   // 检查今天是否已有记录
    52.   const [rows] = await pool.query('SELECT * FROM daily_stats WHERE date = ?', [today]);
    53.   
    54.   if (rows.length === 0) {
    55.     // 新的一天，创建新记录
    56.     await pool.query(
    57.       'INSERT INTO daily_stats (date, total_visits, unique_visitors) VALUES (?, 1, 1)',
    58.       [today]
    59.     );
    60.   } else {
    61.     // 更新现有记录
    62.     // 检查用户今天是否已经访问过
    63.     const [visits] = await pool.query(
    64.       'SELECT COUNT(DISTINCT user_id) as user_visited FROM tracking_events ' +
    65.       'WHERE event_type = "pageview" AND DATE(created_at) = ? AND user_id = ?',
    66.       [today, userId]
    67.     );
    68.    
    69.     const isNewVisitor = visits[0].user_visited === 0;
    70.    
    71.     await pool.query(
    72.       'UPDATE daily_stats SET total_visits = total_visits + 1, ' +
    73.       'unique_visitors = unique_visitors + ? WHERE date = ?',
    74.       [isNewVisitor ? 1 : 0, today]
    75.     );
    76.   }
    77. }

    79. // 更新模块统计
    80. async function updateModuleStats(moduleName) {
    81.   await pool.query(
    82.     'INSERT INTO module_stats (module_name, click_count) VALUES (?, 1) ' +
    83.     'ON DUPLICATE KEY UPDATE click_count = click_count + 1',
    84.     [moduleName]
    85.   );
    86. }

    88. // 获取统计数据的接口
    89. app.get('/api/stats', async (req, res) => {
    90.   try {
    91.     // 总访问量
    92.     const [totalVisits] = await pool.query('SELECT SUM(total_visits) as total FROM daily_stats');
    93.    
    94.     // 今日访问量
    95.     const today = new Date().toISOString().split('T')[0];
    96.     const [todayStats] = await pool.query('SELECT * FROM daily_stats WHERE date = ?', [today]);
    97.    
    98.     // 热门模块
    99.     const [popularModules] = await pool.query(
    100.       'SELECT module_name, click_count FROM module_stats ORDER BY click_count DESC LIMIT 5'
    101.     );
    102.    
    103.     res.json({
    104.       totalVisits: totalVisits[0].total || 0,
    105.       todayVisits: todayStats[0] ? todayStats[0].total_visits : 0,
    106.       todayUniqueVisitors: todayStats[0] ? todayStats[0].unique_visitors : 0,
    107.       popularModules: popularModules
    108.     });
    109.   } catch (error) {
    110.     console.error('Error fetching stats:', error);
    111.     res.status(500).send('Internal Server Error');
    112.   }
    113. });

    115. const PORT = 3000;
    116. app.listen(PORT, () => {
    117.   console.log(`Server running on port ${PORT}`);
    118. });
    复制代码
    三、数据可视化

    可以创建一个管理后台页面来展示这些统计数据：
    1. <template>
    2.   <div class="stats-dashboard">
    3.     <h1>网站访问统计</h1>
    4.    
    5.     <div class="stats-grid">
    6.       <div class="stat-card">
    7.         <h3>总访问量</h3>
    8.         <p class="stat-value">{{ stats.totalVisits }}</p>
    9.       </div>
    10.       
    11.       <div class="stat-card">
    12.         <h3>今日访问量</h3>
    13.         <p class="stat-value">{{ stats.todayVisits }}</p>
    14.       </div>
    15.       
    16.       <div class="stat-card">
    17.         <h3>今日独立访客</h3>
    18.         <p class="stat-value">{{ stats.todayUniqueVisitors }}</p>
    19.       </div>
    20.     </div>
    21.    
    22.     <div class="popular-modules">
    23.       <h2>热门模块</h2>
    24.       <ul>
    25.         <li v-for="(module, index) in stats.popularModules" :key="index">
    26.           {{ module.module_name }}: {{ module.click_count }} 次点击
    27.         </li>
    28.       </ul>
    29.     </div>
    30.   </div>
    31. </template>

    33. <script>
    34. import axios from 'axios';

    36. export default {
    37.   data() {
    38.     return {
    39.       stats: {
    40.         totalVisits: 0,
    41.         todayVisits: 0,
    42.         todayUniqueVisitors: 0,
    43.         popularModules: []
    44.       }
    45.     };
    46.   },
    47.   mounted() {
    48.     this.fetchStats();
    49.   },
    50.   methods: {
    51.     async fetchStats() {
    52.       try {
    53.         const response = await axios.get('/api/stats');
    54.         this.stats = response.data;
    55.       } catch (error) {
    56.         console.error('Error fetching stats:', error);
    57.       }
    58.     }
    59.   }
    60. };
    61. </script>

    63. <style>
    64. .stats-dashboard {
    65.   max-width: 1200px;
    66.   margin: 0 auto;
    67.   padding: 20px;
    68. }

    70. .stats-grid {
    71.   display: grid;
    72.   grid-template-columns: repeat(3, 1fr);
    73.   gap: 20px;
    74.   margin-bottom: 30px;
    75. }

    77. .stat-card {
    78.   background: #f5f5f5;
    79.   padding: 20px;
    80.   border-radius: 8px;
    81.   text-align: center;
    82. }

    84. .stat-value {
    85.   font-size: 24px;
    86.   font-weight: bold;
    87.   margin: 10px 0 0;
    88. }

    90. .popular-modules ul {
    91.   list-style: none;
    92.   padding: 0;
    93. }

    95. .popular-modules li {
    96.   padding: 10px;
    97.   background: #f0f0f0;
    98.   margin-bottom: 5px;
    99.   border-radius: 4px;
    100. }
    101. </style>
    复制代码
    四、优化建议


    • 性能优化：

      • 前端可以使用节流(throttle)或防抖(debounce)技术减少高频点击的埋点请求
      • 后端可以考虑使用批量插入代替单条插入

    • 数据准确性：

      • 使用更可靠的用户识别方式，如结合IP、设备指纹等
      • 考虑使用Web Beacon API在页面卸载时发送数据

    • 扩展性：

      • 可以添加更多事件类型（如停留时长、滚动深度等）
      • 可以按时间段（小时/天/周）分析访问模式

    • 隐私合规：

      • 添加用户同意机制（如GDPR合规）
      • 提供隐私政策说明数据收集用途

    这个方案提供了完整的从前端埋点到后端存储再到数据展示的全流程实现，你可以根据实际需求进行调整和扩展。
    以上就是基于Vue+Node.js实现埋点功能全流程的详细内容，更多关于Vue+Node.js埋点功能的资料请关注脚本之家其它相关文章！

    来源：https://www.jb51.net/javascript/340097mog.htm
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表