3

我和我的团队正在使用 Optimizely 进行 A/B 测试。通常，我们会创建复杂的变体，在其中更改页面的布局和行为。

最近，我们开始与一个客户合作，他的网站是基于 ReactJS 构建的。虽然我们只需要更改页面上的一些元素和布局的第一个 A/B 测试相当容易，但我们在第二个测试中面临挑战，我们需要添加一个应该影响其他元素行为的元素。

即，我们有一个产品页面，该页面具有带有 3 个下拉菜单的过滤器。我们需要再添加 1 个下拉列表，以便在更改 4 个中的任何一个的状态时，产品列表将根据所有这些的当前状态进行更改。

挑战在于我们需要在 ReactJS 应用程序的“外部”进行（不改变后端的实际应用程序代码），通过 Optimizely 注入 JavaScript/jQuery 代码。

所以问题是：有没有办法以某种方式使用 ReactJS 应用程序对象及其方法与应用程序外部注入的 JS/jQuery 代码？

我们的目标是以上述方式更改页面的行为，因此解决此问题的任何其他选项也将有所帮助。

PS 目前解决我们看到的问题的唯一方法是在 JS/jQuery 中完全重新创建过滤器，而不是使用当前的过滤器，这不是非常有效的解决方案。这就是为什么寻找更多的想法。

4

2 回答 2

1

您必须编写一些自定义代码。由于每个人的生态系统都如此不同，因此很难没有更多信息给您一个具体的答案。这里有几篇文章为 2017-03 年与 Optimizely/React 的联盟状态奠定了框架：

  1. Hijacking React Globals——我在 Clearhead 写的帖子
  2. 使用Optimizely 的 Activation函数在组件的生命周期内激活
  3. 在您的广告系列中设置一个窗口级别变量，例如window.variation = 'a' // or 'b'. 然后在您的代码中使用它来热交换组件 React.render(Components['Component'+(window.variation||'a')))

TLDR 很难修改 React 状态，除非你能以某种方式连接到内部。

-汤姆| 首席技术官@CROmetrics。过去 12 个月推出了约 75 个 React 测试。

于 2017-03-01T17:31:21.583 回答
1

有几种方法可以快速获得它。其中一些我将在下面描述。

  1. 如果您使用 Redux - 您可以在全局（= 窗口）中创建一个函数，该函数将调度指定的操作。在此处查看详细示例：https ://stackoverflow.com/a/41309189/7708957

  2. 如果您不使用 Redux（例如，您正在使用 React.js 开发小部件） - 您可以在 componentDidMount 中公开您的处理程序，并在 componentWillUnmount中销毁它们。

亲切的问候，丹尼斯

于 2017-03-14T13:12:48.380 回答