使用 Cloudflare Workers 去除跟踪参数

使用 Cloudflare Workers 去除跟踪参数

跟踪参数如 utm_、gclid 和 fbclid URL 参数可被营销人员和企业用来收集在线活动和用户行为的数据与洞察。对于 Core Web Vitals 来说，它们可能是一场噩梦，因为它们往往会破坏缓存功能！如果您想在不影响分析功能的情况下清理这些跟踪参数，Cloudflare Workers 提供了一个轻量且可扩展的解决方案。

在这篇博文中，我将介绍一个简单的 Cloudflare Worker 脚本，用于从传入请求中去除跟踪参数，同时保留网站的核心功能。

跟踪参数的缓存问题

如果缓存配置不当，URL 参数会导致缓存未命中。 当缓存系统存储页面时，它们依赖 URL 作为缓存键。如果 URL 包含跟踪参数（如 ?utm_source=google 或 ?ref=partner），这些参数会使 URL 变得唯一，即使内容完全相同。如果没有正确的配置，这种唯一性会迫使服务器或边缘缓存绕过页面的缓存版本，导致缓存未命中。服务器不会提供已有的缓存内容，而是重新生成或获取内容，造成资源浪费和页面加载时间变长。

为什么不直接移除所有 URL 参数？并非所有的缓存未命中都是不好的——有些参数确实会改变页面内容，例如搜索查询（?q=laptops）或动态过滤器（?color=blue）。这些未命中确保用户看到准确的、个性化的结果。

关键在于区分影响内容的参数和不影响内容的参数。 

Cloudflare Workers

Cloudflare Workers 允许您在边缘拦截和处理请求，这使其成为在请求到达源服务器之前清理跟踪参数的理想工具。以下是实现方法：

代码

以下是去除常见跟踪参数的完整脚本：

addEventListener('fetch', event => {
  event.respondWith(fetchCleanUrl(event.request))
})

async function fetchCleanUrl(request) {
  const url = new URL(request.url)

  // Define a regex to match utm_, gclid, and fbclid query parameters
  const regex = /^(utm_|gad_|gclid|fbclid|srsltid|msclkid|dclid|referrer)/

  // Remove matching query parameters
  url.searchParams.forEach((value, key) => {
    if (regex.test(key)) {
      url.searchParams.delete(key)
    }
  })

  // Fetch the response from the modified URL
  const response = await fetch(url.toString(), request)

  return response
}

工作原理

• 拦截请求：addEventListener('fetch') 函数监听传入的 HTTP 请求。
• 解析 URL：URL API 解析请求 URL，使查询参数的操作变得简单。
• 识别跟踪参数：正则表达式（regex）匹配常见的跟踪参数，如 utm_、gclid、fbclid 等。
• 移除匹配项：searchParams.forEach() 方法遍历所有查询参数。任何匹配正则表达式的参数都会通过 url.searchParams.delete() 被移除。
• 获取干净的 URL：修改后的 URL 用于获取响应，然后将响应返回给用户。 

部署

1. 登录 Cloudflare：登录您的 Cloudflare 控制面板。
2. 创建 Worker：先不要导航到您的网站。导航到 Workers 部分并创建一个新的 Worker。
   
3. 命名 Worker 并部署。这一步看起来可能有点反直觉，但不用担心。只需命名您的空 'hello world' Worker 并点击部署。
     
4. 编辑您的 Worker。在下一页点击 Edit Code 
   
5. 粘贴脚本：将上述脚本复制粘贴到编辑器中，然后点击部署
   
6. 将 Worker 绑定到路由：现在返回并在 CloudFlare 中导航到您的网站。点击 Worker 路由，然后点击“Add Route”。选择新创建的 Worker 并将其应用到您的网站！
   

优势

• 改善缓存：更干净的 URL 确保更有效地利用边缘和浏览器缓存。
• 完全控制！虽然许多缓存解决方案都有自己的配置，但拥有完全控制权总是更好的。这样我们不会去除想要保留的参数，并确保移除那些干扰网站缓存的参数

自定义

您可以根据需要轻松修改正则表达式来包含或排除特定参数。例如，如果您想保留某些 utm_ 参数，只需从正则表达式中移除它们即可！

如何找到需要去除的 URL 参数

如果使用正确的工具，找出需要去除的 URL 参数非常简单。像 CoreDash 这样的 RUM 跟踪工具会全天候监控您的网站，并记录所有查询字符串及其对性能的影响。在 CoreDash 中，只需导航到 Largest Contentful Paint 并按查询字符串查看结果！