Hi,
I have a quick question. Does anyone have a script where I can rotate between 2 Javascripts when a page loads for split testing.
So when page loads once, javascript A will fire. On next load, javascript B will fire and so on.
I have found lots of banner ad rotation scripts but no javascript rotation scripts.
Thanks
Onuora
Ammalgam,
Believe it or not a script's src can itself be scripted so it's very easy to cause different scripts to be loaded into your page. All you need is another script (either hard coded in the page's head, or in an external .js file).
Then all you need is mechanism for remembering which script was used last time such that the next script can be used this time. Since we appear to be avoiding anything server-side here, we are forced (realistically) to use a Javascript cookie and most of the code below is for cookie handling.
Here's an demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Get Script onload</title>
<script id="script1" src=""></script>
<script>
//Credit to http://techpatterns.com/downloads/javascript_cookies.php for the cookie functions
function setCookie(c_name, value, expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name+ "=" + escape(value) + ((expiredays==null) ? '' : ';expires='+exdate.toGMTString());
}
function deleteCookie(c_name){
if(getCookie(c_name)){ document.cookie = c_name + '=;expires=Thu, 01-Jan-1970 00:00:01 GMT'; }
}
function getCookie(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + '=');
if (c_start!=-1){
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(';',c_start);
if (c_end==-1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return '';
}
function getScript(){
var scriptNames = ['A.js', 'B.js', 'C.js'];//Array of available script names. If required, prepend path; eg. 'scripts/A.js'
var scriptId = getCookie('scriptId');//Get previously saved scriptId (ie an index of the scriptNames array).
if(!scriptId || scriptId==='' || parseInt(scriptId)<0 || parseInt(scriptId)>=scriptNames.length){ scriptId = 0; }//Default to zero if cookie not yet set or value out of range.
else{ scriptId = (parseInt(scriptId)+1)%scriptNames.length; }//Increment cookie, with wrap-around back to zero.
setCookie('scriptId', scriptId, 365);//Set cookie to remember current scriptId. Third paramerter specifies number of days cookie should stay alive
document.getElementById('script1').src = scriptNames[scriptId];//Get the script.
}
onload = function (){
getScript();
}
</script>
</head>
<body>
<a href="" onclick="deleteCookie('scriptId'); return false">Delete Cookie</a></br>
</body>
</html>To make it work, you will need to save to a file then create files A.js , B.js , C.js each containing the code you want. You will see at the top of getScript() that it's easy to add/delete/change script names in the rotation.
I have included a deleteCookie() function in case you need it.
Hope this fits the bill.
Airshow
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.