Grow your CSS skills. Land your dream job.

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

Published by 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!

Comments

  1. Romz

    A pretty good example again. But personally I find the 30kb of jQuery are unnecessary to do this kind of stuff : it takes a few more time to load for…almost nothing.

    With a few more line of JS you could do the exactly same thing with 29.9kb less ;-)

    I think that as a user, not as the developer who made the band website.

    BTW : great work as usual :p

  2. PHP might be a better way to do this:

    setcookie(‘SplashCookie’,’1′,time()+(60*60*24*365));

  3. Splash pages are bad, using cookies to show splash pages only makes it worst.

    also, u dont need your else statement.

  4. I do kind of agree with V1 in terms of using splash pages etc, 9 times out of 10 it’s just another click that most users won’t want to make.

    That said if your launching a new product or feature that is drastically different or changing permalink structure (god forbid!) it could be useful as a short-term solution to notify users.

    Also @Romz you should post the JS solution, I would like to see it :)

    Another interesting post anyway

    Cheers,
    George
    Twitter – geenius545
    http://www.geenius.co.uk

  5. Adam

    The worst site is the site of my team.

    http://www.liverpoolfc.tv.

    A splash – advert page EVERY time you visit, or leave it too long between pages. It is a horrible site over all really. go on take a look. nasty.

  6. nice article, but I disagree with it :-)
    An idea that pops in to my mind right now is having like a bouncing icon on the top of the screen and let the user click it and then see the info.
    Or if you must display temporary infos, what do you think about using an hovering div (maybe modal)?
    Just food for thought…

  7. Also u say that its usefull to show a new album at it. But.. uhm.. isnt the HOMEPAGE created for that?

    The only use that splash pages now have is to for sites fully powerd with flash, to notifly the user that they require flash to view the site. Or used for advertisement. I mean who wouldnt wanna pay topdollar if lets say apple got splash screen with advertisement:

    Apple is powerd by : css-tricks.com

    :)

  8. Useful stuff. Maybe I should start making splash pages (splashed with ads and an overview of the blog) too. :>

    Stumbled.

    @V1(#7): Lol….

  9. I hope this is not too off topic but be careful when using splash pages.

    Splash pages are very bad for seo. The first page of your website is the strongest because it is where the spider land and is also the one that receive the page rank benefits and bring it to the inner pages.

    Now put a splash page as your first page and you loose all the benefits of this. Your “real” first page will be seen as a secondary level page, less important which is surly not what we want.

    A good alternative would be as described by Enrico above in my opinion.

  10. Edwin

    Nice… but why using js for this in stat of php?

  11. I actually think this is the start of a pretty good idea, not necessarily for a page redirect (I agrre with splash pages sucking). I would rather see the action if the cookie is found to change a banner to one that says “welcome back” or similar.

    You might also use something like this to decide if an image preloader needs to preload rollovers or if they are likely to be in cache. Could save load time.

    A further extension to the cookie use could be to remove a link once an action has been taken and not showing it again. eg set a cookie to remove an RSS sign up banner once someone has actually signed up.

  12. Nuno Zmas

    It can be useful for yet another nagging purpose: data collection through one-time surveys :)
    Say you want users to fill in a little form before accessing a particular section of the site. A solution like this comes in handy.
    As a developer and end user i disagree with this kind of practice, but marketing stalkers love it (sorry, “sales people”) :)

    Nuno.

  13. Robbi
    Permalink to comment#

    The tutorial is amazing, but is there any possible way to stop the page redirecting to the splash page twice in Safari??

  14. Permalink to comment#

    Chris:

    Can you take it a step further and show us how to use it with a lightbox insteads of the redirect? This way when the page loads, it will do the lightbox grey out thing and then the user can just close the box (once).

  15. matias
    Permalink to comment#

    damn, not working for me :(
    I’ve added this to my /index.php
    link text

  16. Permalink to comment#

    I don’t this this works with the current jQuery build. Could you guys update this?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".