关于网站流量分析统计工具的探究

最近因为自己写了一些文章，发表了之后想看看自己网站有没有人来访问，就想起了给网站添加访客统计功能。wordpress 还有主题自带的都只统计了一个文章或者网站的访问次数以及打开次数，有时候更想知道别人是怎么找到我的网站的，也就是网站来源。那篇文章停留时间久一些，文章的实际质量在别人看到后觉得是否有用... 最终我决定给我站点添加数据分析工具。

目前我收集到的主要有以下几种

百度统计

百度统计主页 | 百度统计使用文档

百度统计主要是统计国内流量，以及百度搜索来源关键词流量的分析，可以从上面知道用户是根据哪些关键词从百度搜索来到你的网站的。它还有一个百度统计的公众号，可以随时在微信小程序上查看最近网站的访客流量，客观的说挺方便的也很直观，目前在使用本站也在使用它。

使用时可以按照官方文档安装。对于 Next.js 这类单页应用，普通的 hm.js 只会在首次加载时运行一次，后续客户端路由切换不会自动产生新的 PV。百度提供了两种处理办法：打开后台的单页应用数据统计，或者在代码中启用 UrlChangeTracker。两种办法只能选择一种，同时使用会造成重复统计。

我更倾向于把行为明确写进代码，避免部署结果依赖后台开关：

<script data-no-instant>
    var _hmt = _hmt || [];
    (function() {
        _hmt.push(['_requirePlugin', 'UrlChangeTracker', {
            shouldTrackUrlChange: function (newPath, oldPath) {
                return newPath && oldPath;
            }}
        ]);
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?{你的密钥}";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
    })();
</script>

以上代码推荐放在页面的 <head> 标签里面，个人经验不要放在<body> 里，以上代码采用创建一个script 标签插入到你页面上第一个script 标签的前面，实际并不会影响你网站的加载过程。

谷歌分析

谷歌分析主页

实际的操作体验谷歌分析相当复杂，它是面向全球流量统计的，如果你的网站主要是中文网站的话想对来说实际使用体验并不是很好。当然谷歌统计用来做大型网站的流量分析往往又很得心应手，只是感觉真需要很大的网站，面向多语言的，销售类广告类的。

个人觉得接入谷歌分析对于小型博客文章类的网站来说，最大的作用是用来反馈给谷歌站长后台做搜索优化处理，在谷歌分析里会统计谷歌自然搜索进入你的网站后，用户浏览文章的时间去向等，作用是了解你的文章是否搜索到了，以及文章在他人眼中的质量等。

Google Analytics 对出站点击的说明中，GA4 自动采集的 click 默认只统计跳往其他域名的链接，并不是站内所有点击。因此，page_view 有一千多次而 click 只有几十次，并不能说明埋点坏了。站内文章链接是否正常，更应该检查客户端跳转后有没有新的 page_view，以及其中的 page_location 和 page_referrer 是否已经更新。

Next.js 使用 History API 完成无刷新导航。Google Analytics 衡量单页应用的文档说明，可以在“增强型衡量 → 网页浏览”中启用“根据浏览器历史记录事件进行网页更改”，自动记录这些导航。若改成代码手动发送 page_view，就要关闭这项自动统计，否则同一次跳转会被计算两次。

微软Clarity

微软Clarity主页

微软的网站统计工具，有一个最大的优点，可以回放用户在访问到网站后实际操作的点击图，绘制用户在页面上点击的热力图，很直观的那种类似于看录像，但并不会让用户泄露个人信息，毕竟你也不知道谁是谁。

微软的统计更加专注于实际用户在浏览你的网站时候的使用质量，有时候你甚至能从热力图上发现你在页面上放置的某个按钮，大多数人可能会没有注意，点击不到等。

Microsoft Clarity 的录制概览说明了录制与页面访问的查看方式。Clarity 对单页应用的处理和我原先想象的不太一样：URL 发生变化时，它会结束当前页面段，再以同一个用户和会话启动下一个页面段。上传的数据里会包含新的 URL，并递增 Page Number，但播放器看到的未必是一段完全不断开的录像。排查用户去了哪里时，应该打开录制的更多详细信息查看 Page Visit，或者用 Visited URL 过滤目标路径，不能只盯着入口页画面。

Clarity 处理浏览器历史记录的源码显示，它已经监听 pushState、replaceState 和浏览器前进后退，不需要在每次 Next.js 路由变化时重复调用 init()。如果只是希望某个业务动作在时间线上更加醒目，可以按照 Clarity 客户端 API发送自定义事件，但自定义事件不会改变它切分页面段的方式。

在 Next.js 中统一接入

这三套工具都依赖浏览器脚本和客户端生命周期，我现在会直接把整个统计组件写成 Client Component，没有必要再为 Clarity 单独增加一层初始化组件。根布局仍然可以保持 Server Component，只在其中渲染这个客户端边界。

下面的示例保留了三个关键约束：开发环境不发送数据；百度使用 UrlChangeTracker，后台 SPA 开关保持关闭；Google 依赖后台的 History 自动统计，不再手动发送第二份 page_view。

'use client';

import Clarity from '@microsoft/clarity';
import Script from 'next/script';
import { useEffect } from 'react';

const GOOGLE_ANALYTICS_ID = 'G-XXXXXXXXXX';
const BAIDU_ANALYTICS_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const MICROSOFT_CLARITY_PROJECT_ID = 'xxxxxxxxxx';

export function SiteAnalytics() {
  useEffect(() => {
    if (process.env.NODE_ENV === 'development') return;

    Clarity.init(MICROSOFT_CLARITY_PROJECT_ID);
  }, []);

  if (process.env.NODE_ENV === 'development') return null;

  return (
    <>
      <Script
        id='google-analytics'
        src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
        strategy='afterInteractive'
      />
      <Script id='google-analytics-init' strategy='afterInteractive'>
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GOOGLE_ANALYTICS_ID}');
        `}
      </Script>
      <Script id='baidu-analytics-init' strategy='afterInteractive'>
        {`
          window._hmt = window._hmt || [];
          window._hmt.push([
            '_requirePlugin',
            'UrlChangeTracker',
            {
              shouldTrackUrlChange: function (newPath, oldPath) {
                return Boolean(newPath && oldPath);
              }
            }
          ]);
        `}
      </Script>
      <Script
        id='baidu-analytics'
        src={`https://hm.baidu.com/hm.js?${BAIDU_ANALYTICS_ID}`}
        strategy='afterInteractive'
      />
    </>
  );
}

实际验证时不要只看脚本是否下载成功，还要在浏览器 Network 中完成一次“首页 → 文章页”的站内跳转：

Google 应再次请求 google-analytics.com/g/collect，事件为 page_view，目标 URL 和来源 URL 都应正确。
百度应再次请求 hm.baidu.com/hm.gif。只有首次加载有请求，说明 SPA 路由没有接入成功。
Clarity 会继续请求 clarity.ms/collect，新页面数据中应出现目标 URL 和递增的页面编号。

Umami

Umami 主页

Umami 文档介绍的是一款用 Node.js 实现的轻量访客统计工具，开源免费，界面直观，也比较注重用户数据隐私。它可以自行搭建，主要关注网站整体浏览量、访客跳出率、访问时间、热门页面和基础设备信息，也可以把统计数据生成公开链接放在网站上。

但从实际使用上来说，对于站长优化网站的方向考虑，这些数据基本没有帮助，无法得知通过搜索引擎来到网站的关键词，热门文章为何热门的原因，作为站长的你无法从这些数据上得知。有用户行为检测，但你需要自行接入埋点，使用成本实际上非常高。

以上只是我个人看法。

Matomo

Matomo 开源项目

一篇 Matomo 落地实践展示了它对页面流量与访问路径的分析。Matomo 是一款用 PHP 实现的开源访客分析工具，对标 Google Analytics，收集的数据比较全面，用户进入页面后继续浏览了什么、访问持续多久等都可以看到。

但是可能就是因为对标了谷歌吧。我在网站上安装后，chrome浏览器提示有恶意代码，谷歌搜索也提示我网站存在恶意代码。

我尝试安装过它的开源版本，安装非常复杂，目前先记录一下，可能是我对它不太了解的原因吧。

总计

来回折腾了一圈，感觉最后万恶的百度统计，是目前我最常用的统计。它的电脑页面登陆很麻烦，每次打开都需要登陆，时不时的还要你发个验证码，但确实有用，在手机小程序上查看网站的访客数据也很方便。谷歌分析和微软Clarity更多的是作为辅助使用，谷歌分析主要是拿来查看谷歌搜索的关键词，微软Clarity看看热力图等。Umami 更注重用户隐私，在数据库中保存的数据也只记录页面访问数，非常简单高效，Matomo的话感觉确实有些‘重’量级了。

文章

编程笔记

AI Playground

部署记录

开发工具

系统折腾