跳到主要内容

Web Analytics

Cloudflare Web Analytics 是免费的网站分析工具，提供隐私友好的流量分析，无需使用 Cloudflare DNS 或代理即可使用。

什么是 Web Analytics？​

特点​

特点说明
完全免费无限制使用
隐私友好不使用 Cookie，符合 GDPR
无需 DNS任何网站都可以使用
轻量级小于 1KB 的 JS 脚本
实时数据几分钟内显示数据
性能监控Core Web Vitals 指标

与 Google Analytics 对比​

功能Cloudflare AnalyticsGoogle Analytics
费用免费免费/付费
Cookie不使用使用
隐私合规默认合规需要配置
实时数据支持支持
用户追踪受限详细
自定义事件支持支持

启用 Web Analytics​

方式一：通过 Cloudflare 代理的网站​

如果你的网站已经使用 Cloudflare DNS 和代理：

  1. 登录 Cloudflare 控制台
  2. 选择你的域名
  3. 进入 "Analytics & Logs" → "Web Analytics"
  4. 点击 "Enable Web Analytics"

Cloudflare 会自动注入分析脚本，无需手动添加代码。

方式二：未使用 Cloudflare 代理的网站​

对于任何网站，都可以使用 Web Analytics：

  1. 登录 Cloudflare 控制台
  2. 进入 "Analytics & Logs" → "Web Analytics"
  3. 点击 "Add a site"
  4. 输入网站域名
  5. 复制 JS 代码片段

JS 代码片段：

<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
        data-cf-beacon='{"token": "YOUR_TOKEN"}'>
</script>
<!-- End Cloudflare Web Analytics -->
  1. 将代码添加到网站的每个页面，放在 </body> 标签之前

方式三：Cloudflare Pages​

对于 Cloudflare Pages 项目：

  1. 进入 "Workers & Pages"
  2. 选择你的 Pages 项目
  3. 进入 "Metrics" 标签
  4. 点击 "Enable" 启用 Web Analytics

Cloudflare 会在下次部署时自动添加脚本。

分析仪表板​

概览​

Web Analytics 仪表板显示：

流量指标：

  • Page Views：页面浏览量
  • Unique Visitors：独立访客数
  • Requests：请求数

性能指标：

  • Core Web Vitals
  • 页面加载时间
  • 服务器响应时间

地理分布：

  • 访客国家/地区
  • 流量来源

流量分析​

页面浏览量趋势：

查看不同时间段的流量变化：

  • 过去 24 小时
  • 过去 7 天
  • 过去 30 天
  • 自定义时间范围

热门页面：

查看访问量最高的页面：

路径浏览量占比
/10,00040%
/blog5,00020%
/about3,00012%

来源分析：

了解流量来源：

  • 直接访问
  • 搜索引擎
  • 社交媒体
  • 外部链接

性能分析​

Core Web Vitals：

指标说明良好阈值
LCP最大内容绘制< 2.5s
FID首次输入延迟< 100ms
CLS累积布局偏移< 0.1

页面加载时间：

  • DNS 查询时间
  • TCP 连接时间
  • TLS 握手时间
  • 服务器响应时间
  • 内容下载时间

地理分析​

查看访客地理分布：

  • 国家/地区排名
  • 城市分布
  • 各地区性能差异

设备分析​

了解访客设备：

设备类型占比
Mobile60%
Desktop35%
Tablet5%

浏览器分布：

  • Chrome
  • Safari
  • Firefox
  • Edge

操作系统分布：

  • Windows
  • macOS
  • iOS
  • Android

高级配置​

自定义事件​

追踪自定义用户行为：

// 发送自定义事件
beacon('custom-event', {
  action: 'click',
  category: 'button',
  label: 'signup',
});

示例：追踪按钮点击：

<button onclick="trackSignup()">Sign Up</button>

<script>
function trackSignup() {
  beacon('signup-click', {
    button: 'header-cta',
    page: window.location.pathname,
  });
}
</script>

排除特定页面​

不追踪特定页面：

  1. 进入 Web Analytics 设置
  2. 点击 "Manage site"
  3. 添加排除规则

排除规则示例：

  • /admin/*：排除管理后台
  • /api/*：排除 API 请求
  • /private/*：排除私有页面

排除 EU 访客​

为符合 GDPR，可以排除 EU 访客：

  1. 进入 "Manage site"
  2. 选择 "Enable, excluding visitor data in the EU"

与其他工具集成​

Google Analytics 并用​

可以同时使用 Cloudflare Analytics 和 Google Analytics：

<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
        data-cf-beacon='{"token": "YOUR_TOKEN"}'>
</script>

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

与 RUM 工具集成​

Cloudflare Analytics 可以与真实用户监控（RUM）工具配合使用：

  • Datadog RUM
  • New Relic Browser
  • Sentry Session Replay

API 访问​

GraphQL API​

通过 GraphQL API 获取分析数据：

curl -X POST https://api.cloudflare.com/client/v4/graphql \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "query": {
      viewer {
        zones(filter: {zoneTag: "ZONE_ID"}) {
          httpRequests1dGroups(
            orderBy: [date_ASC]
            limit: 7
            filter: {date_gt: "2024-01-01"}
          ) {
            dimensions {
              date
            }
            sum {
              pageViews
              requests
              visitors
            }
          }
        }
      }
    }
  }'

常用查询​

获取页面浏览量：

query {
  viewer {
    zones(filter: {zoneTag: "ZONE_ID"}) {
      httpRequests1dGroups(limit: 30) {
        dimensions {
          date
        }
        sum {
          pageViews
        }
      }
    }
  }
}

获取访客地理分布：

query {
  viewer {
    zones(filter: {zoneTag: "ZONE_ID"}) {
      httpRequests1dGroups(limit: 100) {
        dimensions {
          clientCountryName
        }
        sum {
          requests
        }
      }
    }
  }
}

隐私合规​

GDPR 合规​

Cloudflare Web Analytics 默认符合 GDPR：

  • 不使用 Cookie
  • 不追踪个人数据
  • 不跨站追踪
  • 数据匿名化

由于不使用 Cookie，通常不需要显示 Cookie 同意横幅（具体请咨询法律顾问）。

数据保留​

  • 数据保留 30 天
  • 免费计划无延长选项
  • 可通过 API 导出数据

最佳实践​

代码放置​

将分析代码放在 </body> 之前：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- 页面内容 -->
  
  <!-- Cloudflare Web Analytics -->
  <script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
          data-cf-beacon='{"token": "YOUR_TOKEN"}'>
  </script>
</body>
</html>

SPA 应用​

对于单页应用（SPA），需要特殊处理：

// React Router 示例
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function usePageViews() {
  const location = useLocation();

  useEffect(() => {
    // 触发页面浏览事件
    if (window.beacon) {
      window.beacon('pageview');
    }
  }, [location]);
}

function App() {
  usePageViews();
  return <Routes>...</Routes>;
}

性能优化​

  1. 使用 defer 属性：不阻塞页面渲染
  2. 异步加载：脚本异步加载
  3. 最小化自定义事件：避免过多事件影响性能

常见问题​

数据没有显示？​

检查：

  1. 脚本是否正确安装
  2. Token 是否正确
  3. 域名是否匹配
  4. 是否有流量

数据有延迟？​

数据通常在几分钟内显示，最多可能需要 5 分钟。

如何追踪用户 ID？​

Cloudflare Analytics 不支持追踪个人用户 ID，这是隐私设计的一部分。

如何导出数据？​

使用 GraphQL API 导出数据，或通过 Logpush 推送到外部存储。

参考资源​

下一步​

了解 Web Analytics 后，你可以：