JavaScript Randomize Landing Page

Illustration of JavaScript Arrays, HTTP Redirection and Math.random

Mar 21, 2008 Guy Lecky-Thompson

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:

• Arrays;
• The Math object;
• HTTP redirection.

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:

1. Initialize the array of page URLs
2. Select one at random
3. Redirect the browser

Each step will be discussed in turn.

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:

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:

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

This is all the code that is required.

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 Computer 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.

What do you think about this article?

---

NOTE: Because you are not a Suite101 member, your comment will be moderated before it is viewable.

post your comment

What is 10+5?