使用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 项目中处理服务器逻辑。
开始
- 进入本地计算机上的 Pages 项目目录。
- 创建一个
/functions
目录。应用服务器逻辑将位于/functions
目录中。
添加中间件逻辑
页面函数(Pages Functions)具有实用功能,可以重复使用在路由处理程序之前和/或之后执行的逻辑块。这些函数称为 中间件。根据本指南,中间件可以让你在 Pages 项目的请求到达网站之前拦截它们。
在/functions
目录下创建一个_middleware.js
文件。
按照函数命名约定,_middleware.js
文件导出了一个单独的异步 onRequest
函数,该函数接受 request
、env
和 next
作为参数。
要设置 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。
部署应用程序后,请检查中间件功能:
- 登录 Cloudflare 仪表板 并选择你的账户。
- 在 “账户主页 “中,选择 “工作者和页面"。
- 在概览中,选择页面项目 > 设置> 功能> 配置。