如何在 WordPress 中使用 Elementor 进行 A/B 测试(以及为什么要这样做)

已发表: 2021-04-01

当您设计网站时,您的目的是:销售产品、推广服务或引起读者的任何回应或行动。 如果您还选择了 Elementor 插件作为页面构建器来在 WordPress 中创建您的网站,那是因为您知道设计很重要,并且您希望它具有吸引力和现代感。 今天我们将了解如何在 Elementor 的网站上创建 A/B 测试。

即使你在页面设计中使用 Elementor,你怎么知道你的精致品味是否真的会给你带来最好的结果? 您不是您自己的客户,他们的意见和品味可能与您有很大不同。 凭直觉行事可能非常浪漫,但如果您希望改善用户体验并增加转化率,也就是说,让您的读者采取与您的目标一致的任何行动(购买、填写表格、与您联系等) ,最好的选择是在您的网站上执行 A/B 测试。

目录

  • 什么是 A/B 测试?
  • 转化率优化
    • 第 1 步:定义你的目标
    • 第 2 步:分析您的网站
    • 第 3 步:创建假设
    • 第 4 步:生成测试想法
    • 第 5 步:创建和运行 A/B 测试
  • 在 Elementor 中创建 A/B 测试
    • 选择要创建的测试类型
    • 定义测试变体
    • 定义您的转化目标和行动
    • 细分您的流量
    • 运行创建的测试并分析其进度
    • 应用获胜的替代方案
  • 立即开始在 Elementor 上执行 A/B 测试

什么是 A/B 测试?

您网站的访问者数量等于访问者执行某些所需操作的机会数量,也称为转换。 这是订阅、购买、填写表格等。

转化率是相对于访问次数实现的转化次数。 因此,如果您的网站每天总共有 100 次访问,其中两次最终购买了产品,那么您网站上的转化率为 2%

就像您可以通过分析收到电子邮件的人最终购买的百分比来衡量电子邮件活动的成功一样,在您的网站上,您有一个非常好的工具来提高其成功或转化率:A/B 测试

A/B 测试是优化网站转化的最佳工具。 简而言之,A/B 测试包括基于改进假设提出对您的网站的更改(例如,重新分配登录页面以更好地显示某些相关信息,重新排列菜单以获得更多点击在我的产品页面上或对主题进行彻底的更改以使其更具吸引力),然后查看该更改是否比以前的更改效果更好。

从技术上讲,A/B 测试只不过是一个实验,它包括同时向不同的网站访问者群体展示同一网页的两个变体,并比较哪个变体产生最多的转化。

ab测试
在最简单的形式中,A/B 测试建议将网站的流量随机分成两组,以便 50% 的访问者看到 A 设计,而另外 50% 看到 B 设计。 通过监控每组用户的反应,我们可以计算每组的转化率,如果两者之间存在统计学显着差异,则宣布获胜者设计。

A/B 测试很快出现的问题之一是您应该测试哪种类型的测试。 A/B 测试不是你随意定义的测试,没有任何意义; 它们应该是被称为转化率优化CRO 过程的更雄心勃勃的过程的一部分。

转化率优化

顾名思义,转化率优化或 CRO 是增加执行您想要的操作的网站访问者百分比的过程。 简而言之,这个过程包括以下步骤:

第 1 步:定义你的目标

任何 CRO 流程的第一步都是定义您的业务目标是什么,以及您网站在销售漏斗的不同阶段的不同转换目标。 例如,Nelio 的业务目标是增加我们高级计划的订阅者。 但是,访问者从访问我们的网站到成为客户的过程是怎样的? 这是我们的销售漏斗:

网站的销售漏斗
定义网站的销售漏斗。

如果我们的业务目标是增加我们高级计划的订阅者,潜在客户或潜在客户可能会在他们在 Google 或 WordPress 插件目录中搜索 A/B 测试解决方案时首先了解 Nelio A/B 测试。 我们网站的访问者可能会阅读我们文档中的一些文章,以了解更多关于我们产品的信息。 如果他们喜欢这些页面上的内容,他们将访问我们的定价页面。 此时,我们网站的转化目标可能是访问定价页面,而我们的目标指标可能是每月获得 2,000 次访问该页面。

然后,如果潜在客户发现有趣的信息,他们会询问更详细的信息或从 WordPress 目录下载插件以测试我们提供的免费版本。 第二个转换目标是:访问者填写我们的联系表。 该指标将是收到的联系表格的数量,我们可以用某个值定义我们的每月目标。 或者也可以是我们插件的下载。 等等。

最后,潜在客户订阅了我们的一项高级计划。 在这种情况下,我们的转换目标显然会涉及购买订阅计划。 而且由于我们业务的目的是发展,所以我们可以在我们拥有的不同计划之间分解这个目标。

如您所见,第一步包括分析销售漏斗,通过建立指标来定义我们的转化目标。

第 2 步:分析您的网站

在这个重要的初步步骤之后,您应该开始寻找有关您网站当前情况以及您可以采取行动的数据。 确定您当前在您的网站上遇到的问题。 这将帮助您产生关于您应该执行的 A/B 测试的想法。

我们如何收集数据? 最初,启发式地评估您在上一步中确定的每个页面。 问问自己,它们是否符合您制定的标准,看看您是否可以改善这些结果:

  • 页面在内容和设计方面是否符合用户的期望?
  • 我们如何改进它?
  • 网站上的内容和优惠是否尽可能清晰?
  • 我们可以让它更清晰或更简单吗?
  • 是什么导致此页面犹豫或阻碍进程?
  • 我们可以简化它吗?
  • 页面上有哪些内容不能帮助用户采取行动?
  • 我们可以增加用户的积极性吗?

您将获得可以改进的感兴趣领域的列表。 也可以使用 Google Analytics 来查找改进领域。 例如,GA 可以帮助您检测点击产品按钮的访问者的百分比,然后您可以将其与您的预期数字进行比较。 您还可以使用热图和滚动图来更好地了解 Web 用户的行为。

接下来,优先考虑您已确定的问题或改进领域,首先关注您认为会产生最大影响的那些(因为他们有更多的访问或因为这是一个重要问题)。 例如,在我们的分析中,我们发现需要改进 Nelio A/B 测试产品页面。 我们希望增加访问我们定价页面的用户数量。 这是一个主要问题。

第 3 步:创建假设

在创建 A/B 测试之前,下一步是将先前确定的问题列表转换为一组假设。

例如,在我们的 Nelio A/B 测试登录页面上,我们看到许多访问者只看到第一个块而没有向下滚动页面。 在分析 web 的热图和滚动图后,我们可以看到这一点。 此外,只有 45% 的访问者访问了定价页面。

Nelio A/B 测试首页首折原版
Nelio A/B 测试主页第一折的原始版本。

鉴于这一事实,我们假设,通过在第一个折叠中使用更清晰的信息来引起好奇心而不是紧迫感,我们会让更多人对单击“立即开始”按钮感兴趣。 您可以对有序列表中的每个问题进行相同的练习。

第 4 步:生成测试想法

接下来,我们必须实施一个“引起好奇心”的新标题。 在我们的特殊情况下,我们决定使用以下颜色:红色还是蓝色? 方形还是圆形? 上或下? 测试您的 WordPress

Nelio A/B 测试登陆页面第一折的原始版本。
Nelio A/B 测试登陆页面的第一折变体。
Nelio A/B 测试登陆页面第一折的原始版本和变体之间的差异。

我们还决定更改标题下方的文字,如图所示。 我们的想法是检查人们是否更喜欢我们谈论他们的网站和目标而不是我们的产品。

第 5 步:创建和运行 A/B 测试

最后,正如您可能已经想象的那样,剩下的就是在您的网站上创建测试。 正如我们在开头提到的,A/B 测试只不过是一个实验,我们在其中创建一个页面的两个版本或变体(但它也可以是一个帖子、一个菜单、一个小部件、一个表单或任何其他我们的 WordPress 网站的元素)。 一旦测试运行,我们就可以拆分我们的访问者,这样大约一半的访问者总是看到变体 A,其余的将看到变体 B。

在定义 A/B 测试时,我们不仅要定义测试的变体(A/B 或多变量测试,如果是多变量测试),我们还必须定义我们的转换目标。 正如我们在前面的示例中看到的,我们的转换目标是计算对我们高级计划定价页面的访问次数。 此外,在 A/B 测试中,我们还可以对测试中的参与者进行细分,即指明我们希望哪些访问者参与测试。

运行测试后,您将查看其中一个变体是否是赢家,您将能够确定地将其应用为您网站上的最后一个变体,确保它在转换方面有所改进。

正如你可以想象的那样,优化网站转换的过程是连续的和周期性的。 永远不要停止进行 A/B 测试来改进您的网站。

在 Elementor 中创建 A/B 测试

您可以使用 Elementor 在 WordPress 网站上手动创建 A/B 测试,例如,使用 Google Analytics 进行转换分析。 但是,我们建议您使用市场上可用的工具之一,例如 Nelio A/B 测试(免费和高级版,每月 29 欧元起)、Convertize(高级版每月 49 美元起)、VWO(高级版)版本起价 199 美元/月)、Convert Expriences(高级版起价 699 美元/月)或 Optimizely(自定义价格,但起价约 800 美元/月)等,为您省去了细分流量的麻烦到您的网站,并直接为您提供您正在寻找的指标和结果。

让我们看看您可以使用 Elementor 使用 Nelio A/B 测试创建哪些类型的 A/B 测试,该工具的巨大优势在于它是一个原生 WordPress 插件。 事实上,您只需像任何其他插件一样在您的网站上安装 Nelio A/B 测试插件,一旦安装,您就可以开始使用它,而无需学习使用任何其他工具。

要遵循的步骤如下:

  • 选择要创建的测试类型
  • 定义测试变体,
  • 定义转化目标和行动
  • 或者,定义是否要应用分段
  • 运行测试并分析您的进度
  • 将获胜的备选方案应用为最终方案

选择要创建的测试类型

要创建任何类型的测试,首先要做的是从显示的列表中选择要创建的测试类型。

Nelio A/B 测试中的测试选择器。
Nelio A/B 测试中的测试选择器。

选择要创建的 A/B 测试类型后,您必须定义要在网站上运行的测试的主要特征。

定义测试变体

首先,对于它们中的每一个,您必须选择要测试的元素并定义其变体。

页面的 A/B 测试

让我们看一个非常简单的例子。 假设我们假设,使用 Elementor 页面上的新图像,我们会让更多人有兴趣了解有关该工具的更多信息,因此会单击号召性用语按钮。

Variante 1 de un test A/B
Variante 2 de un test A/B
更改 Elementor 页面中某个部分的图像。

选择我们要创建页面测试后,在 WordPress 编辑器中,您将看到必须编辑测试的页面。

为页面命名新的 A/B 测试
定义页面的新 A/B 测试。

只需将测试命名,在本例中为“测试不同的图像”,然后选择您要测试的页面(在我们的示例中为主页)。

选择要使用 Nelio A/B 测试进行测试的页面。
选择要使用 Nelio A/B 测试进行测试的页面。

接下来,您只需为其命名即可创建原始页面的变体“变体 B”。 如果需要,您可以通过单击“新建变体”按钮创建尽可能多的变体。 默认情况下,创建的每个变体都将是您之前选择的原始页面的精确副本。 单击其编辑链接进行修改。

在 A/B 测试中创建变体
在 A/B 测试中创建变体 B。

使用原生 WordPress 插件的优势在于,您可以使用通常用于创建页面的相同可视化编辑器直接修改 A/B 测试的变体。 在这种情况下,编辑器显然是 Elementor。 这意味着,单击编辑链接后,您将看到新变体已加载到 Elementor 中,您可以随意更改它。

使用 Elementor 修改 A/B 测试的变体
使用 Elementor 修改 A/B 测试的变体。

调整页面(在本例中,我将只更改图像)并将其保存为草稿:

使用 Elementor 将页面发布为草稿
使用 Elementor 将页面发布为草稿。

而已! 您已经创建了您的第一个变体!

帖子的 A/B 测试

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

选择要使用 Nelio A/B 测试进行测试的帖子。
选择要使用 Nelio A/B 测试进行测试的帖子。

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

自定义帖子类型的 A/B 测试

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

选择自定义帖子类型以使用 Nelio A/B 测试进行测试。
选择自定义帖子类型以使用 Nelio A/B 测试进行测试。

测试标题的 A/B

如果在分析您的网站时,您发现很难让读者阅读您网站的内容,可能是因为标题不太吸引人。 一个非常有趣的测试是标题测试。 也就是说,尝试不同版本的帖子标题、摘录和特色图片,找出哪种组合能吸引更多读者。

要执行此类测试,使用 Nelio A/B 测试,您无需使用 Elementor 编辑此信息。 该插件本身允许您在编辑测试时直接执行此操作。 选择您要创建新的标题测试后,Nelio A/B 测试会向您显示您博客上的帖子的标题。

使用 Nelio A/B 测试命名标题 A/B 测试。
使用 Nelio A/B 测试定义标题 A/B 测试。

您选择要测试其标题的帖子并创建所需的变体,甚至无需编辑帖子。

使用 Nelio A/B 测试定义标题 A/B 测试的变体。
使用 Nelio A/B 测试定义标题 A/B 测试的变体。

WooCommerce 产品摘要的 A/B 测试

WooCommerce 产品摘要 A/B 测试是一种特定类型的 WooCommerce 测试,其中测试名称、简短描述和产品图像的不同组合,目的是发现哪些人获得了更多对该产品的购买。 创建这种类型的测试的方法与我们上面看到的标题非常相似。

如果您选择创建此类型的测试,Nelio A/B 测试将在下拉列表中显示您可用的产品,您只需在测试编辑器。 您不必编辑产品。

使用 Nelio A/B 测试定义 woo-commerce 产品摘要的 A/B 测试
使用 Nelio A/B 测试定义 woo-commerce 产品摘要的 A/B 测试

主题 A/B 测试

如果在分析您的网站后,您的假设是您的网站需要进行更彻底的更改,那么您可能需要更改主题。 但在深入研究之前,请记住,创建一个 A/B 测试,您可以使用数据检查哪个主题更好。

使用 Nelio A/B 测试可以轻松创建主题测试。 您应该只在 WordPress 上安装要测试的主题,并在 A/B 主题测试中选择它们。

使用 Nelio A/B 测试在 A/B 测试中选择主题变体。
使用 Nelio A/B 测试在 A/B 测试中选择主题变体。

请记住,如果您使用 Elementor 拥有的页面已被完全自定义,则主题更改可能产生的影响将微乎其微。

模板的 A/B 测试

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

选择要使用 Nelio A/B 测试进行测试的模板变体。
选择要使用 Nelio A/B 测试进行测试的模板变体。

与往常一样,在使用特定模板的所有页面上选择要用作模板变体的不同模板变体一样简单。

菜单的 A/B 测试

使用 Elementor,您可以直接在 WordPress 中创建导航菜单结构,或者如果您使用 Elementor 的专业版,您还可以使用导航菜单小部件创建菜单。 如果您以传统方式创建它,创建 A/B 测试就像选择您当前拥有的菜单之一并创建所需的变体一样简单。

使用 Nelio A/B 测试创建新的菜单 A/B 测试。
使用 Nelio A/B 测试创建新的菜单 A/B 测试。

要修改变体,您只需单击编辑链接并以与编辑任何传统菜单相同的方式修改菜单。 创建后,它现在可以作为此测试的变体使用。

如果您使用 Elementor Pro 版本的导航菜单小部件创建了菜单,则测试的创建与创建小部件的 A/B 测试相同,如下所述。

小部件的 A/B 测试

如果您需要在 WordPress 中创建小部件测试(包括上面讨论的导​​航菜单),在选择要创建小部件测试后,您只需指明新小部件变体的名称并单击编辑链接。

使用 Nelio A/B 测试创建小部件 A/B 测试的变体。
使用 Nelio A/B 测试创建小部件 A/B 测试的变体。

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

使用 Nelio A/B 测试编辑 A/B 测试的变体小部件。
使用 Nelio A/B 测试编辑 A/B 测试的变体小部件。

CSS 的 A/B 测试

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

使用 Nelio A/B 测试编辑 CSS A/B 测试的变体。
使用 Nelio A/B 测试编辑 CSS A/B 测试的变体。

定义好新规则后,单击发布并创建测试的 CSS 变体。

定义您的转化目标和行动

在定义了测试的变体之后,让我们进行下一步:您创建的 A/B 测试是为了测试一些转化目标的想法而完成的,例如获得更多销售、更多订阅者或更多访问定价页面,等当访问者执行某些操作时,这些目标就会实现。 例如,当用户在您的网站上填写某个表格时,您可以获得更多订阅者,或者当用户点击按钮时,您可以获得更多访问定价页面等。

我们如何在 Nelio A/B 测试中定义转换目标和操作?

在“转化目标和操作”部分,您可以通过单击+New链接添加任意数量的目标,并且可以选择为其添加名称。 Nelio A/B 测试将向您展示每种变体对您已定义的每个目标的有效性的信息。

定义转化目标:增加对我的任何产品的兴趣。
定义转化目标:增加对我的任何产品的兴趣。

对于每个目标,您可以使用不同类型的转化操作来跟踪访问者。 例如,您可以监控他们何时访问某个页面、何时单击您网站的某个元素或何时提交联系表。 单击您感兴趣的操作按钮并进行设置。 例如,您可以点击页面访问转化操作并在其下拉表单中选择您的定价页面,或者选择表单提交并选择您要跟踪的表单等。

细分您的流量

许多 A/B 测试工具的有趣功能之一是您可以细分流量。 也就是说,您可以设置只有某些访问者参与测试。 例如,按国家、时间、语言、浏览器、设备等。如果您想了解更多关于如何使用 Nelio A/B 测试实现流量分割的详细信息,Antonio 在这篇文章中详细解释了它。

运行创建的测试并分析其进度

就是这样,现在您所要做的就是按下按钮开始测试并分析其进度。 使用上述工具时,您不必担心需要运行多长时间或控制数据的统计置信度。

使用 Nelio A/B 测试进行 A/B 测试的演变。
使用 Nelio A/B 测试进行 A/B 测试的演变。

您将能够看到每个变体页面的总转化次数和访问次数。 您还可以查看每个变体相对于原始版本的改进(或恶化)百分比。

应用获胜的替代方案

一段时间后,插件会告诉您哪个变体是最好的(当然,如果有一个比其他变体更好)。

A/B 测试结果的状态。
A/B 测试结果的状态。

一旦有了,剩下的就是让它成为确定的。 使用 Nelio A/B 测试,作为一个原生 WordPress 插件,应用获胜的变体只需要点击一个按钮Apply 。 就是这样! 无需再次重新创建获胜的变体——它已经在 WordPress 中了!

使用 Nelio A/B 测试进行 WooCommerce 产品摘要测试的结果。
使用 Nelio A/B 测试进行 WooCommerce 产品摘要测试的结果。

瞧,现在你有了一个新的网站设计,其中包含经过验证的数据,比以前的更好。

立即开始在 Elementor 上执行 A/B 测试

有了这份关于如何在 Elementor 中创建 A/B 测试的完整指南,您将完全有能力开始规划您自己的网站转换优化项目。 在提高网站的转化率方面,A/B 测试非常宝贵。 更重要的是,通过使用像 Nelio A/B 测试这样的工具,您可以减少在没有明确标准且仅基于您自己的直觉的情况下执行优化程序所涉及的许多风险。

如果您发现本指南有用,请在您的社交网络上分享,如果您有任何问题、意见或需要更多信息,请不要犹豫,在本文末尾留下您的评论。

Syd Wachs 在 Unsplash 上的特色图片