Referrer Specific jQuery Greeting

Last week I posted about how to make desktop wallpaper using Adobe Illustrator. In about a weeks time, the wallpaper I used as an example in that tutorial will be published on Smashing Magazine. Smashing Magazine provide a link back to an authors website for every wallpaper submitted and I chose to have mine linking back to the front of my site.

It left me thinking though, people interested enough in my wallpaper maybe want to know more about it, maybe I shouldn't have requested for the author link to go to my homepage but instead, straight to the article. Unfortunately, it's too late to change now and I'm left feeling a little ashamed of myself that I chose to have a link directly to my front page, purely for SEO, instead of thinking about the users and pointing them directly to something they may be interested to read.

So, this week, I came up with a little jQuery script that determines if a user has clicked through to my site from Smashing Magazine, and if so, a little message will smoothly slide into the bottom of the website telling the user that they can find my desktop wallpaper article on my blog.

Keep on reading and I'll show you how you can make one too!

Feel free to take a look at the Referrer Specific jQuery Greeting demo here, or download it here.

The HTML

As our script is going to initiate for just a small percentage of readers and we don't need the greeting to be picked up in a search engine, I kept the HTML to a minimum. The greeting is appended using jQuery which we'll come to later so there's no empty containers in the HTML. The only code we need to include are the three references to jQuery scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="greeting.js" type="text/javascript"></script>
<script src="cookie.js" type="text/javascript"></script>

Simple right? In line 1 we refer to the jQuery library itself which is hosted on Google's servers. In line 2 we refer to the greeting script and line 3 we refer to a cookie plugin for jQuery which we'll make use of so the greeting only shows once for a user.

jQuery Greeting Script

Here's the whole script which we'll break down line by line:

$(document).ready(function() {
    if($.cookie("greeting") != "off"){
        var referrer = document.referrer.toLowerCase();
        if(referrer == "http://www.smashingmagazine.com/"){
            msg = 'Hello, I noticed you were looking at the calendar I made for Smashing Magazine, would you like to see how I did it? <a href="" title="">Ill show you here</a>.';
            img = '<img src="images/sm.png" alt="Smashing Magazine" />';
             $('body').append('<div id="greeting"><div class="close-button">Close X</div>' + img + '<p>' + msg + '</p></div>');
             $('#greeting').animate({bottom: '+=60'}, 1000);
             $.cookie("greeting", "off", { expires: 7});
         }
     }
     $(".close-button").click(function() {
         $("#greeting").hide();
         $.cookie("greeting", "off", { expires: 7});
     });
});

The first line of code is our friend, document ready. We don't need to run any jQuery until the HTML is completely rendered and being displayed to the user, so we put all of our code inside of that.

if($.cookie("greeting") != "off"){

The next line is a check to see if there is a cookie that determines whether the greeting has already been displayed. At this point in the script, if no cookie exists, we'll go through the rest of the script to display our greeting or if a cookie does exist, we simply won't do anything because the user has received the greeting once already (and quite possibly closed it) and won't want to see it again.

var referrer = document.referrer.toLowerCase();

We now get the referrer to the document (the website that linked to our page we want to display the greeting). I've converted the referrer URL to lowercase just to make things a little easier when we check to see who the referrer was.

if(referrer == "http://www.smashingmagazine.com/"){

Having set up the referrer variable, we can now run an if statement to determine whether the referrer URL is the one we want to display the greeting for. In my case, it's Smashing Magazine. At this point, you can change the URL for your own needs or even add more if statements in case you want to display different greetings for differing referrers. Should the referrer not be the one we want, the script will simply not run any further.

msg = 'your message';
img = '<img src="your-image.jpg" alt="image description" />';

The next two lines are the contents of the greeting stored in variables. Remember, when your using quotes inside quotes, you must escape them using a backslash.

$('body').append('<div id="greeting"><div class="close-button">Close X</div>' + img + '<p>' + msg + '</p></div>');

Now we append the container of the greeting along with the message. As mentioned earlier, I didn't want to have any empty containers in the HTML because the majority of users won't see the greeting so having empty tags in the HTML felt a little messy. $('body').append will allow us to put our container into the HTML right before the tag only when the greeting is going to be displayed.

$('#greeting').show();

So now the container is in the DOM but it's not yet showing because our CSS has the greeting container set to display: none. $('#greeting').show(); will change it to display: block.

$('#greeting').show();

The CSS also has the greeting container set to display below the browser viewport though so our users still won't be able to see the greeting at this point of the script. The reason I did this was because I want the container to smoothly move into the website in the hope it might create a little more attention toward the greeting itself.

$('#greeting').animate({bottom: '+=60'}, 1000);

The above line animates the container so that it smoothly moves up into the viewport and there we go, one user greeted and hopefully converted to a tutorial they may be interested in.

$.cookie("greeting", "off", { expires: 7});

We're not quite done with the script yet though. Our next line creates a cookie that specifies the user has seen the greeting. So, should the script run again, our very first line will check to see if that cookie exists, and if it does, the script won't run again!

That's the end of our two if checks, we've checked to make sure the referrer is the one we want and we've also checked to make sure a cookie doesn't exist so the greeting is only shown once. What about the close button though?

$(".close-button").click(function() {
    $("#greeting").hide();
     $.cookie("greeting", "off", { expires: 7});
 });

This segment of code is a click listener. Should a user click an element with the class 'close-button', our greeting will hide itself and a cookie will be created again to tell the very first line of the script not to show a greeting.

Et Voila! A very simple referral specific jQuery greeting. Check out the demo or download the source code if you haven't already. Comments and suggestions welcome.