Pricing AB testing for Webflow
Create and adjust A/B tests
A/B testing, sometimes called split testing, is a process of randomized experimentation that presents different versions of a variable (such as a webpage or page element) to distinct segments of website visitors simultaneously. The aim is to discover which version has the most significant effect on business metrics. In other words, which version of your price table do visitors like best?
💡 When you create an AB test, you are conducting a real experiment, so to obtain the most objective and reliable (and therefore useful) information, you must follow a simple rule: your two options must differ in exactly one factor. If you change both the widget design and the pricing policy at the same time, and then a test shows that one of the samples converts higher than the other, you won't know for sure whether this was a result of the design or just the pricing.
💡 Before creating of A/B Test itself, you must have at least 2 Pricing Table widgets created. Use our manual.
💡 Make sure you fill it out correctly: remember the rule of the only difference.
- When you click on Get Started on the home page of our website, you launch the Widget editor. The menu on the left suggests different types of widgets you can create. A/B Test is your option:
If you don’t have any widgets here, the editor will offer you to create it now:
Or, in case you already have some, the button name will be Create new A/B test:
- Choose two Pricing tables to compare:
- The test name is created automatically using the Testing “X” / “Y” template, where X and Y are the names of the Price Table widgets you are comparing:
-
Embed the A/B Test widget you have created onto your website.
-
Open/refresh your site.
💡 The probability here is 50/50: our widget is like tossing a coin to determine which price table to show to the next visitor.
Embed the Pricing AB Testing widget to your Webflow website
- Open your website in the Webflow website editor and then click Add > Embed:
Now you have a new element on your website. Place and scale it on the site according to your design:
- Click the Code icon to see the installation instructions
- Copy a widget code from the automatically appearing window into the clipboard:
- Select your widget on the site and click the Edit icon. Paste your code from the clipboard into the input field provided for this:
Click Save & Close. Widget preview is unfortunately unavailable.
- Click Publish, then Publish to selected domains, and finally click
(opens in a new tab):
Your website will be opened in the browser.7) As you can see, the Pricing Table widget was successfully embedded on your website!
Make sure it works
As already mentioned, when visiting the site for the first time, the AB test widget randomly shows the visitor one of two options. On future visits to the web page, the widget uses browser cookies to show the user with the same cookies always the same pricing table option.
Thus, you cannot simply refresh the page in the browser and get a different version of the pricing table. But there are two options at your disposal:
- Check it in the preview mode of the widget editor on the enhanci.com:
- Check using the browser's private mode.
You need to open your site in a new private window and refresh the page until you see both versions of the pricing table.
View statistics
Statistics are shown in the form of tables with the same structure for each Pricing table widget. The example below shows a comparison of pricing tables with the names Blue and Dark:
Each table has 4 columns:
-
Card: the list of the Pricing table cards,
-
Visitors/Clicks: statistics on visits and clicks for this card,
-
Conversion rate: the Visitors/Clicks rate for this card,
-
Blue vs Dark: the last column shows the conversion difference between the two compared cards in the different Pricing tables. The column name is generated automatically using the template Name of the first Price Table vs Name of the second Price Table. The numbers in this column for the first and second tables are always identical, only the signs differ.
Republish the test
If you changed your Pricing table widgets and want to use those new changes in your A/B test, click Re-publish:
The notification will be shown: "A/B test updated successfully".
Stop the test
To stop testing, click Finish.
💡 Please note that after this the widget is still displayed on your website (but no statistics are collected).
After stopping, the test is still available in the list of tests. You can enter it and look at the statistics accumulated before the finish.
💡 Once stopped, the AB test cannot be started again. But you always can create a new one with the same Pricing tables.
Remove the test
💡 The test does not require finishing to be deleted.
You will be asked to confirm the operation and, if confirmed, the test is removed from the list:
💡 Please note that immediately after this the widget will no longer be displayed on your website and will need to be replaced with a regular Pricing table widget or a new AB test widget.