Categories
JavaScript

JavaScript for optimizers #14: Adding unique selling points

In this article, we will be adding unique selling points to your webpage with JavaScript.

Research from CXL showed that the benefits listed with bullet points are most memorable and most preferable. 

Business case: Adding unique selling points

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that research showed that benefits listed with bullet points are the most memorable, we expect that adding them as unique selling points to our product will cause an increase in sales. We’ll measure this using conversion-rate”.

To test this hypothesis, we’re going to apply the changes below:

We will be adding the unique selling points as an unordered list
We will be adding the unique selling points as an unordered list

The code used in the experiment

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

//variables
var usps = ["Easy to learn", "Can be used for many tools", "Fun to use"];
var loc = document.querySelector(".entry-content");

//functions
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.prepend(ul);
}

//function calls
addUniqueSellingPoints(usps, loc);

Logic

//variables

We will start by opening up a comment section for our variables.

var usps = ["Easy to learn", "Can be used for many tools", "Fun to use"];

Then declare a new variable called usps. We assign an array to this variable that contains a bunch of strings. These strings represent all the benefits that we will be adding to our website.

var loc = document.querySelector(".entry-content");

After that, we declare another variable called loc. We want to select a location to insert our list. We can do this with the querySelector method by selecting the appropriate class. This element will be assigned to the loc variable.

//functions

We will now open up a comment section for our functions.

function addUniqueSellingPoints(usps, loc) {

This function will add unique selling points by accepting an array of strings and a location variable.

var ul = document.createElement("UL");

We need to create an underordered list in which we can append our list items. We do this with the createElement method and assign this element to the ul variable.

for (i = 0; i < usps.length; i++) {

To handle our array of benefits, we will need to set up a loop. This loop will do something for every string in the array.

var le = document.createElement("LI");

First, we create a new list item and assign it to the le element with the createElement method.

var usp = document.createTextNode(usps[i]);

Then we create a text node with the current string in the array and assign it to the usp variable with the createTextNode method.

le.appendChild(usp);

After that, we need to append our text node to the list element with the appendChild method.

ul.appendChild(le);

The last statement of the loop appends the list item to our unordered list with the appendChild method.

}

Then we end our loop and added all the list items in the array to our unordered list.

loc.prepend(ul);

We prepend this populated list to the DOM with the prepend method.

}

We close the function.

//function calls

We open up a comment section for our function calls.

addUniqueSellingPoints(usps, loc);

We call our function with the two variables as the arguments.

Exercise

The best way to learn JavaScript is to try it. 

I want you to change the script to add another unique selling point containing the string “free”.

Try adding 4 unique selling points
Try adding 4 unique selling points

Can’t figure it out? Send me a message on LinkedIn, and I will help you out! Check out the solution.

New resource: How to win your first a/b test on a zero budget?

A zero budget conversion optimization process with Google Optimize and JavaScript.

Download now