Let the User Skip the Splash Page

The proliferation of splash pages on web sites has been seen by many to be a hindrance to the user. A splash page generally consists of a default home page that displays the company logo, or some other branding for the site and/or company, using everything from Flash movies to animated graphics.

What most site designers forget is that while their desire to brand their site may be important, it slows down the user every time that user has to wait for it to download, and then click through (provided that option has been offered by the designer). So instead of forcing the user to circumnavigate the page with bookmarks or directly typing the page address in to his or her browser, we assume that once is enough. Or, in the case of this tutorial, once a month is enough.

I am offering two solutions within this article. One is for those of you who do not have access to server-side scripting and is written in JavaScript. The other is writtin in VBScript for Active Server Pages, but the concept is simple enough and may be easily repurposed for other server-side scripting languages.

What We’re Doing

We will set a cookie on the user’s computer indicating that the user has seen the splash page already. The next time the user comes back, the script will look for the cookie. If the cookie is there, the splash page is skipped, if the cookie is not there, the splash page is displayed. The cookie expires after a pre-determined amount of time.

JavaScript Solution

You should paste the following code block in the <‍head> of your HTML page.

<‍script language="JavaScript">
<‍!--

function ReDirect (URL) {

GetCookie('SplashSkip');

if (Splash == 'TRUE') {
  window.location=(URL);
  }
else {}
}

var Splash = GetCookie('SplashSkip');

The above block of script creates the redirect function that will kick the user out of the splash page when called. The first thing the function does is look for a cookie called SplashSkip. If that cookie has a value of TRUE then it changes the URL of the current page to whatever the value for URL is as defined below.

Setting Splash equal to the GetCookie function with the SplashSkip variable allows us to look for the cookie named SplashSkip without having to hardcode the value into the GetCookie function.

function getCookieVal (offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie (name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
  var j = i + alen;
  if (document.cookie.substring(i, j) == arg)
    return getCookieVal (j);
  i = document.cookie.indexOf(" ", i) + 1;
  if (i == 0) break; 
  }
  return null;
}

The two functions above actually retrieve the values of any cookies passed to them, while making sure the script doesn't fall apart on older browsers, or on a browser with no cookie(s) set.

ReDirect('http://foo.com/skipsplash.html');

This piece of script above is the only function that is run as soon as the page begins to load. The ReDirect function as defined above now kicks in, which checks for the specified cookie. If that cookie doesn't exist then the function ends, as you can see in the else {} statement above. The target URL is placed in the parentheses.

function SetCookie (name, value) {
  // Enter number of days the cookie should persist
  var expDays = 30;
  var exp = new Date(); 
  exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
  expirationDate = exp.toGMTString();
  // Set cookie with name and value provided
  // in function call and date from above
  document.cookie = name + "=" + escape(value)
  document.cookie += "; expires=" + exp.toGMTString();
}

// -->
<‍/script>

This final snippet of code creates the function that sets the cookie. This function is called after the page has loaded, and so only runs if the user wasn't moved to a new page by the redirection function that loaded as soon as the page opened. You set the number of days the cookie lasts on the user's machine by changing the value of expDays.

<‍body onload="SetCookie('SplashSkip','TRUE');">

Finally, you add the JavaScript SetCookie function to an onLoad event in your <‍body> tag. The example above defines the cookie name and value, which is what the rest of the script checks against in order to skip the splash page.

ASP/VBScript Solution

This script still sets a cookie, but all the work is done by the server. Instead of the splash page flashing on screen for a moment, as it does with the JavaScript solution, this script just serves up a completely different page. The first thing you need to do, before the <‍head> tag, or anything else in the ASP file, is paste the following code:

<‍%

IF Request.Cookies("ASPSplashSkip") = "TRUE" THEN
  response.redirect "http://foo.com/skipsplash.html"
ELSE
  SET_COOKIE
  HTML
END IF

%>

The first thing the script does is look for a cookie with the name ASPSplashSkip and value of TRUE. If that cookie exists, you are immediately served up a different page, and the splash page has been skipped.

If the cookie is not there, it goes on to the next part, which consists of displaying two SUBs, which are just pieces of HTML and/or script wrapped in <‍% SUB %> containers. In this case, the function that sets cookies is wrapped in one, and the actual HTML of the page is wrapped in another. I tend to use SUBs since it helps me to quickly and easily modify what happens in my ASP scripts when I have pieces of logic driving what gets displayed — as I do here.

<‍% SUB SET_COOKIE %>
<‍%
'###############
'## Date Setting

DayLater = DateAdd("d", 1, FormatDateTime(Now,vbGeneralDate))
WeekLater = DateAdd("ww", 1, FormatDateTime(Now,vbGeneralDate))
MonthLater = DateAdd("m", 1, FormatDateTime(Now,vbGeneralDate))

  '## Choose a timeframe from above and
  '## make it equal to TargetDate
  TargetDate = MonthLater

'##################
'## Cookie Setting

  '## This sets the cookie so that the next time the
  '## user comes back he/she will skip the splash page
  Response.Cookies("ASPSplashSkip") = "TRUE"
  Response.Cookies("ASPSplashSkip").expires = TargetDate

%>
<‍% END SUB %>

The first part allows you to select a timeframe for the expiration of the cookie. I have provided three timeframes to make it easy, since you can't just enter a number of days as you can with the JavaScript. So if you decide you only want the cookie to last one week before expiring, set TargetDate equal to WeekLater.

The second part sets the cookie with the name/value pair you see in quotes. In this example, the name is ASPSplashSkip and the value is TRUE. It also sets the expiration date for the cookie based on the value you set for TargetDate.

<‍% SUB HTML %>
<‍HTML>

<‍!-- Insert splash page here -->

<‍/HTML>
<‍% END SUB %>

Finally, whatever is within the <‍% SUB HTML %> and <‍% END SUB %> containers is the actual content of your splash page. The example above is trimmed to just the <‍HTML> tags, but you can have any HTML in there, including your Flash splash movie, or your DHTML effects, or whatever else goes on that splash page.

Finally

Remember that this doesn't guarantee a user won't see a splash page more than once a month (for this example), especially if they switch browsers or have cookies turned off, but it's a good start. This also doesn't mean you shouldn't re-examine the utility of your splash pages. They should still be functional, and should still offer a way to get to the real content of your site for the user who actually sees it.