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 at 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:
- In the first variation, you change the color of the sign-up form.
- In the second variation, you change the text on 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 funnel test for the above example, perform the following steps:
- 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.
- 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.”
- 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.
- 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.
- 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 the CSS path or element ID associated with the webpage element that you want to change. Therefore, VWO tracks the CSS path or the element ID to implement the changes across the website funnel.
- 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.