JavaScript Tip:
Fun With The Referrer Property

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

People come to your site from search engines, links on other sites, and emails. Use JavaScript's referrer property to find out where your visitor came from. Include that information in a friendly greeting, redirect visitors, or use it to serve up a special page.

Referrer Syntax

You can access the referrer information using the document.referrer command. The document object is the page currently loaded in the browser window - presumably your Web page. The referrer property is the page the visitor was at immediately prior to visiting the current page.

Don't confuse the referrer property with the history object. History refers to the list of URL's that your visitor has accessed during the current browsing session. The referrer document is part of the history list, but we won't be using history to access it in these scripts.

Welcome Messages

Quickly give your site a personal feel by including a welcome message on your page or in an alert box that pops up when your page loads.

Use this to place it in the BODY of the document:

If you prefer an alert box, use this in the HEAD section:

In this particular script, using the NOSCRIPT tag is optional because you aren't including any important site information in the alert box or document.write statement.

Send Visitors To A Special Page

But if you're checking the referrer property because visitors from a certain site are eligible for a special offer, you'll want to make sure you include that information inside a NOSCRIPT tag. Otherwise, visitors using browsers with little or no JavaScript capability will be shut out. WebTV supports limited JavaScript and many technologies that make your site accessible to disabled visitors also have problems with it.

Depending on your purpose, you can redirect visitors to a certain page after you check the referring URL, use a document.write statement to place special information on the regular page, or even open a new browser window.

To redirect visitors, place this script inside your document's HEAD section. Remember to use the exact file name and path for both the referring page and the redirect page.

Special Offers

Instead of redirecting, you may just want to set a new, smaller browser window to load when the main page loads. When visitors arrive at your site from an affiliated site, they're greeted by a special offer. You've probably seen this used at some of the larger commerical sites like Amazon.com and Half.com.

Insert this code inside the HEAD section, remembering to change the URL of the referring page.

Then, call the function when the page loads, inside the opening BODY tag:

Use this code carefully: you risk annoying visitors when you open new browser windows automatically. Be sure that the information contained in the new window is really valuable - like a coupon code - and not just an annoying sales pitch.

Note: the referrer property only works when you use it on a live Web server. If you're designing your page offline, these scripts won't work until you actually post the page to a Web server. However, you can easily test the rest of the script by commenting out the document.referrer line of code. That way, you can be sure that your document.write or window.open statements function like you expect.