由编辑控制的拆分测试内容

asikurrahman

要了解有关如何通过 Netlify 利用可组合架构的更多信息，请访问我们的可组合资源。

在之前的文章中，我演示了如何使用 Netlify Edge Functions 在同一个面向用户的 URL 上对不同的页面布局进行 A/B 测试。但是，如果您想在更细粒度的级别上运行 A/B 测试（例如更改英雄横幅的措辞），而无需创建新的页面布局并重写为不同的 URL，并确保您的作者能够控制内容，该怎么办？

虽然可以使用边缘函数通过手动重写代码中的内容来更新 A/B 测试的页面内容，但在拥有多个 体育新闻 891 团队的大型组织中，这可能更难以扩展。许多内容管理系统 (CMS) 提供商都提供将内容存储在 CMS 的多个区域（或空间）中的功能，您可以使用不同的 API 密钥访问这些区域。不同的空间可用于为功能分支发布、本地化、A/B 测试等准备内容。通过在 CMS 中提供专用的测试场地，开发人员可以专注于编写代码，而内容作者仍然可以控制内容。

在此代码示例中，我们将介绍如何使用 CMS 中单独区域的内容对主页英雄横幅上的消息进行 A/B 测试。以下假设：

您的主页是在构建时静态生成的；
您的网站在构建时从 CMS 获取数据；
您的主页位于您的网站的根目录（/）；
您的 CMS 能够将内容存储在单独的区域或空间中，可以使用不同的 API 密钥和访问令牌来获取这些内容；
您已经在 CMS 中配置了一个“测试”空间，以与生产空间相同的方式传递内容；
您的网站托管在 Netlify 上。
使用浏览器 cookie 将用户分配到测试存储桶
在项目的根目录下，创建一个 netlify 目录（如果尚未创建），然后在其中创建一个 edge-functions 目录。在其中添加一个名为 的新文件 abtest-homepage-hero.ts。您可以用 JavaScript 或 TypeScript 编写 Edge Functions；在此示例中，我们将使用 TypeScript。

添加以下代码，其中导出边缘函数和配置对象，配置为仅在主页上运行（/），并home_page_hero找到或设置名为的测试存储桶 cookie。有关更深入的解释，请参阅上一篇文章中更详细地描述的设置：如何拆分流量和在同一 URL 上对不同的页面布局进行 A/B 测试。

在运行时从 CMS 获取用于测试存储桶的数据
如果您已经在构建时从 CMS 获取数据以预生成网站页面，那么您将熟悉使用环境变量。为测试 CMS 空间添加必要的环境变量，以便您获取 A/B 测试的替代内容。下面的示例显示了四个环境变量，两个用于生产，两个用于测试空间。

Netlify 环境变量仪表板显示了所描述的四个环境变量

Netlify Edge Functions 可以访问Netlify 全局对象，您可以使用它在运行时管理环境变量。下面的代码演示了如何获取访问测试环境中的数据所需的两个环境变量，并提供了如何获取该测试内容的样板。您的方法将根据您使用的 CMS 而有所不同。

此外，代码现在演示了如果home_page_herocookie的值为，如何返回未修改的 HTTP 响应default。