A/B test scripts for pricing pages

Startup

€ 47

Billed annually

Business

€ 97

Billed annually

Enterprise

€ 197

Billed annually

You can try out the code yourself by running code in the console.

Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the chrome console.

Copy the code into the console and press enter to see the changes.


1. Re-ordering pricing plans

With this change, we sort the price from high to low.
//this function takes an element and moves it up in the same level
function moveUp(element) {
  if (element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}

//this function takes an element and moves it down in the same level
function moveDown(element) {
  if (element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}

//then we select the first and the third pricing block
var pricingBlock1 = document.querySelector(".pricingBlock > div:nth-child(1)");
var pricingBlock3 = document.querySelector(".pricingBlock > div:nth-child(3)");

//then we call the functions to get our new order
moveUp(pricingBlock3);
moveUp(pricingBlock3);
moveDown(pricingBlock1);

2. Adding a most popular option

With this change, we add a red border and add some text to the blocks.
// We use this to declare the CSS with JavaScript.
let objectStyle = document.createElement("STYLE");
let objectCSS = document.createTextNode(
  ".pricingBlock > div:nth-child(2){border: 1px solid #f73065;} .pricingBlock > div:nth-child(2) > p:nth-child(1){color: #f73065;}"
);
objectStyle.appendChild(objectCSS);
document.head.appendChild(objectStyle);
// This functions allows us to quickly add elements.
function addElement(elementType, textNode, targetSelector) {
  var newNode = document.createElement(elementType);
  var newTextNode = document.createTextNode(textNode);
  newNode.appendChild(newTextNode);
  var targetNode = document.querySelector(targetSelector);
  targetNode.parentNode.insertBefore(newNode, targetNode);
}
// We call the functions to add the elements to the pricing blocks.
addElement(
  "p",
  "Most popular!",
  ".pricingBlock > div:nth-child(2) > p:nth-child(1)"
);
addElement(
  "p",
  "Just starting out!",
  ".pricingBlock > div:nth-child(1) > p:nth-child(1)"
);
addElement(
  "p",
  "When simple isn't enough!",
  ".pricingBlock > div:nth-child(3) > p:nth-child(1)"
);

3. Adding a comparison benefits

With this change, we add benefits to all of the blocks.
// This functions adds a list of unique selling points to a target element.
function addUniqueSellingPoints(usps, loc) {
  var ul = document.createElement("UL");
  for (i = 0; i < usps.length; i++) {
    var le = document.createElement("LI");
    var usp = document.createTextNode(usps[i]);
    le.appendChild(usp);
    ul.appendChild(le);
  }
  loc.append(ul);
}

// Here we declare and assign the benefits we wan't to add.
var benefitsBlock1 = ["Benefit 1", "Benefit 2"];
var benefitsBlock2 = ["Benefit 1", "Benefit 2", "Benefit 3"];
var benefitsBlock3 = ["Benefit 1", "Benefit 2", "Benefit 3", "Benefit 4"];

// Here we get the different pricing blocks.
var pricingBlock1 = document.querySelector(".pricingBlock > div:nth-child(1)");
var pricingBlock2 = document.querySelector(".pricingBlock > div:nth-child(2)");
var pricingBlock3 = document.querySelector(".pricingBlock > div:nth-child(3)");

// We call the functions to insert our unique selling points.
addUniqueSellingPoints(benefitsBlock1, pricingBlock1);
addUniqueSellingPoints(benefitsBlock2, pricingBlock2);
addUniqueSellingPoints(benefitsBlock3, pricingBlock3);

Want to learn to run any client-side A/B test with JavaScript?

Get started with my free JavaScript for Optimizers mini-course!