JavaScript Randomize Landing Page

Illustration of JavaScript Arrays, HTTP Redirection and Math.random

Mar 21, 2008

JavaScript tutorial article showing how to set up an array, select an item at random, and use it to redirect the browser to one of a collection of possible landing pages.

In this JavaScript tutorial article, a technique used to randomize landing pages will be worked through. It illustrates several key JavaScript concepts:

There are several steps that need to be carried out in order to correctly display random landing page using JavaScript. The first step is to create the various landing pages that will be accessed, and take measures to ensure that they are not indexed by the search engines, as this will skew any tracking that might be set up. This is done by using the meta tags of the HTML page to instruct robot not to index the content. The steps to randomize the landing page are:

The JavaScript Array Object

The first step is to create and populate the array that will be used to store the URLs. Assuming that the URLs in question have been set up on the domain www.mydomain.com, and that this remains static, the array can be set up with the following code:

mainDomain = "http://www.mydomain.com/";
landingPages = new Array ("1.html", "2.html" "3.html");

Of course, if the landing pages are spread over different domains, these can be entered in the array as separate items. The next step is to select an entry from the array at random.

Choosing an Element at Random

The Math.random() method is used to select a random number between 0 and 1. It is called very simply:

In order to select an element from the array, it is necessary to know how many elements are in it, so that the randomNumber can be normalized with reference to the start and end of the array. The Array.length property contains the number of elements in an array, and is accessed thus:

Finally, it is necessary to normalize the random number, so that it points to one of the array elements. Currently, it is a value between 0 and 1, but to access the array, a value between 0 and array.length is required. This is a simple multiplication, followed by appropriate rounding:

randomElement = Math.round(randomNumber * numberOfElements);

The result can then be used to select the array entry, and redirect the browser:

window.location.href=mainDomain + landingPages[randomElement];

The randomLandingPage Function

All of the above can be placed in a function which is then placed in the head of the index.html page. The body tag can be used, in conjunction with the onLoad handler to call the function. It is also a good idea to call the function from within the body, as well, in case the browser does not support the onLoad handler.

So as not to alienate those users not having JavaScript installed, or active, it might also be a good idea to place a link in the body of the page, to the default landing page, or another page. It is not advisable to put actual content in the redirect page, as this may distract the visitor, or cause unnecessary delays in processing the random redirect function.

Next Steps

It is important, if using this as part of a split testing operation, to always track the landing page using a counter such as StatCounter.com. This is important because it will be necessary to try and gauge the effectiveness of each landing page in terms of their conversion rate. The technique of a/b split testing using JavaScript is explained on this squidoo page.

The copyright of the article JavaScript Randomize Landing Page in Javascript/Java Programming is owned by Guy Lecky-Thompson. Permission to republish JavaScript Randomize Landing Page in print or online must be granted by the author in writing.