CN105740304A

CN105740304A - 可视化页面编辑方法、装置及a/b测试方法、装置

Info

Publication number: CN105740304A
Application number: CN201410773340.8A
Authority: CN
Inventors: 朱君标; 荆欣
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2014-12-12
Filing date: 2014-12-12
Publication date: 2016-07-06
Anticipated expiration: 2034-12-12
Also published as: CN105740304B

Abstract

本申请实施例公开了一种可视化页面编辑方法、装置及A/B测试方法、装置。通过将页面分为两部分，在第一部分中包含视图层，在第二部分中包含业务逻辑层，并将第一部分置于第二部分的内联框架(iframe)中，由第一部分获取用户编辑页面的操作，将操作信息传输至第二部分，由第二部分对操作信息进行处理，向第一步返回视图层渲染信息，完成页面的可视化编辑，从而避免因为被编辑页面的不确定性，在某个不相关的脚本出问题时导致整个页面编辑功能不可用。同时，基于页面的可视化编辑，在得到控制页面后，使用可视化编辑得到测试页面，进行A/B测试，相比传统的A/B测试，能够大大降低了A/B测试难度，提高A/B测试效率。

Description

可视化页面编辑方法、装置及A/B测试方法、装置

技术领域

本发明涉及网站测试技术领域，尤其涉及一种可视化页面编辑方法、装置及A/B测试方法、装置。

背景技术

网站设计中，经常会面临多个设计方案的选择，例如页面中标题使用长标题还是短标题，图片使用大图片还是小图片，按钮使用红色还是蓝色等。A/B测试便是进行Web测试，用于比较和选择设计方案优劣的方法。

在Web设计的A/B测试中，首先需要建立一个测试页面(variationpage)，这个页面可能在标题字体、背景颜色或者措辞等方面与控制页面(controlpage)有所不同，然后让一部分用户使用测试页面，另一部分用户使用控制页面，记录下用户的使用情况，看哪个页面设计方案更符合设计目标。因此要实现A/B测试，需要制作两个(或多个)不同的页面版本并部署，然后收集用户使用数据，再分析数据，得出结果。

然而A/B测试为单变量测试，亦即每次A/B测试时只针对某一个变量的变化比较设计方案的优劣，以避免多个变量之间的相互干扰。在每次进行A/B测试时，两个设计方案应当基本是相同的，只是某一个地方有所不同，例如某处排版、图片、颜色等。如果要测试不同变量变化的影响，则需要进行多次A/B测试、制作多个页面，如果每个页面都要重新制作生成，将会耗费很多人力物力。

发明内容

为克服相关技术中A/B测试效率低的问题，本申请提供一种可视化页面编辑方法、装置及A/B测试、装置。

根据本申请实施例的第一方面，提供一种可视化页面编辑方法，包括：

将被编辑页面分为第一部分和第二部分，所述第一部分包含所述被编辑页面的视图层，所述第二部分包含所述被编辑页面的业务逻辑层，所述第一部分设置于所述第二部分的内联框架中；

所述第一部分获取针对节点的操作信息，所述操作信息包括选中信息和编辑操作信息，将所述操作信息传输至所述第二部分；

所述第二部分接收所述操作信息，并根据所述操作信息向所述第一部分返回对应的视图渲染信息；

所述第一部分根据所述视图渲染信息重新渲染所述被编辑页面的视图层。

可选的，所述的可视化页面编辑方法，还包括：

所述第一部分获取到节点的选中信息时，显示对应于所述节点的操作选项列表；

获取用户针对所述操作选择列表的操作选项信息后，显示与所述操作选项信息对应的节点编辑视图，通过所述节点编辑视图获取针对所述节点的编辑操作信息。

可选的，所述的可视化页面编辑方法中，所述第一部分获取针对节点的单次操作信息时，保存所述单次操作信息；当所述第一部分获取到操作完成信息时，将所有单次操作信息传输至所述第二部分。

相应于本申请实施例的第一方面，根据本申请实施例的第二方面，提供一种可视化页面编辑装置，包括：

页面切分单元，用于将被编辑页面分为第一部分和第二部分，所述第一部分包含所述被编辑页面的视图层，所述第二部分包含所述被编辑页面的业务逻辑层，所述第一部分设置于所述第二部分的内联框架中；

第一控制单元，用于在所述第一部分中获取针对节点的操作信息，所述操作信息包括选中信息和编辑操作信息，并将所述操作信息传输至所述第二部分；

第二控制单元，用于在所述第二部分中接收所述操作信息，并根据所述操作信息向所述第一部分返回对应的视图渲染信息；

渲染单元，用于在所述第一部分中根据所述视图渲染信息重新渲染所述被编辑页面的视图层。

可选的，所述的可视化页面编辑装置，还包括：

选项显示单元，用于当所述第一部分获取到节点的选中信息时，显示对应于所述节点的操作选项列表；

节点编辑视图显示单元，用于在所述第一部分获取用户针对所述操作选择列表的操作选项信息后，显示与所述操作选项信息对应的节点编辑视图，通过所述节点编辑视图获取针对所述节点的编辑操作信息。

可选的，所述的可视化页面编辑装置中，所述第一控制单元获取到针对节点的单次操作信息时，保存所述单次操作信息，当所述第一部分获取到操作完成信息时，将所有单次操作信息传输至所述第二部分。

根据本申请实施例的第三方面，提供一种使用所述可视化页面编辑方法的A/B测试方法，包括：

获取控制页面；

使用所述可视化页面编辑方法得到测试页面；

分流所述控制页面和测试页面；

获取用户在控制页面和对应的测试页面的点击信息；

根据所述点击信息发送打点信息至打点服务器；

根据所述打点服务器中的打点信息生成测试结果。

可选的，所述的A/B测试方法中，所述获取控制页面为根据用户输入的网页地址，抓取控制页面至本地。

可选的，所述的A/B测试方法，根据CookieID分流所述控制页面和测试页面。

可选的，所述的A/B测试方法，根据所述打点服务器中的打点信息生成热区图。

相应于本申请实施例的第三方面，根据本申请实施例的第四方面，提供一种使用所述可视化页面编辑装置的A/B测试装置，包括：

控制页面获取单元，用于获取控制页面；

测试页面获取单元，用于使用所述可视化页面编辑装置得到测试页面；

分流单元，用于分流所述控制页面和测试页面；

点击信息获取单元，用于获取用户在控制页面测试区域和对应的测试页面测试区域的点击信息；

打点发送单元，用于根据所述点击信息发送打点信息至打点服务器；

测试结果生成单元，用于根据所述打点服务器中的打点信息生成测试结果。

可选的，所述的A/B测试装置中，所述控制页面获取单元根据用户输入的网页地址，抓取控制页面至本地。

可选的，所述的A/B测试装置中，所述分流单元根据CookieID分流所述控制页面和测试页面。

可选的，所述的A/B测试装置中，所述测试结果生成单元根据所述打点服务器中的打点信息生成热区图。

本申请实施例提供的技术方案可以包括以下有益效果：通过将页面分为两部分，在第一部分中包含视图层，在第二部分中包含业务逻辑层，从而将视图层和业务逻辑层分离，并将第一部分置于第二部分的内联框架(iframe)中，由第一部分获取用户编辑页面的操作，将操作信息传输至第二部分，由第二部分对操作信息进行处理，向第一步返回视图层渲染信息，完成页面的可视化编辑，从而避免因为被编辑页面的不确定性，在某个不相关的脚本出问题时导致整个页面编辑功能不可用。同时，基于页面的可视化编辑，在得到控制页面(即原始页面)后，使用可视化编辑得到测试页面，将控制页面和测试页面分流，进行A/B测试，相比传统的A/B测试，降低了A/B测试难度，并大大降低了页面开发工作量，提高A/B测试效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请一示例性实施例示出的一种可视化页面编辑方法的流程示意图。

图2为本申请一示例性实施例示出的一种可视化页面编辑装置的框图。

图3为本申请一示例性实施例示出的一种A/B测试方法的流程示意图。

图4为本申请一示例性实施例示出的一种A/B测试装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

为了全面理解本申请，在以下详细描述中提到了众多具体的细节，但是本领域技术人员应该理解，本申请可以无需这些具体细节而实现。在其他实施例中，不详细描述公知的方法、过程、组件和电路，以免不必要地导致实施例模糊。

根据本申请实施例的第一方面，提供一种可视化页面编辑方法。图1为本申请一示例性实施例示出的一种可视化页面编辑方法的流程示意图，如图1所示，所述方法包括：

步骤S101，将被编辑页面分为第一部分和第二部分，所述第一部分包含所述被编辑页面的视图层，所述第二部分包含所述被编辑页面的业务逻辑层，所述第一部分设置于所述第二部分的内联框架中。

其中，将被编辑页面的视图层和业务逻辑层分开。所述第一部分包含所述视图层，所述视图层包括前端的HTML、XML、JSP和Applet等，所述视图层包括页面的完整DOM树，能够对DOM的节点进行定位，充当用户的操作接口，获取用户对页面的操作信息。所述第二部分包含所述业务逻辑层，所述业务逻辑层包括页面和后台数据库等的交互逻辑、数据处理逻辑和操作处理逻辑等。

其中，可以将所述视图层显示为可编辑视图，即对页面的每个可编辑节点(即DOM节点)，直接显示编辑窗口，用户可以直接对节点进行编辑，例如对某个按钮，修改按钮的标题文案、按钮的样式等。也可以将所述视图层显示为普通视图，即直接展示页面的效果，当用户点击某个节点，即选中某个节点时，所述第一部分获取针对该节点的选中信息，根据所述选中信息显示对应于所述节点的操作选项列表，然后获取用户针对所述操作选择列表的操作选项信息后，显示与所述操作选项信息对应的节点编辑窗口，通过所述节点编辑窗口获取针对所述节点的编辑操作信息。例如用户点击页面上的某个按钮后，浮现针对该按钮的操作选项列表，即对于该按钮的可编辑选项，例如“修改标题”、“修改样式”、“修改颜色”等；用户选择某个选项，即点击所述操作选项列表的某个选项后，例如用户选择了“修改标题”，则显示对应于该节点的修改标题的节点编辑窗口，用户通过该节点编辑窗口可以修改该按钮的标题，而所述第一部分获取用户通过该节点编辑窗口的编辑操作信息。通过显示操作选项列表可以方便用户有目的和针对性的编辑页面，并防止误编辑。

步骤S102，所述第一部分获取针对节点的操作信息，所述操作信息包括选中信息和编辑操作信息，将所述操作信息传输至所述第二部分。

步骤S103，所述第二部分接收所述操作信息，并根据所述操作信息向所述第一部分返回对应的视图渲染信息。

步骤S104，所述第一部分根据所述视图渲染信息重新渲染所述被编辑页面的视图层。

其中，所述第一部分获取针对节点的操作信息可以通过在所述第一部分中设置页面控制器实现，所述页面控制器使用Controller类实现，第一部分的页面控制器获取用户针对节点的操作信息，包括在视图层对节点的选中信息、在视图层对节点编辑操作信息或者通过节点编辑窗口对节点的编辑信息。第一部分的页面控制器将获取的操作信息，传输至第二部分。

其中，可以通过在所述第二部分设置的页面控制器来接收第一部分的页面控制器传输的操作信息，第二部分的业务逻辑根据第二部分的页面控制器接收的操作信息进行相关处理，得到对应的视图渲染信息，例如，接收到用户修改按钮标题的操作信息，第二部分相应地生成改变视图层对应按钮标题的视图渲染信息。然后再通过第二部分的页面控制器将所述视图渲染信息返回至第一部分。在所述第二部分中可以设置两个页面控制器，其中之一用于接收第一部分的页面控制器传输的操作信息，另外一个用户向第一部分返回视图渲染信息，也可以只设置一个页面控制器，由该页面控制器接收第一部分的页面控制器传输的操作信息并向第一部分返回视图渲染信息。

所述第一部分可以再通过其页面控制器接收所述视图渲染信息。在第一部分可以设置两个页面控制器，其中之一用于获取所述操作信息，并向第二部分用于接收所述操作信息的页面控制器传输所述操作信息，另外一个用于接收第二部分返回的视图渲染信息；也可以在第一部分只设置一个页面控制器，由该页面控制器获取所述操作信息，向第二部分传输所述操作信息，并接收第二部分返回的视图渲染信息。

第一部分通过页面控制器接收到所述视图渲染信息后，根据所述视图渲染信息重新渲染视图。

其中，对某个测试区域或节点，涉及到的修改操作可能不止一次，或者用户需要反复思索修改，如果每一次操作，所述第一部分便将操作信息利用页面控制器传输至第二部分，然后接收第二部分返回的视图渲染信息重新渲染，那么虽然用户可以看到当次修改的结果，但由于传输、渲染过程消耗时间和资源，会使页面编辑效率降低。因此，在一种可能的实施方式中，第一部分获取针对节点的单次操作信息时，保存所述单次操作信息，当第一部分获取到操作完成信息时，再将所有单次操作信息传输至第二部分，例如，向用户提供和显示操作确定按钮和操作提交按钮，当用户进行一次修改后，点击确定，则该次操作被保存，当多次修改完毕，用户点击操作提交按钮，则第一部分获取到获取操作完成信息，则被保存的所有单次操作信息传输至第二部分。从而避免对视图层进行多次渲染，提高页面编辑的效率。

相应于本申请实施例的第一方面，根据本申请实施例的第二方面，提供一种可视化页面编辑装置。图2为本申请一示例性实施例示出的一种可视化页面编辑装置的框图。如图2所示，所述装置包括：

页面切分单元U201，用于将被编辑页面分为第一部分和第二部分，所述第一部分包含所述被编辑页面的视图层，所述第二部分包含所述被编辑页面的业务逻辑层，所述第一部分设置于所述第二部分的内联框架中；

第一控制单元U202，用于在所述第一部分中获取针对节点的操作信息，所述操作信息包括选中信息和编辑操作信息，并将所述操作信息传输至所述第二部分；

第二控制单元U203，用于在所述第二部分中接收所述操作信息，并根据所述操作信息向所述第一部分返回对应的视图渲染信息；

渲染单元U204，用于在所述第一部分中根据所述视图渲染信息重新渲染所述被编辑页面的视图层。

其中，所述第一控制单元将所述操作信息传输至第二控制单元，并接收第二控制单元返回的视图渲染信息，所述渲染单元根据所述第一控制单元接收到的视图渲染信息重新渲染所述被编辑页面的视图层。所述第二控制单元接收所述第一控制单元传输来的操作信息，所述第二部分根据所述第二控制单元接收到才操作信息生成对应的视图渲染信息，所述第二控制单元将所述视图渲染信息返回至所述第一控制单元。

在一种可能的实施方式汇总，所述的可视化页面编辑装置，还可以包括：

其中，在一种可能的实施方式中，所述第一控制单元获取到针对节点的单次操作信息时，保存所述单次操作信息，当所述第一部分获取到操作完成信息时，将所有单次操作信息传输至所述第二部分。

根据本申请实施例的第三方面，提供一种A/B测试方法。图3为本申请一示例性实施例示出的一种A/B测试方法的流程示意图，如图3所示，所述方法包括：

步骤S301，获取控制页面；

步骤S302，使用所述可视化页面编辑方法得到测试页面；

步骤S303，分流所述控制页面和测试页面；

步骤S304，获取用户在控制页面和对应的测试页面的点击信息；

步骤S305，根据所述点击信息发送打点信息至打点服务器；

步骤S306，根据所述打点服务器中的打点信息生成测试结果。

其中，所述控制页面(controlpage)即原始的被测页面，所述原始页面可以为事先已准备好的页面，也可以根据输入的被测页面的网页地址，将网页地址对应的被测页面抓取至本地作为控制页面，抓取页面为获得页面的所有代码，例如通过PhantomJS(以WebKit为核心并提供JavaScript编程接口的无界面浏览器)技术将页面抓取到本地，以解决跨域获取页面资源访问没有权限的问题。

在获取控制页面后，使用可视化页面编辑方法编辑控制页面得到测试页面。将控制页面和测试页面分流，即将控制页面和测试页面展现给不同的用户。通常A/B测试的分流可以在前端即浏览客户端进行，也可以在服务器端进行。

分流可以按访问浏览客户端的人数平均分配，随机将访问浏览客户端的用户分为两部分，向一部分展示控制页面，向另一部分展示测试页面。也可以按照访问浏览客户端的CookieID来划分用户进行分流，例如根据CookieID的最后一位来划分，向CookieID的最后一位为单数的用户显示控制页面，向CookieID的最后一位为偶数的用户显示测试页面。由于CookieID一般不会发生变化，根据CookieID进行分流有利于保持展示的一致性，即对某个用户展示的为控制页面(或测试页面)，则一直展示控制页面(或测试页面)，不会因为刷新而发生变化。

分流之后，控制页面和测试页面会展示给不同的用户，然后获取用户对控制页面和测试页面点击信息。通常某次A/B测试中，获取用户对控制页面和测试页面中测试区域的点击信息即可，也可以获取用户对控制页面和测试页面的整体点击信息。

传统的A/B测试一般在服务器端分流，当用户的请求通过浏览客户端到达服务器时，服务器根据一定的规则，向不同的用户返回不同的页面。但该种方式下，数据记录由服务器进行，难以获取用户在控制页面和测试页面上的具体行为。因此在一种可能的实施方式中，在浏览客户端进行分流，并使用JavaScript记录用户在控制页面和测试页面的点击行为，记录点击行为对应的点击信息，根据所述点击信息生成打点信息，将所述打点信息发送至打点服务器记录并保存，通常所述打点信息包括当前A/B测试版本标识、点击的位置、点击时间戳(浏览客户端时间)、用户标识(例如CookieID)和用户浏览器信息等。

根据打点服务器中记录和保存的打点信息，可以根据A/B测试分析的需要生成测试结果，例如可以生成点击分布图。热区图通过不同颜色表示不同密度的区域，能够直观地显示大量用户对不同区域的喜好度，从而可以用于直观地显示用户对控制页面和测试页面的不同偏好，因此，根据打点服务器中的打点信息，在控制页面和测试页面上使用不同颜色标示不同点击密度的区域，生成控制页面和测试页面的热区图，有利于分析控制页面的变化是否可以达到预期的效果。

相应于本申请实施例的第三方面，根据本申请实施例的第四方面，提供一种A/B测试装置。图4为本申请一示例性实施例示出的一种A/B测试装置的框图。如图4所示，所述装置包括：

控制页面获取单元U401，用于获取控制页面；

测试页面获取单元U402，用于使用所述可视化页面编辑装置得到测试页面；

分流单元U403，用于分流所述控制页面和测试页面；

点击信息获取单元U404，用于获取用户在控制页面测试区域和对应的测试页面测试区域的点击信息；

打点发送单元U405，用于根据所述点击信息发送打点信息至打点服务器；

测试结果生成单元U406，用于根据所述打点服务器中的打点信息生成测试结果。

其中，在一种可能的实施方式中，所述控制页面获取单元根据用户输入的网页地址，抓取控制页面至本地。

其中，所述分流单元根据CookieID分流所述控制页面和测试页面，所述分流单元可以设置于A/B测试的浏览器客户端，也可以设置于A/B测试的服务器端。所述分流单元优选地设置于A/B测试的浏览器客户端，有利于使用JavaScript记录用户在控制页面和测试页面的点击行为。

其中，所述测试结果生成单元根据所述打点服务器中的打点信息生成热区图。

通过本申请实施例中方法实施例的描述，所属领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，并存储在一个存储介质中，包括若干指令用以使得一台智能设备执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：只读存储器(ROM)、随机存取存储器(RAM)、磁碟或者光盘等各种可以存储数据和程序代码的介质。

为了描述的方便，描述本申请实施例的装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者逆序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本申请的具体实施方式，使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims

1.一种可视化页面编辑方法，其特征在于，包括：

2.如权利要求1所述的可视化页面编辑方法，其特征在于，还包括：

3.根据权利要求1或2所述的可视化页面编辑方法，其特征在于，

所述第一部分获取针对节点的单次操作信息时，保存所述单次操作信息；

当所述第一部分获取到操作完成信息时，将所有单次操作信息传输至所述第二部分。

4.一种可视化页面编辑装置，其特征在于，包括：

5.如权利要求4所述的可视化页面编辑装置，其特征在于，还包括：

6.如权利要求4或5所述的可视化页面编辑装置，其特征在于，

所述第一控制单元获取到针对节点的单次操作信息时，保存所述单次操作信息，

7.一种使用权利要求1所述可视化页面编辑方法的A/B测试方法，其特征在于，包括：

获取控制页面；

使用所述可视化页面编辑方法得到测试页面；

分流所述控制页面和测试页面；

获取用户在控制页面和对应的测试页面的点击信息；

根据所述点击信息发送打点信息至打点服务器；

根据所述打点服务器中的打点信息生成测试结果。

8.如权利要求7所述的A/B测试方法，其特征在于，所述获取控制页面为根据用户输入的网页地址，抓取控制页面至本地。

9.如权利要求7所述的A/B测试方法，根据CookieID分流所述控制页面和测试页面。

10.如权利要求7所述的A/B测试方法，其特征在于，根据所述打点服务器中的打点信息生成热区图。

11.一种使用如权利要求4所述可视化页面编辑装置的A/B测试装置，其特征在于，包括：

控制页面获取单元，用于获取控制页面；

分流单元，用于分流所述控制页面和测试页面；

12.如权利要求11所述的A/B测试装置，其特征在于，所述控制页面获取单元根据用户输入的网页地址，抓取控制页面至本地。

13.如权利要求11所述的A/B测试装置，所述分流单元根据CookieID分流所述控制页面和测试页面。

14.如权利要求11所述的A/B测试装置，其特征在于，所述测试结果生成单元根据所述打点服务器中的打点信息生成热区图。