在电子商务网站上拆分测试产品页面布局
电子商务中的 A/B 测试是找出最适合客户的方法的好方法，最终有 台湾电话号码几位 助于促进销售。也许您想测试哪些消息传递可以降低跳出率，或者您想尝试一下在不影响转化的情况下如何创新页面布局。
让我们通过使用边缘函数来使用浏览器 cookie 分割流量来对新产品页面布局进行 A/B 测试，同时保留面向用户的原始 URL。以下代码示例假设：
您的产品页面网址遵循格式 /product/{productId}/；
您的网站托管在 Netlify 上；
您正在使用任何前端框架（除了如上所述的 Next.js 之外）；
您已经构建了一个新的页面布局，您想针对现有布局进行测试。
在项目的根目录中，创建一个 netlify 目录（如果还没有），然后在其中创建一个 edge-functions 目录。在其中添加一个名为 abtest.ts 的新文件。您可以使用 JavaScript 或 TypeScript 编写 Edge Functions；在此示例中，我们将使用 TypeScript。
导出常量配置：配置= {
路径：“/产品/*”，
};
使用浏览器 cookie 将用户分配到测试存储桶
以下代码为使用名为layout_test的cookie将流量拆分到不同的产品页面布局奠定了基础。首先，使用 Netlify Context API — context.cookies.get() 查找 cookie。如果没有现有的 cookie，请使用 context.cookies.set() 分配一个，基于所需的权重，使用 0 到 1 之间的随机数。
这个基本示例演示了 50/50 权重与 JavaScript 生成的随机数的结合。您可能需要根据您的特定需求配置权重或随机数生成。
在同一 URL 上的不同页面布局之间拆分流量
接下来，使用layout_test cookie 来决定向客户提供哪种页面布局。鉴于假定的 URL 格式 (/product/{productId}/)，下面的代码示例包含一些用于从 URL 解析 ProductId 的代码，您的方法可能会有所不同。
如果找到值为 new 的 cookie，则返回一个新 URL，其中包含新布局页面的路径。这会在后台重写原始请求的 HTTP 响应，以便客户在原始 URL 上看到新的产品页面布局。
如果找到值为default的cookie，则返回空返回以绕过当前函数并继续请求链。这为用户提供原始且未经修改的 HTTP 响应。有关更多信息，请查看有关 URL 重写的 Netlify 文档。
为了跟踪客户在单击“添加到购物车”按钮时正在查看的产品页面布局，您需要向分析工具添加一些额外的信息。最终，根据您的架构和工具，有多种方法可以实现这一点，但如果您使用 Google Analytics (GA)，则可以使用客户端 JavaScript 来检查浏览器 cookie（例如，layout_test）并将相关信息传递给您的 GA 跟踪脚本。
只需一项边缘功能并在分析配置中添加一小部分，您就可以有效地将流量拆分到不同的页面布局进行 A/B 测试，而无需管理第三方工具的开销。使用上述方法，这种类型的对比测试也可以在从登陆页面到结帐的整个用户旅程中实施。