Redirecting to a Splash Page ( …but only once! ) with Cookies

Chris Coyier //

cookiemonster

Splash pages can be annoying. You know the ones... like being forced to watch some advertisement before you can see the page you are trying to get to. Or maybe some fancy introduction to a site that you are automatically redirected to every time you visit. Great.

There are some circumstances where a splash page can be useful. Say you are running a band website and they release a new album. You may want to redirect people visiting to a splash page introducing the new album. This might even be welcome by the bands fans, who would want to know about it and have the opportunity to buy it. But, they certainly wouldn't welcome it the 5th time they went to the site and were re-directed.

Let's fix that!

The Desired Functionality

First let's get the desired functionality straight:

Has the user been to this site before?
YES: Go to regular homepage
NO: Redirect to splash page

If NO is the answer, we need to make sure that the next time this question is asked the answer is YES. And how do we achieve this magical web intelligence? With the internet's most delicious functionality: the cookie!

Setting and Getting the Cookie

There are numerous ways to handle cookies on the web, but as we like to around here, let's harness the awesome powers of jQuery. First, we'll need to include the jQuery library on our page as well as the very nice cookie plugin:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/cookie.js"></script>
<script type="text/javascript">
	$(function() {
		.... do stuff....
	});
</script>

So thinking back to our desired functionality, we'll need to write something like this for our homepage:

Check for the cookie.
Did you find cookie? Do nothing.
No cookie? Set the cookie, the redirect to splash page.

Which in jQuery looks like this:

$(function() {
	var COOKIE_NAME = 'splash-page-cookie';
	$go = $.cookie(COOKIE_NAME);
	if ($go == null) {
		$.cookie(COOKIE_NAME, 'test', { path: '/', expires: 6 });
		window.location = "/splash.php"
	}
	else {
	}
});

That "6" in there is "days until the cookie expires", so do with that what you will.

And remember...

...with great power comes great responsibility!