Cloudflare 中文文档
Pages
编辑这个页面
跳转官方原文档
Set theme to dark (⇧+D)

使用Pages Functions进行 A/B 测试

在本指南中,你将学习如何在 Pages 项目中使用 Pages Functions 进行 A/B 测试。A/B 测试是一种用户体验研究方法,用于比较网页或应用程序的两个或多个版本。通过 A/B 测试,你可以向用户提供两个或更多版本的网页,并划分网站流量。

​​ 概览

为 A/B 测试配置不同版本的应用程序将取决于你的具体使用情况。对于所有开发人员来说,A/B 测试设置可以简化为几个有用的原则。

根据应用程序版本的数量(本指南使用两个版本),可以将用户分配到实验组。本指南中的实验组是基本路由 / 和测试路由 /test

为确保用户留在你指定的组中,你将在浏览器中设置并存储 cookie,并根据你设置的 cookie 值提供相应的路径。

​​ 设置页面功能

在你的项目中,你可以使用 Pages Functions 处理 A/B 测试的逻辑。Pages Functions 允许你在 Pages 项目中处理服务器逻辑。

开始

  1. 进入本地计算机上的 Pages 项目目录。
  2. 创建一个 /functions 目录。应用服务器逻辑将位于/functions目录中。

​​ 添加中间件逻辑

页面函数(Pages Functions)具有实用功能,可以重复使用在路由处理程序之前和/或之后执行的逻辑块。这些函数称为 中间件。根据本指南,中间件可以让你在 Pages 项目的请求到达网站之前拦截它们。

/functions目录下创建一个_middleware.js文件。

按照函数命名约定,_middleware.js 文件导出了一个单独的异步 onRequest 函数,该函数接受 requestenvnext 作为参数。

要设置 cookie,请创建 cookieName 变量并赋值。然后创建 newHomepagePathName 变量并将其赋值为 /test

​​ 设置条件逻辑

根据 URL 路径名,检查 cookie 值是否等于new。如果值为 new,则将提供 newHomepagePathName

如果没有 cookie 值,则必须指定一个。使用以下方法生成一个百分比(从 0 到 99):Math.floor(Math.random() * 100)。你的默认 cookie 版本值为 current

如果生成数字的百分比低于 50,则将 cookie 版本指定为 new。根据随机生成的百分比,设置 cookie 并提供资产。在条件块之后,将请求传递给 next()。这将把请求传递给 Pages。这将导致 50% 的用户获得 /test主页。

通过 env.ASSETS.fetch() 函数,你可以将用户发送到通过 url 参数定义的修改路径。env 是包含环境变量和绑定的对象。ASSETS 是默认的函数绑定,允许在函数和 Pages 的资产服务资源之间进行通信。fetch()调用 Pages 的资产服务资源,并向网站访问者返回资产(/test 主页)。

​​ 部署到 Cloudflare Pages

在项目中设置好 functions/_middleware.js 文件后,就可以使用 Pages 进行部署了。将项目变更推送到 GitHub/GitLab。

部署应用程序后,请检查中间件功能:

  1. 登录 Cloudflare 仪表板 并选择你的账户。
  2. 在 “账户主页 “中,选择 “工作者和页面"。
  3. 概览中,选择页面项目 > 设置> 功能> 配置