全球智能网络解决方案提供商

一款傻瓜式操作,引入第三方的前端数据统计代码!

锐途网 112

根据你的需求,以下是一个 极简、无需服务器配置、数据不丢失的纯前端统计方案,基于 FiniCounter(无需安装任何软件,完全托管服务)。它适合大流量网站,且数据由第三方服务持久化存储,即使你的服务器重启也不会清零。

方案:FiniCounter 静态网站访问量统计

特点:

- 零配置:只需在网页中添加两行代码。

- 高流量支持:由第三方服务处理计数,无需担心服务器压力。

- 数据持久化:统计结果存储在 FiniCounter 的服务器上,不会因你的服务器重启而丢失。

- 无需后端代码:纯前端实现。

步骤

1. 引入 FiniCounter 统计代码

在你的网页 `<body>` 或 `<footer>` 中添加以下代码:

html

<!-- 引入 FiniCounter 统计脚本 -->

<script async src="https://finicounter.eu.org/finicounter.js"></script>

<!-- 显示访问量的容器,id 必须为 finicount_views -->

<span id="finicount_views"></span>

2. 在页面中显示访问量

在需要显示访问量的位置插入以下代码:

html

<div>总访问量:<span id="finicount_views"></span></div>

效果示例

页面加载后,访问量会自动显示为类似 `12,345,678` 的格式(数字会自动用逗号分隔)。

原理

1. 数据存储:

   - FiniCounter 的服务器会根据你的网站域名(`window.location.hostname`)自动统计访问量。

   - 数据持久化存储在 FiniCounter 的后端,你的服务器无需参与存储。

2. 计数逻辑:

   - 每次用户访问页面时,浏览器会向 FiniCounter 的服务器发送一个请求,服务器端会自动累加计数。

   - 高流量下,FiniCounter 的服务器会处理并发请求,确保计数准确。

3. 显示逻辑:

   - 前端通过 `fetch` 获取当前访问量,并渲染到页面的 `finicount_views` 容器中。

优势

- 完全托管:无需维护服务器或数据库。

- 高并发支持:FiniCounter 的服务端设计支持高流量场景。

- 数据安全:即使你的网站服务器崩溃或重启,统计结果仍会保留。

注意事项

1. 依赖第三方服务:

   - 统计结果依赖 FiniCounter 的服务器可用性,需确保其服务稳定。

   - 如果需要自托管,可以参考其开源代码([GitHub](https://github.com/Finisky/finicounter))部署到自己的服务器。

2. 数据粒度:

   - 该方案仅统计 总访问量,无法区分独立访客(UV)或记录详细访问路径。


替代方案(自托管)

如果你希望 完全自托管,且服务器支持简单的 API,可以使用以下方法:

步骤:

1. 创建计数 API:

   在你的服务器上部署一个简单的计数接口(如 Node.js):

   javascript

   // count.js (Node.js 示例)

   const express = require('express');

   const fs = require('fs');

   const app = express();

   app.use(express.json());

   app.post('/count', (req, res) => {

     let count = 0;

     try {

       count = parseInt(fs.readFileSync('count.txt', 'utf8')) || 0;

     } catch (err) {

       // 文件不存在时初始化为 0

     }

     fs.writeFileSync('count.txt', (count + 1).toString());

     res.send({ count: count + 1 });

   });

   app.listen(3000, () => {

     console.log('Count server running on port 3000');

   });

   

2. 前端代码:

   在页面中添加以下 JavaScript:

   html

   <script>

     async function updateCount() {

       try {

         const response = await fetch('/count', { method: 'POST' });

         const data = await response.json();

         document.getElementById('visitCount').textContent = data.count;

       } catch (error) {

         console.error('计数失败:', error);

       }

     }

     document.addEventListener('DOMContentLoaded', () => {

       updateCount();

     });

   </script>

   <div>总访问量:<span id="visitCount">0</span></div>

   

3. 数据持久化:

   - 计数结果存储在服务器的 `count.txt` 文件中,重启后仍会保留。

总结

- 推荐方案:使用 FiniCounter,完全符合你的需求(极简、高流量、不丢失)。

- 自托管方案:适合需要完全控制数据的场景,但需要部署简单后端服务。

如果需要进一步优化或自定义统计逻辑,可以结合后端代码实现更复杂的需求。

广告

全网电商优惠聚合平台

人工验券保障
已服务2,358,621人

立即解锁隐藏优惠

  • 每日人工筛选优质券
  • 独家合作商家福利
  • 全平台比价保障
次访问
实时流量统计