泰州网络公司 浏览次数: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 | 海外 / 外贸网站 | 全球覆盖、数据分析能力极强 |
通用接入步骤(以百度统计为例)
- 注册账号:打开百度统计官网,用百度账号登录,添加你的网站域名。
- 获取统计代码:在「代码管理」中复制官方生成的 JS 异步代码。
- 嵌入网站(核心一步):把代码粘贴到网站所有页面的
</head> 标签之前(必须全站嵌入,否则统计不全)。
- 查看数据:等待 10-30 分钟,后台即可查看实时访客、访问页面、地域、设备等数据。
不同网站的嵌入方法
- 纯静态 HTML 网站:直接把代码复制到每个
.html 文件的 <head> 里;
- WordPress / 织梦等 CMS:后台「主题设置」→「自定义头部代码」,一键粘贴;
- 在线建站工具(凡科、易企秀、Shopify):后台「高级设置」→「第三方代码嵌入」粘贴;
- Vue/React 单页应用:在入口文件
public/index.html 的 <head> 中嵌入即可。
二、自主开发访客统计(定制化方案,适合技术人员)
适用场景:需要私有化数据、自定义统计规则、对接自身管理后台的网站。
核心流程:
前端采集访客数据 → 后端接收存储 → 后台可视化展示1. 推荐技术栈
- 前端:原生 JS(埋点采集)
- 后端:Node.js/PHP/Java(极简示例用 Node.js)
- 数据库:MySQL(存储访客数据)
- 可视化:ECharts(生成图表)
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 读取数据库数据,生成:日访问量、页面访问排行、访客地域、设备分布等图表。
三、关键注意事项(必看)
- 隐私合规(强制要求)国内需遵守《个人信息保护法》:访客 IP 必须脱敏(如
192.168.1.xxx),禁止存储完整隐私信息;网站需添加隐私政策声明。
- 提升统计精准度第三方工具可设置「排除本机 IP」,避免统计自己的访问;自主开发可用 Cookie 标记访客,24 小时内同一访客只算 1 次。
- 性能优化第三方统计代码默认异步加载,不会拖慢网站速度;自主开发接口需做防抖,避免重复上报。
总结
- 新手 / 普通网站:直接用 百度统计,5 分钟嵌入代码,零成本搞定访客统计;
- 定制化需求:自主开发,实现私有化数据 + 自定义统计规则;
- 所有方案都必须遵守隐私合规,脱敏处理用户信息。
