Working with Pages in VWO

About Pages

When you’re in an online business, you tend to run a lot of experiments on your website to improve the conversion rate. In due course, you often would have certain pages on your website involved in different experiments. To run such campaigns, you might need to specify the web pages over and over again.

To break this monotony and save time, VWO follows this mantra - “Reuse, reduce, and repurpose”. With VWO Pages, you can reuse the same URLs multiple times, reduce your efforts in repeating things, and repurpose the same URLs to specify the campaign and metric URLs. Pages simplify your task by creating groups wherein you can collate the URLs that would be repeatedly used. You can use these Pages to configure your campaign and metric URLs. Not just once, you can keep reusing them as long as they are required for your experiments.

Let’s say you’re an online furniture retailer looking to display a clearance offer for couches. Now, you can run a campaign for the same, wherein you can create a Page for couches by grouping relevant URLs together. Not just that - you can even use this Page for metrics and track specific events. For example, you can use the same Page to create a metric, wherein you can track the page visits on that webpage or track the number of clicks on the ‘Add-to-cart’ CTA button. 

While this is happening, you can parallelly run another campaign displaying an offer for indoor furniture and create another Page for the same. You can then add the Page for couches under this to further simplify your effort. Likewise, you can create several Pages for each segment of your products to be used repetitively across campaigns - saving time and minimizing effort.

Creating Pages in VWO 

Let’s consider that you are running an online furniture store and you’re looking to run an A/B test campaign to introduce an offer for chairs. In this case, you can create a Page in VWO, which would comprise the URLs to those webpages for which you’re looking to run the campaign and the one in which you’re looking to apply the variations.

To do so, from the main menu panel, access Configurations > Pages > Create and enter the details in the following fields:

1. Enter the name of the page in the Page Name field.
2. In the Targeting section, select the URL specification option from the dropdown and enter the corresponding input in the field next to it. 
3. If you have already created pages before, you can choose to use those pages under the Saved Page section in the dropdown and make necessary modifications to save them as a new Page.
4. You can include or exclude web pages from the page group using the Include page and the Exclude page options, respectively.
5. You can further configure the inclusion and the exclusion of the pages by clicking on the vertical ellipsis and selecting the following options as required:
   
   

   Ignore query string parameters and fragments	By selecting this option, VWO will ignore the query parameters and hash fragments in the specified URL. E.g., If the specified URL is https://www.example.com/#xyz?param=abc, then the following URLs will also qualify as matches: https://www.example.com/ https://www.example.com/#ipsy?param=byEcT https://www.example.com/?param=xyzz
   Case insensitive	By selecting this option, case sensitivity is disregarded in the specified URL. E.g., If the specified URL is https://www.example.com/AabUiklofr678, then the following URLs will also qualify as matches: https://www.example.com/aabuiklofr678 https://example.com/AABUiklofr678 https://example.com/AABUIKLOFR678

   To get back to the default settings, click Reset to default.

6. In the Editor URL field, enter the URL of the webpage that you want to load by default inside the editor, previews, and heatmaps. 

   VWO, by default, uses the campaign URL to load inside the editor. This will eventually be used to load the previews, screenshots, and heatmap. However, for the specific example, since we have set the Page URL pattern as https://www.examplefurniturestore.com/indoor/chairs* to include all the chairs-related URLs, VWO cannot load all those URLs at once inside the editor. For this, you may specify https://www.examplefurniturestore.com/indoor/chairs as the default URL to load inside the editor, previews, and the heatmap mode.
   
7. You can add a description to the pages for reference. To do so, click on Add description and enter the description in the Description field.
8. Once done, click Create. The created page appears on the left side.

You can click on the created Page and view the corresponding details in the respective tabs as follows:

Managing Pages in VWO

Once a Page is created, you can modify, archive, or clone the same based on your need. To do so, click on the Page that you wish to work on and perform the required action as follows: 

• To Edit- Click on the vertical ellipsis (⋮) on the top-right, select the Edit option, make the required changes, and click Save.
  ATTENTION: Do not edit the Pages that are employed in any running campaign, violating which, affects the campaign result data.
  
• To Clone - Click on the vertical ellipsis (⋮) on the top-right, select the Clone option, apply the required changes, and click Create.
  The cloned Page appears on the left.
  
  
• To Archive - Click on the vertical ellipsis (⋮) on the top-right and select the Archive option. In the Archive Page popup that appears, click Archive.
  

The archived Page is hidden from the list of Pages. To view them, select the Show archived pages option at the bottom of the list of Pages.

Using Pages in VWO

Now that you have created your Page for chairs, you can use the same in your A/B test campaign for the following while creating it:

• Configuring the Campaign URLs
• Configuring the Metric URLs

For the specific example, you would want to display your offer on the chairs-related webpages on your website and check the number of visitors that have used this offer and made purchases. To do that, you can use the “Promotion for Chairs'' Page to specify the campaign URLs and create a variation with specific offers on chairs. To track the conversion rate, i.e., the purchases made using the offer, you can track the clicks on the Add-to-cart CTA button present on these URLs on which the campaign is running. Based on this scenario, let’s explore how you can configure the campaign and metric URL setup.

Configuring the Campaign URLs

Upon clicking the Create button on the A/B Test dashboard, a new campaign creation page appears. In the Pages section, you can choose to specify the URL of the webpage or perform the following steps to apply a saved Page while creating an A/B test campaign:

1. In the dropdown corresponding to Include pages where…, select a saved page under the Saved Page section.
2. Based on your need, you can include or exclude any saved page or a URL using the Include page and the Exclude page options.
3. The Editor URL field will automatically populate the pre-configured URL. However, if you wish to apply your variations on a different webpage, you can enter the corresponding URL of the webpage that you want.
4. If this Page setup is to be repeated in your future campaigns, you can choose to save it by clicking on Save for future use at the top-right.
5. Once done, click NEXT and continue to create your variations.

Configuring the Metric URLs

You can use your Pages while configuring your Metrics, which have the following events with the event property as Page URL or Target URL.

• Click
• Page visit
• Form submit
• Engagement

Referring to the ‘Promotion for Chairs’ Page example, to track the number of purchases made using the offer, you can create a metric to track the same by tracking the clicks on the Add-to-cart CTA button.

To do so, you can create a metric by following the steps mentioned here. To define the events for the metric, perform the below steps:

1. You can select the definition as If an event is triggered if you just want to track if the button was clicked or Number of times an event is triggered if you want to track the count of the clicks made on that button.
   
   NOTE: By selecting the Value of an event property option, you will not be able to use Pages, as this option is applicable for a custom revenue event.
2. Select Click as the event.
3. Click +where… and select Page URL. 
4. In the subsequent dropdown, select the Saved Page you created for the chairs.
5. Now, click where… and choose Selector Path to enter the CSS selector path of the Add-To-Cart CTA button.
6. You can choose to add a description by clicking Add description.
7. Once done, click Create.

Now, the metric is ready to track the CTA clicks made in the chairs section.