万科网络科技

17年专业网站建设优化

15850859861

当前位置: 网站首页 > 新闻资讯 > 行业动态 >

行业动态

网站建设中如何实现访客统计功能?

泰州网络公司 浏览次数:0 发布时间:2026-04-23

  网站实现访客统计分两种方案99% 的普通网站直接用第三方零代码工具即可(高效、免费、无需开发);只有需要私有化数据、自定义统计维度的网站,才需要自主开发。下面分方案详细说明,步骤清晰可直接落地:

一、零代码接入:第三方统计工具(首选推荐)

这是通用、简单的方式,无需写后端代码,只需嵌入一段官方 JS 脚本,就能自动统计所有访客数据,还自带可视化报表。

主流工具选择

表格
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 24px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 24px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 24px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
工具适用场景优点
百度统计国内网站(首选)免费、中文界面、适配国内网络、数据精准
友盟 + (原 CNZZ)国内中小网站老牌统计、轻量易用
51LA 统计国内博客 / 小企业站极简、无广告
Google Analytics 4海外 / 外贸网站全球覆盖、数据分析能力极强

通用接入步骤(以百度统计为例)

  1. 注册账号:打开百度统计官网,用百度账号登录,添加你的网站域名。
  2. 获取统计代码:在「代码管理」中复制官方生成的 JS 异步代码
  3. 嵌入网站(核心一步):
    把代码粘贴到网站所有页面</head> 标签之前(必须全站嵌入,否则统计不全)。
  4. 查看数据:等待 10-30 分钟,后台即可查看实时访客、访问页面、地域、设备等数据。

不同网站的嵌入方法

  1. 纯静态 HTML 网站:直接把代码复制到每个 .html 文件的 <head> 里;
  2. WordPress / 织梦等 CMS:后台「主题设置」→「自定义头部代码」,一键粘贴;
  3. 在线建站工具(凡科、易企秀、Shopify):后台「高级设置」→「第三方代码嵌入」粘贴;
  4. Vue/React 单页应用:在入口文件 public/index.html<head> 中嵌入即可。

二、自主开发访客统计(定制化方案,适合技术人员)

适用场景:需要私有化数据、自定义统计规则、对接自身管理后台的网站。
核心流程:前端采集访客数据 → 后端接收存储 → 后台可视化展示

1. 推荐技术栈

2. 核心步骤 + 代码示例

(1)数据库表设计(存储访客数据)

sql
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
CREATE TABLE visitor_stats (
    id INT PRIMARY KEY AUTO_INCREMENT,
    ip VARCHAR(50) NOT NULL COMMENT '访客IP(脱敏)',
    url VARCHAR(255) NOT NULL COMMENT '访问页面',
    referrer VARCHAR(255) COMMENT '来源页面',
    browser VARCHAR(50) COMMENT '浏览器类型',
    os VARCHAR(50) COMMENT '操作系统',
    device VARCHAR(20) COMMENT '设备(PC/手机)',
    visit_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '访问时间'
);

(2)前端埋点代码(自动采集 + 上报)

原生 JS,页面加载时自动采集访客信息,上报给后端:
javascript
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>运行
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
// 页面加载完成后自动上报
window.onload = function () {
  // 采集访客核心数据
  const visitorData = {
    url: window.location.href, // 当前访问页面
    referrer: document.referrer, // 来源页面(如百度跳转)
    browser: getBrowser(),
    os: getOS(),
    device: /Mobile|Android|iPhone/i.test(navigator.userAgent) ? 'mobile' : 'pc'
  };

  // 上报到后端接口
  fetch('/api/visit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(visitorData)
  });
};

// 辅助函数:简化版获取浏览器/系统(可替换完整版)
function getBrowser() { return navigator.userAgent; }
function getOS() { return navigator.platform; }

(3)后端接收接口(Node.js + Express)

接收前端数据,存入数据库:
javascript
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>运行
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; line-height: 0px; display: block; flex: 0 1 auto; flex-direction: row; justify-content: normal; align-items: normal; padding: 0px; margin: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></svg>
const express = require('express');
const mysql = require('mysql2');
const app = express();
app.use(express.json());

// 连接数据库
const db = mysql.createConnection({
  host: 'localhost',
  user: '你的数据库账号',
  password: '你的数据库密码',
  database: '数据库名'
});

// 访客统计接口
app.post('/api/visit', (req, res) => {
  const { url, referrer, browser, os, device } = req.body;
  const ip = req.ip.replace('::ffff:', ''); // 获取客户端IP

  // 插入数据
  const sql = 'INSERT INTO visitor_stats (ip, url, referrer, browser, os, device) VALUES (?,?,?,?,?,?)';
  db.query(sql, [ip, url, referrer, browser, os, device], () => res.sendStatus(200));
});

app.listen(3000, () => console.log('服务启动成功'));

(4)数据展示

ECharts 读取数据库数据,生成:日访问量、页面访问排行、访客地域、设备分布等图表。

三、关键注意事项(必看)

  1. 隐私合规(强制要求)
    国内需遵守《个人信息保护法》:访客 IP 必须脱敏(如 192.168.1.xxx),禁止存储完整隐私信息;网站需添加隐私政策声明。
  2. 提升统计精准度
    第三方工具可设置「排除本机 IP」,避免统计自己的访问;自主开发可用 Cookie 标记访客,24 小时内同一访客只算 1 次。
  3. 性能优化
    第三方统计代码默认异步加载,不会拖慢网站速度;自主开发接口需做防抖,避免重复上报。

总结

  1. 新手 / 普通网站:直接用 百度统计,5 分钟嵌入代码,零成本搞定访客统计;
  2. 定制化需求:自主开发,实现私有化数据 + 自定义统计规则;
  3. 所有方案都必须遵守隐私合规,脱敏处理用户信息。
  4. 网站建设中如何实现访客统计功能

上一篇:老网站改造响应式需要多长时间

下一篇:如何使用百度统计?

在线客服
服务热线

服务热线

  15850859861

微信咨询
返回顶部