Webvanta Blog: Creating Effective Websites

Using Referrer URLs to Better Understand Your Visitors

Using Referrer URLs to Better Understand Your Visitors Image

In my previous post, I showed how you can track the success of individual marketing efforts with a little jQuery code.

Add a source code at the end of URLs on ads and other placements that you want to track, take the source code from the URL and store it in a cookie, and then put the value from the cookie in a hidden form field when the user supplies their name and email address.

(If that doesn’t make sense to you, you may want to go back to part 1 of this series, Capturing source codes to track marketing results, which explains the basics of how to use cookies for lead tracking.)

Often, however, you don’t have any source code in the URL. You can put a source code in the link on all your ads, but when another site links to you of their own volition, there’s not going to be a source code.

Rescued by the referrer URL

All is not lost! There’s another kind of information you can capture: the referrer URL. That’s the page on which someone clicked a link that led to your site. Browsers normally provide this information as part of every request; although users can disable or block it, most people do not.

Note that the referer provides different information than a source code appended to the URL (e.g., www.mysite.com?s=sourcename), and it is helpful to have both pieces of information.

For example, suppose you are running ads on an ad network. You can provide the URL that the ad will link to, so you can trace all ads that come from the network. But typically the URL will be the same for all sites in the network. The referral URL tells you what site the link came from.

Capturing the referrer

It’s easy enough to access the referrer URL with JavaScript: simply document.referrer. But it also takes some cookie processing to get the result you’re looking for.

Since the visitor may browse around your site for a while before coming to the page with the lead or order form they are going to fill out, you should store the referrer in a cookie, and then insert it into the form, just as with the URL-parameter source in part 1 of this series.

Unless the page with the form is the first page a user visits on your site, the current page’s referrer URL isn’t really what you want. You want the referrer URL of the first page the user visited, which tells you how they found your site.

Here’s the code, which assumes that you have loaded jQuery and the cookie plug-in (see part 1 for details):

if ($.cookie('mysite_referrer') == null ) {$.cookie('mysite_referrer', document.referrer);
}

This code stores the current document referrer in the cookie named ‘mysite_referrer’, only if there is not already a cookie of that name. We don’t set any lifetime for the cookie, which makes it a session cookie, which disappears when the user quits the browser. Thus, the cookie stores the first referral URL for your site during the current browser session.

Submitting the referrer with your form

Add a hidden field to your lead or order form to capture the referrer information:

<input type='hidden' id='referrer' name='as_required_for_server_sw' />

The ‘name’ attribute must be set as required by the system to which you are submitting the form. If you’re using an email marketing provider, such as Campaign Monitor or Vertical Response, you’ll need to define this field using their tools, and then their form-generator code will provide this name. If you’re using a Webvanta hosted CMS custom item type, the item type form generator will give you the code. (Note that the ID attribute can be whatever you want; it is used only for the JavaScript code to target this field to set its value.)

Finally, set the value of the hidden field using the referrer URL that has been stored in the cookie:

$('#referrer').val($.cookie('mysite_referrer')); 

Be sure to put this code in a ‘document ready’ block so the browser doesn’t attempt to execute it before the DOM is ready to be manipulated.

Better tracking for your leads and orders

With both source-tracking methods—URL parameters and referrer URL—you have a much better chance of having useful source information for most people.

Once you’ve been through it once or twice, it only takes a few minutes to add this powerful tool to your sites. With the resulting information, you’ll have a much clearer picture of where your visitors are coming from, and which ones are turning into customers.

Add Your Comments

(not published)

Reader Comments

3 comments

you mispelled referer by not mispelling it

Per RFC1945 Referer is a misspelling of Referrer. While unintentional, it did make it to the spec that way (I guess spell checkers weren't so good back then). But, it does make it simple to google up information on it.

how it works

hello,
my problem is that when i show my blogger traffic sources and referring url is http://buttons-for-website.com/
and when i open this site there is no my website link this is only one page????
how they do its ???
i want to learn this tricks if you know then tell me
thanks :)

Both?

You think that can be tracked both?