编程开发

#建站系列教程 #Google #站长工具

为你的个人网站接入免费的访客统计分析与用户行为追踪（Google Analytics/Mirosoft Clarity/Cloudflare Web Analytics）

2025-06-06 | 8 分钟 | 3758 字 | - 阅读 | - 评论

一文教你快速接入 Google Analytics、Microsoft Clarity 和 Cloudflare Web Analytics 三大免费网站流量统计工具，轻松实现访客分析与用户行为追踪，优化你的网站体验与运营策略。

文章目录

按照我们前面的建站系列教程操作，应该都已经有一个线上可访问的个人网站了。为了更好的了解都有哪些用户在访问我们的网站，如何使用我们的网站，我们可以集成一些免费的工具进行统计。

本文将介绍如何接入 Google Analytics/Mirosoft Clarity/Cloudflare Web Analytics 这三个平台的代码，流程很简单，都是将平台生成的代码复制粘贴到我们网站网页代码中即可。

👉 点击查看《建站系列教程》文章目录

在《建站系列教程》系列文章中，我们将详细介绍如何从0到1搭建自己的网站。以下是该系列文章的全部内容：

访客统计分析与用户行为追踪工具平台简介

免费的网站访客统计分析工具有很多，比如国内的百度统计，51LA，国外开源可自建的 Matomo，Umami 都很值得推荐。

但这里暂且只介绍 Google Analytics/Mirosoft Clarity/Cloudflare Web Analytics 的集成方法，主要是考虑到 Matomo/Umami 等平台免费额度基本不够用，自建的化又很耗机器资源（钱包不允许）。

对于特殊原因不想接入国内免费网站统计平台的用户，可能 Google Analytics/Mirosoft Clarity/Cloudflare Web Analytics 这三个是相对好的选择，但也个有缺点，比如 Google Analytics，虽然统计的信息很多，但我真的觉得看不懂，看了又好像没看，看完没任何感觉，但谷歌自家的，又是免费，接了不亏。Cloudflare 的统计比较简单，但直观，可以作为 Google Analytics 的补充。

其实我个人最喜欢、觉得最好用的是百度统计，信息很详细也很符合使用习惯，但百度统计的接入和使用不在本文讨论范围，后续单独介绍。51LA 是国内平台的次选，虽然网上对它的风评不好，但我个人没有遇到过不好的体验，免费额度足够支持月入 3 万的流量。

百度统计好用，但热力图只能免费建 3 个，使用 Mirosoft Clarity 可以很好的解决这个痛点，不仅有免费的热力图统计，还有用户的行为视频录制，可以看到用户在自己的网站上是如何操作的，这对优化网站页面和用户体验来说可以说是必接。

接下来正式进入本文主题。

Google Analytics 4（GA4）接入网站图文教程

本结教程将手把手教你如何创建 Google Analytics 跟踪 ID 并接入你的网站，用于统计用户访问数据。

什么是 Google Analytics？

Google Analytics（简称 GA）是 Google 提供的一款免费（基础版本）的网站流量分析工具，通过嵌入一段 JS 跟踪代码到你网站上工作，用于收集、分析访问你网站的用户行为数据。它帮助你了解：

实时数据查看当前有多少人在线、他们来自哪里、正在访问哪些页面
访客是谁（地区、设备、语言、访问来源）
访客从哪里来（自然搜索、广告、社交媒体等）
他们在你网站上做了什么（浏览了哪些页面、停留了多久、是否完成了目标）
是否完成了你设定的“转化”目标（例如购买、注册、填写表单等）

如何使用 Google Analytics？

1. 创建 Google Analytics（GA）账户与媒体资源（Property）

打开 Google Analytics 官网：https://analytics.google.com/

使用你的 Google 账号登录，打开【管理】界面

Google Analytics管理界面入口

在左下角点击齿轮图标 「管理」，进入设置页。

2. 创建账户

在左侧 「账户」 区域点击「创建账号」，输入账号名称（可随意填写，如 MyWebsite），然后点击「下一步」。

Google Analytics创建账户

💡 一个 Google Analytics 账户可以管理多个网站。

3. 创建媒体资源（Property）

Google Analytics创建媒体资源

输入媒体资源名称（推荐填写你的网站名称）
设置时区和货币（建议按你目标用户所在地区设置）
点击「下一步」

4. 填写公司信息

Google Analytics填写公司信息

行业类别：随便选（如“互联网和电信”）
公司规模：随便选
点击「下一步」

5. 选择业务目标

Google Analytics选择业务目标

这里会问你想通过 Google Analytics 实现什么目标。可任意选择

点击「创建」后，同意服务条款并勾选 ✅ 接受。

Google Analytics服务条款

6. 接受后进入设置数据流（Data Stream）

Google Analytics选择数据平台

数据平台选择 “网站”（Web），进入数据流设置界面。

Google Analytics设置数据流

填写你的网站网址，和数据流名称（可以随便填），然后点击右上角「创建并继续」，成功后会弹出「Google 代码网页标签安装」界面。

Google Analytics代码

7. 获取并安装跟踪代码

页面上自动展示一段 JavaScript 代码，形如：

<!-- Google tag (gtag.js) -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "G-XXXXXXXXXX");
</script>

复制该代码集成到你的网页代码中，凡是需要统计的页面都需要包含这段代码，比如在模板文件中统一引入。

8. 验证安装情况

代码集成完成后点击右上角「测试安装情况」，显示成功即可，需要等待一段时间才能有数据。

如果配置成功，回到主页你将看到如下界面

GA主页

打开你的网站页面，刷新一次，你将能在「报告」-「实时概览」中看到访问数据

Google Analytics实时概览

其他数据（如访客来源、页面浏览量、跳出率等）将在几小时内陆续出现，到这里 Google Analytics 的集成就完整了，简单吧！

Microsoft Clarity 使用教程：如何为网站集成 Clarity 用户行为追踪工具

网站统计不仅仅是知道有多少人访问，更重要的是——他们访问了哪些页面？点击了哪里？看了多久？有没有滑动页面？

相比传统访问统计工具，Microsoft Clarity 提供了免费、无采样的用户热图、点击追踪、滚动深度、录屏回放等功能，非常适合做用户体验优化。

本结内容将手把手教你如何为你的网站集成 Clarity，无论你的网站是纯 HTML、WordPress、Vue、React 都适用。

Clarity 是什么？

Microsoft Clarity 是微软推出的一款免费用户行为分析工具，功能类似于 Google Analytics，但更偏重于用户行为可视化，Clarity 可以让你“看到”用户在你网站上的真实操作。

免费提供了以下核心功能：

热力图（Heatmaps）：查看用户在页面上点击、滑动、停留的位置，可视化呈现用户注意力集中区域，支持桌面端、移动端热图对比。适合判断 CTA 按钮、广告位、内容分布是否合理
录屏回放（Session Recordings）：自动录制用户在你网站上的每一步操作，包括点击、滚动、停留，可以逐个回放访问记录，看到用户是如何“失败”“流失”的。适合发现用户卡顿点、退出原因、页面设计缺陷
漏斗分析 / 页面性能监控：统计哪些页面加载慢，哪些设备、浏览器出错多，哪个步骤流失率最高（可配合事件追踪）。适合产品经理、运营分析转化率，前端优化性能

最重要的是 —— 完全免费，无使用限制。

Clarity 与 Google Analytics 的区别？

功能	Microsoft Clarity	Google Analytics
热力图支持	✅ 有	❌ 无（需配合 Tag Manager 实现）
用户回放	✅ 内建	❌ 无（需额外插件或付费服务）
数据结构	简单直观，偏向可视化	结构复杂，偏向数据统计和广告优化
实时性	几分钟延迟	实时数据秒级响应
隐私合规	自动处理隐私字段，合规无忧	需开发者额外设置遮挡敏感内容
价格	✅ 完全免费	✅ 免费（但部分高级功能付费）