什么是 A/B 测试？
让我们从基础开始。使用 A/B 测试，您可以评估布局或内容的特定更改如何提高访客的参与度。请看此表单：
长格式
它有很多字段，有些人可能会因为需要输入太多信息而失去兴趣。或者，您可以添加相同表单的精简版本：
简化的表单，仅包含一个输入字段
现在，您可以根据转化率（即有多少人成功提交了表单）测试哪种表单效果更好。在最简单的表单中，A/B 测试会将一半流量重定向到版本 A（原始表单），将另一半重定向到新版本 B（精简表单）。为了确保一致性，访问者会获得一个小 cookie，用于识别所选的变体，因此即使他们刷新页面或稍后返回，他们也会继续看到相同的内容。
开始对您的页面进行 A/B 测试需要什么？
在你的网站上实施 A/B 测试有几个步骤：
设置内容模型
在深入实施之前，您需要弄清楚如何存储所用变体的内容。
将流量分成多个组
正如我上面提到的，简单的 A/B 测试有两种变体，但您可以添加更多变体。流量也不必均等分割。您可以决定仅针对一小部分流量、某些区域或时区运行 A/B 测试。
提供内容
在实施过程中，您需要编写经过测试的页面的正确版本。
跟踪结果
当访问者执行您所期望的操作时，您需要跟踪结果。
设置内容模型
内容模型设置在很大程度上取决于您如何构建网站内容。在我们的网站上，大多数页面都是使用从可重复使用的内容项中获取内容的组件构建的：
Kontent.ai
LinkedItems使用名为Content的单个元素将组件添加到每个页面：
带有转换为组件的链接项目的页面概览。
因此，要调整页面结构并创建原始页面的新变体 山东省手机号码列表 我们只需复制此元素。它是唯一影响页面视觉表现的元素。
但内容模型不仅仅涉及实际内容。我们还需要存储 A/B 测试所需的其他数据：
Google 优化 ID
A/B 测试标识符。您可以同时运行多个 A/B 测试。
原始页面引用
您要测试的页面
开始日期和时间
结束日期和时间
变体
变体 ID
这取决于所使用的跟踪系统。Google Optimize 从数字 1 开始。
变体内容（链接项目元素）
变体权重（文本元素）
确定应将多少流量引导至此变体。
Kontent.ai
Kontent.ai
将流量分成多个组
当内容模型准备就绪后，我们可以继续编写代码。首先，我们需要捕获对测试页面的请求并检查要显示哪个变体。为此，我们将使用Next.js 的 Middleware。
将文件添加middleware.ts到/src/pages：
export function middleware(request: NextRequest)
这只是中间件功能的框架。代码将由无服务器函数针对到达我们网站的每个请求执行。这就是我们想要的。我们希望能够根据 cookie（回访者）或根据权重（新访客）随机显示 A 或 B 变体。但是，有两个问题：
每一个页面都会执行中间件
我们必须在运行时检查给定的 URL 上是否有任何 A/B 测试正在运行
尽管这些问题可能不会让你感觉像是世界末日，但它们可能确实会给您的网站、使用的 API 或您的钱包带来灾难。
我们可以通过在构建之前预先生成 A/B 测试数据来解决这两个问题。在我之前的文章中，我解释了如何在 Next.js 中构建预构建脚本的机制，所以在这里我将首先展示完整的源代码，然后解释它的每个部分的作用。
这是预构建脚本的完整代码：
