javascript - 如何使用全页缓存进行 A/B 测试？

Question

我正试图找到在当前正在构建的网站上执行一些 A/B 测试的最佳方法。该站点托管在 WPEngine 上并使用 Wordpress。他们使用全页缓存，无论如何都应该启用。 A/B 测试需要为每个变体使用不同的 HTML。由于更改的元素是站点的主菜单，因此使用 AJAX 和另一个 HTTP 请求动态加载它是不好的。

除了完全客户端的方法外，我想不出任何其他方法。我的想法是在页面中同时包含两个变体并只显示一个。

<script src="set-variant.js"></script> <!-- sets variant variable -->
<div id="variants">
<!-- <div id="variant1"></div> -->
<!-- <div id="variant2"></div> -->
</div>
<script>

if(variant==1){
   document.write(retrieveVariant1FromComment());
} else {
   document.write(retrieveVariant2FromComment());
}
</script>

它有效，但看起来很奇怪(我宁愿避免使用 document.write...)而且我不确定关于搜索引擎优化。

有谁知道在缓存页面时执行此操作的更好方法吗？有什么建议吗？

Answer 1

您使用的一般方法是在 Javascript 中呈现变体内容，这很常见，这也是 Optimizely 等工具的工作方式。 (可能涉及 AJAX，但它可能经过组织和优化，不会成为问题。)您可能只想使用 Optimizely 或类似的东西，这样做也可能允许您的组织在不更改应用程序代码的情况下进行 A/B 测试每次。

这里有两种不同的服务器端方法:

• 将一个变体放在不同的 URL 上(可能是在幕后共享代码，而不是实际复制整个页面的代码)并将应该看到该变体的用户重定向到另一个 URL。 Google Analytics 内容实验就是这样工作的。明显的缺点是用户会看到一个不同的 URL，并且可能会为其添加书签，因此您可能需要在实验结束很久之后从变体 URL 重定向回正常 URL。

• 如果您使用的缓存系统允许您指定缓存键，只需将变体添加到缓存键即可。页面将在每个变体第一次访问它时呈现，然后缓存。我不知道使用您的工具是否可行。

关于 SEO，Google does run Javascript , 所以不要显示您不想被搜索引擎索引的变体。 (我不知道 Google 的搜索引擎如何处理 Google Experiments。)