How to Implement a Change Across Your Website in VWO?

This article explains how to modify elements on one page and then replicate those changes across your website.

For any type of test in VWO, when you are making a change to an element, you would want that change to reflect on all the pages the element is appearing on. Now, instead of visiting each page and making the changes individually, it would save you time and effort to change the element in one place and replicate the changes across the website.

For example, your website www.example.com has a sign-up form that appears on multiple pages and you are creating two variations of the form:

1. In the first variation, you change the text in the sign-up form.
2. In the second variation, you change the color of the sign-up form

For either variation, when you make changes on one page, you want the change to reflect on all the pages that display this sign-up form. In VWO, this can be achieved by creating funnel tests.

To create a funnel test for the above example, perform the following steps:

1. Enter the URL of the page on which you want to modify the element. In our example, it is www.example.com.
   
   NOTE: For an existing test, use the View/Edit Test Details page to implement the changes.
2. After the page loads in the VWO editor, make changes to the elements as you need. Now, you have two variations of the page one with the change in the form color and the other with the change in the form text.

Let's say Variation 1 has the color of the form changed from Yellow to Green, and Variation 2 has the text on the form changed from 'Register with Us' to 'Signup Now'.

1. To run the test throughout the website and ensure that the visitors see changes across the variations, define a test page pattern in the included URLs of the test and add the VWO tracking code snippet on all the web pages you want to include in the test. Enter the test page pattern in the Run test on the URLs field.
2. For example, to run the test across the site, we define the test page pattern as http*://www.example.com* for the following reasons:
• The first wildcard (*) ensures that the test will run on both the HTTP and HTTPS versions of the page.
  
  NOTE: To learn more about URL patterns in VWO, refer to Using URL Patterns in VWO.
• The second wildcard (*) ensures that any URL that has://www.example.com in it will be included in the test. This URL will ignore any subfolders or query parameters after .com and include those pages in the test.

How VWO Implements the Test?

• VWO applies the changes based on CSS Selector paths. Thus, if the CSS Selector path of the element that you have applied changes to remain constant throughout the website (which usually is the case), the changes will be applied site-wide successfully.
• If a visitor views a particular variation while entering a test, the visitor will see the same variation throughout the site. This step ensures that the viewer sees consistent color and text across the website.
• When a visitor is a part of a test, VWO places a tracking cookie in the visitor's browser to track if the visitor is a returning visitor or a new visitor. The tracking cookie determines which variation was served to the visitor earlier and ensures that the same version is served throughout the test.

Tracking Multiple Pages Using Cookies

The following example will help you understand how this targeting needs to be set up for each of the variations in separate campaigns and how it works:

Consider you have three campaigns Campaign #1, Campaign #2 and Campaign #3 running on 3 different pages. Each of these campaigns has a control (original) version and a variation (changes you made). Any user landing on the original (control) version of step 1 will route to the control version of step 2, and so on. If a user lands in a particular variation of page 1, then the user will be routed to the related variation on page 2, and so on.

You can set the cookie-based variation targeting and set custom segment conditions. To target variations, navigate to the Settings page of the campaign and go to Targets section. All variations you have created under the campaign displays.

The following is an example of how you can set up VWO cookies during a funnel test and create a targeting rule for each variation:

Campaign #1

• Control: (Cookie “_vis_opt_exp_2_combi” is “Blank” OR “1″) AND (Cookie “_vis_opt_exp_3_combi” is “Blank” OR “1″)

Similarly, set up cookie segmentation for each variation in your campaign.

• Variation: (Cookie “_vis_opt_exp_2_combi” is “Blank” OR “2″) AND (Cookie “_vis_opt_exp_3_combi” is “Blank” OR “2″)

Campaign#2

• Control: (Cookie “_vis_opt_exp_1_combi” is “Blank” OR “1″) AND (Cookie “_vis_opt_exp_3_combi” is “Blank” OR “1″)
• Variation: (Cookie “_vis_opt_exp_1_combi” is “Blank” OR “2″) AND (Cookie “_vis_opt_exp_3_combi” is “Blank” OR “2″)

Campaign #3

• Control: (Cookie “_vis_opt_exp_1_combi” is “Blank” OR “1″) AND (Cookie “_vis_opt_exp_2_combi” is “Blank” OR “1″)
• Variation: (Cookie “_vis_opt_exp_1_combi” is “Blank” OR “2″) AND (Cookie “_vis_opt_exp_2_combi” is “Blank” OR “2″)

_vis_opt_exp_CAMPAIGN_ID_combi is the cookie-generated when users become part of a particular combination of a campaign. In the combination cookie, the Control always has the value of 1, Variation #1 always has the value of 2, Variation #2 has the value of 3 and so on.

The cookie value is blank condition will be met when the visitor is not yet part of the corresponding campaign.