使用 WordPress 块编辑器创建 A/B 测试 – 完整指南
已发表: 2021-07-01如果您已经使用 WordPress 块编辑器创建了一个网站,那么是时候充分利用它并优化其转换了,您可以通过实施 A/B 测试来做到这一点。 在这篇文章中,我们将非常简要地了解 A/B 测试是什么以及它们为什么是必要的,以及如何借助 Nelio A/B 测试插件,您可以轻松地在任何 WordPress 网站上创建它们。
目录
- 什么是 Web 转换以及为什么要创建 A/B 测试?
- 创建 A/B 测试之前的步骤
- 在块编辑器中创建 A/B 测试
- 选择要创建的测试类型
- 定义测试变体
- 页面 A/B 测试
- 发布 A/B 测试
- 自定义帖子类型的 A/B 测试
- 标题 A/B 测试
- 主题的 A/B 测试
- 模板的 A/B 测试
- 菜单 A/B 测试
- 小部件的 A/B 测试
- CSS 的 A/B 测试
- WooCommerce 产品摘要 A/B 测试
- 定义您的转化目标和行动
- 我们如何在 Nelio A/B 测试中定义转换目标和操作?
- 细分您的流量
- 运行创建的测试并分析其进度
- 应用获胜的替代方案
- 您还在等什么来使用 WordPress 块编辑器创建您的 A/B 测试?
什么是 Web 转换以及为什么要创建 A/B 测试?
在在线营销中,更深入的两个主题是SEO优化和网络转化率优化。
网络转化是指用户在访问网站时预期采取的任何操作。 访问产品详细信息或定价页面、订阅时事通讯、联系我们、阅读文章等。转化率是相对于访问次数实现的转化次数。 也就是说,如果您每天总共有 100 次访问,其中两次最终购买了产品,那么您网站上的转化率为 2% 。
借助 Google Analytics,您可以随时衡量您的转化率,但帮助您提高转化率的最佳工具是 A/B 测试。 简而言之,A/B 测试包括基于改进的假设,提出对您的网站的更改(例如,重新分配登录页面以更好地显示某些相关信息,重新排列菜单以产生更多点击在我的产品页面上,或者对主题进行彻底的更改以使其更具吸引力),然后查看该更改是否比以前的更改效果更好。
从技术上讲,A/B 测试只不过是一个实验,它包括同时向不同的网站访问者群体展示同一网页的两个变体,并比较哪个变体产生更多的转化。

A/B 测试不是您随机执行的实验,它们应该是更雄心勃勃的过程的一部分,称为转换率优化或CRO 过程。
创建 A/B 测试之前的步骤
为了提高您的转化率,您需要知道的第一件事是您在哪里以及您想去哪里:定义您的业务目标、您的网站转换目标、您的 KPI 以及这些目标的指标。
要定义您的网站目标,您必须了解转换渠道,即访问者从他们登陆您的网站到成为客户的那一刻所做的事情。 通过这种方式,您可以优化漏斗中的每个不同阶段。
例如,对于我们的网站 Nelio Software,我们的目标是增加我们插件高级计划的订阅者。 当访问者在 Google 上搜索有关 A/B 测试的信息时,他们可能会首先了解 Nelio A/B 测试。 一旦他们登陆我们的网站,他们就会阅读我们产品文档中的一些文章以了解更多信息。 然后,如果访问者发现有趣的信息,他们会询问更详细的信息或从 WordPress 目录下载插件以测试该插件的免费版本。 最后,访问者订阅了我们的一项高级计划。

对于每个阶段,您必须定义要实现的不同转换目标。 例如,转换目标可能是对产品文档的最少访问次数。
使用您已有的工具(谷歌分析、热图、滚动图、点击图)分析并尝试了解正在发生的事情以及您在哪里失去了访问者。

尝试回答以下问题:
- 页面在内容和设计方面是否符合用户的期望?
- 我们如何改进它?
- 网站上的内容和优惠是否尽可能清晰?
- 我们可以让它更清晰或更简单吗?
- 是什么导致此页面犹豫或阻碍进程?
- 页面上有哪些内容不能帮助用户采取行动?
- 我们可以增加用户的积极性吗?
从这里,生成你的变化假设。 例如,在我们的 Nelio A/B 测试登录页面上,我们看到许多访问者只看到第一个折叠页面而没有向下滚动页面。 在讨论了各种替代方案后,我们决定重新考虑文本。 我们的假设如下:如果我们在网站的第一部分更改信息以引起好奇心而不是紧迫感,那么转化率应该会提高。
根据您的变更假设,您已经有了可以执行的新 A/B 测试想法。


在块编辑器中创建 A/B 测试
如果您想在 WordPress 网站上手动创建 A/B 测试,您可以使用 Google Analytics 进行转换分析。 但是,我们建议您使用市场上可用的工具之一。 特别是,我们建议使用 Nelio A/B 测试(免费和高级版本,每月 29 欧元起),因为它是一个原生 WordPress 插件,因此它与块编辑器 100% 兼容,这意味着你可以无需学习或使用任何其他外部工具即可进行操作。
使用 Nelio A/B 测试,为任何 A/B 测试创建替代方案与在 WordPress 中创建任何页面、帖子、菜单、小部件等完全相同,而且它还节省了您必须将流量细分为的工作您的网站,并直接为您提供您正在寻找的指标和结果。
下面让我们看看使用 WordPress 块编辑器使用 Nelio A/B 测试创建 A/B 测试必须遵循的不同步骤:
- 选择要创建的测试类型
- 定义测试变体
- 定义转化目标和行动
- 定义要分析的细分(如果有)
- 运行测试并分析您的进度
- 应用获胜的变体并使其永久化
选择要创建的测试类型
创建页面的 A/B 测试与创建导航菜单的 A/B 测试不同。 变体的创建会有所不同,但使用像 Nelio A/B 测试这样的工具的最大优势在于它会引导您完成 WordPress 本身的过程,使其完全直观和直接。
您应该做的第一件事是选择您想要创建的 A/B 测试类型,它为您提供了多种可供选择的元素:

选择测试类型后,您将看到创建测试变体与创建任何 WordPress 元素时完全相同。
定义测试变体
对于您选择的测试类型,您必须选择要测试的元素并定义其变体。 让我们看一个例子……
页面 A/B 测试
最近,为了增加我们的 Nelio Content 产品的销量,我们决定对其定价页面进行 A/B 测试。 特别是,我们想分析不同计划的哪种颜色组合可以为我们带来最多的收入。

除了原始版本之外,我们决定使用这些颜色组合创建另外两个变体:

在第一个变体中,我们决定以今年非常流行的柔和色彩来展示计划。

在第二个变体中,如上图所示,我们只想突出显示标准计划。
我们如何使用 Nelio A/B 测试创建这个测试? 选择要执行页面测试后,第一件事是命名您的测试并选择您要测试的页面。

您可以使用下拉选择器选择测试页面。 如果页面不存在,您可以通过键入其标题、URL 或标识符来搜索它。 我们将此页面称为控制页面或控制版本。
接下来,您可以创建一个或多个变体(您可以命名)。 默认情况下,每个变体都是您之前选择的控制页面的精确副本。 单击变体的编辑链接,您将拥有您已经知道的 WordPress 块编辑器,能够进行您想要的所有更改。

根据需要在变体页面上添加、修改和删除您想要的块和模式。 如您所见,您将使用与创建控制页面相同的编辑器,这意味着您可以完全控制您随意调整变体。 但是请注意,在变体版本的右侧边栏中,您会看到您正在编辑的页面是 A/B 测试的一部分:

发布 A/B 测试
为帖子创建 A/B 测试与为页面创建 A/B 测试非常相似。 选择要创建帖子测试后,选择要测试的原始帖子的下拉列表将显示已发布帖子的列表。 您还可以通过键入其标题、URL 或标识符来搜索条目。

其余的过程与上一个完全相同。

自定义帖子类型的 A/B 测试
如果您想要创建一种不同于页面和帖子的自定义帖子类型的 A/B 测试,例如您在网站上创建的课程、常见问题解答等,您也可以使用 Nelio A/ B 测试。 您只需选择要执行此类测试,现在选择器将允许您首先选择所需的自定义帖子类型,然后选择要测试的特定内容。

标题 A/B 测试
如果您想创建更具吸引力的标题,Nelio A/B 测试让这一切变得超级简单。 您可以测试帖子标题、摘录和特色图片的不同版本,并找出哪种组合能吸引更多读者。
要使用 Nelio A/B 测试执行标题测试,您无需进入块编辑器。 该插件本身允许您直接在测试版本中执行此操作:

选择您要测试其标题的帖子并创建一个或多个变体:

主题的 A/B 测试
如果在分析您的网站后,您的假设是您的网站需要更彻底的改变,那么改变主题可能是一种替代方法。 使用 Nelio A/B 测试创建主题测试非常简单。 您只需要在您的 WordPress 中安装您想要测试的主题并在主题的 A/B 测试中选择它们。

模板的 A/B 测试
您可以尝试为网站上的某些页面创建不同的模板,而不是更改网站的主题。 使用块编辑器预先设计它们,然后使用它们执行 A/B 测试。

与往常一样,在使用特定模板的所有页面上选择要用作模板变体的不同模板变体一样简单。
菜单 A/B 测试
创建菜单的 A/B 测试就像选择您当前拥有的菜单之一并创建所需的变体一样简单。

要修改变体,您只需单击链接即可以与编辑任何传统菜单相同的方式编辑和修改菜单。 创建后,您已经可以将其作为此测试的变体使用。

通过根据需要更改元素来修改菜单结构,并在准备好后返回测试。
小部件的 A/B 测试
如果您需要在 WordPress 中创建小部件测试,则在选择要创建小部件测试后,您只需指明新小部件变体的名称并单击“编辑”链接。

编辑变体时,Nelio 使用 WordPress 自己的小部件编辑器和一些额外的控件。 根据需要添加、删除和排序变体小部件,然后返回测试:

CSS 的 A/B 测试
如果您想测试不同版本的 CSS 样式规则并衡量哪一个最能实现您的目标,您可以选择创建 CSS 测试。 与小部件的情况一样,您只需输入新变体的名称并单击编辑链接。 在这种情况下,将打开一个编辑器供您添加所需的 CSS 样式,同时实时预览它们的效果:

定义好新规则后,单击发布并创建测试的 CSS 变体。
WooCommerce 产品摘要 A/B 测试
最后,WooCommerce 产品摘要 A/B 测试是特定于 WooCommerce 的测试,其中测试了名称、简短描述和产品图像的不同组合,目的是发现其中哪些产品获得了最多的购买该产品。 创建这种类型的测试的方法与我们之前看到的头条新闻非常相似。
如果您选择创建此类型的测试,Nelio A/B 测试将在下拉列表中显示您可用的产品,您只需在测试编辑器。 您无需去编辑产品。

定义您的转化目标和行动
在定义了测试的变体之后,下一步是定义测试的转换目标。 也就是说,你测试的目的是什么? 例如,您的目标可能是获得更多销售额、更多订阅者或更多访问定价页面。 无论您的目标是什么,当访问者执行某些操作时,它们都会得到满足。 例如,您可能想考虑当用户在您的网站上提交订阅表单或单击定价页面上的“订阅”按钮时,您获得了新订阅者。
我们如何在 Nelio A/B 测试中定义转换目标和操作?
在转化目标和操作部分,您可以通过单击+ 新链接添加任意数量的目标,并且可以选择为其添加名称。 Nelio A/B 测试将向您展示每种变体对您定义的每个目标的有效性的信息。

对于您定义的每个目标,您都有不同类型的转化操作来跟踪访问者。 例如,您可以监控他们何时访问某个页面、何时单击您网站的某个元素或何时提交联系表。 单击您感兴趣的操作按钮,并为每种类型的操作定义其自己的配置参数。
在 Nelio Content 定价页面上的测试示例中,我们定义了要在测试中衡量的 4 个目标:
- 单击任何计划的按钮。
- 单击基本计划的按钮。
- 单击标准计划的按钮。
- 单击 Plus 计划按钮。

细分您的流量
一些 A/B 测试工具的有趣功能之一是您可以细分流量。 也就是说,您可以设置只有某些访问者参与测试。 例如,按国家、时间、语言、浏览器、设备等。如果您想了解更多有关如何使用 Nelio A/B 测试实现流量分割的详细信息,Antonio 在本文中为您详细解释。
运行创建的测试并分析其进度
就是这样,现在您只需按下按钮即可开始测试并分析其进度。 Nelio A/B 测试将负责拆分您的流量,以便每个访问者只能看到您创建的一个变体并跟踪他们的行为。 使用 Nelio A/B 测试时,您不必担心需要运行测试多长时间或控制数据的统计置信度,因为插件会处理这些问题。 只需查看对您最重要的数据:转化总数和每个测试变体的访问次数。 您还可以看到每个变体相对于原始版本的改进百分比。
例如,在运行 Nelio Content 定价页面测试 1 个月零 9 天后,我们已经以几乎 100% 的置信度取得了具有统计意义的结果。 而且,从第一个目标(包括测量在定价表计划的任何按钮上进行的点击)开始,我们得到以下结果:

在这种情况下,正如您在结果图像中看到的那样,它们表明第二个变体,即替代 C,是比原始版本多获得近 130% 的点击次数的变体。 相比之下,以柔和颜色显示计划的变体要差 25.5%。 如果我们只有这个目标的测试,替代 C 我们看到它已经取得了压倒性的结果。
以类似的方式,我们分析了我们为自己设定的每个目标,并查看了我们从 A/B 测试中获得的结果,我们得出的结论是版本 C,它清楚地突出了带有强调色的标准计划,比变体 A 和 B 工作得更好。
应用获胜的替代方案
最后,就像上面示例中的情况一样,如果您获得了测试的获胜变体,Nelio A/B 测试允许您将该变体应用为您网站上的最终版本。 这是 Nelio A/B 测试作为原生 WordPress 插件的另一个巨大优势,应用获胜的替代方案只需要单击Apply 。

瞧,现在您有了一个新的网站设计,其中包含经过验证的数据,比以前的更好。
您还在等什么来使用 WordPress 块编辑器创建您的 A/B 测试?
有了这份关于如何在块编辑器中创建 A/B 测试的完整指南,您现在知道 Nelio A/B 测试使在 WordPress 中对任何东西进行 A/B 测试变得非常容易。 此外,由于使用了这样的工具,您不必担心拆分网站流量或分析访问者的行为。 Nelio A/B 测试以一种非常舒适的方式为您完成这一切。 我们和客户的经验告诉我们,A/B 测试可以帮助您更好地了解访问者希望在您的网站上找到什么,以及如何在不需要额外广告的情况下增加您的业务收入。
如果您发现本指南有用,请在您的社交网络上分享。 如果您有任何问题、意见或需要更多信息,请不要犹豫,在本文末尾留下您的评论。
Maarten Deckers 在 Unsplash 中的特色图片。