This is a complete javascript example to detect your site visitors referrer and greeting them with a message based on their referrer url.
For example, when a dzone user clicks on your link from dzone site, they get a message to remind them to vote up your site.
If you didn't see the message already, click here to see a greeting box..
Or Try pressing 'enter' on the Browser address bar to see the no-referrer message.
Or click here to google this post title then click on my site link to get referred back here and see the googler message.
The code consists of few CSS to style the message box and uses jQuery to show up the message box and array of regular expressions to define each referrer URL pattern and the corresponded message.
<html>
<head>
<title>jQuery Fun: Greeting Your Site Referrals</title>
<style type="text/css">
/* Style your Message Div */
#WelcomePlaceHolder{
/* Keep hidden until called by javascript */
display:none;
Border:silver 2px solid;
width:240px;
height:125px;
/* some space for BG image */
padding:2px 2px 2px 100px;
background:url('http://www.01gif.com/base/les_gifs_personnage_humains/hommes/hommes002.gif') no-repeat left center;
font-size:25px;
color:#333333;
margin:5px;
}
/* Style Close Button */
A.CloseButton {
font-size:11px;
font-weight:bolder;
color:black;
border:silver 2px solid;
text-decoration:none;
float:right;
padding:2px;
}
A.CloseButton:hover {
border:gray 2px outset;
text-decoration:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//Add urls regular expressions and your message(any HTML Code) to the array
var msgs = [
//null url : to show a message for direct traffic (no referer, some one who remember your site url!)
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
//My url! : show message for referrals from your own site or null so you do not annoy them
,{'url':/^http:\/\/(\w+\.)?moretechtips\.net/, 'msg':null}
//Other urls
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
//You must keep it at the end of the list as it will match any non empty referrer
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
//if Div was not placed means , not to show message
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// if not null msg found
if(msg) {
//Add Close Button and Show up message
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
//Hide On click close Button
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Call the Referrer Detector function on document ready
$(DetectReferrer);
</script>
</head>
<body>
<div id="WelcomePlaceHolder"></div>
</body>
</html>Note that patterns array includes 4 type of patterns (in lowercase):
- Null Pattern, to add a message for direct traffic visitors (no-referrer)
- Your Site Pattern, to match when people referred by your site links. and i kept the message 'null' so i don't annoy the visitors.
- Generic pattern to match any referrer you didn't specify a message for, and it must come at the end of the array as it will match any non-empty referrer url.
- The rest are Sites Patterns.
for example [/^http:\/\/(\w+\.)?google\.com/] will match referrer urls that:
[^] Start with
[http:\/\/] means 'http://'
[(\w+\.)?] Any -optional- sub domain
[google\.com] match 'google.com'
Also note that, you should put the place holder div (ID='WelcomePlaceHolder') where the message should appear, and if you didn't put it there no message will come up.
If you need to review regular expressions, check this good reference [RegExp Object Reference]
Web developer, jQuery plugin author, social media fan and Technology Blogger.
Nice script.
You might want to make it a plugin... that would be really cool and easy to implement in pages.
Since you put that page on DotNetKicks, you'd better greeting people coming from that site in a personalized manner :)
you might even want to put the DotNetKicks widget in the message and ask them to kick you :-)
Simone,
Thanks for your feedback.. I'll think about doing a plugin, although i'm not ready for that kind of commitment :)
Nice script. However I was spending 2 minutes trying to identify why it wasn't working with Firefox (no Firebug errors, no nothing) until I finally saw the box... it looked similar to an ad so I never read it! Point there for banner blindness :)
sorry Gergely, he chosen to dress up in white for the greeting message :)
Mike,
You've shown how to write a script that does something based on detection of a particular referrer page. But do you know if it's possible to extend that to the referring link element?
I am building a portfolio site where thumbnails trigger the display property of pics in a gallery. This is relatively simple with Javascript and CSS. I wanted to be able to come into the gallery page from links located on another page in my site, and based on which link on that page was clicked, have a script toggle the visibility of a particular pic. The options I came up with may be more complicated than I want to get into. Here they are:
1) send the link id value from page to page via a form action (get or post)
2) have the link target a php page that writes a copy of the entire page with the display property of the pic already toggled on
3) use a DOM method like"addEventListener()"
Any thoughts on which might be the easiest, or if there is another easier way?
Thanks Dale
@Dale,
you can try a lightbox instead of linking to another page.
Or you can go with the solution of putting link ID in url, and read query string by javascript at target page to show some image
Mike,
Wow, I was not aware of the query string possibility. Guess I knew who to ask tho! A straightforward solution and a most excellent suggestion!
Thank you.
Dale
This is really cool! I am in love with your site :)
@Swashata,
Thanks.. stay tuned :)
Hi,
Many thanks for a great script, the problem I have is I am looking for a referral script that shall display the relevant message through out all my own site pages. So if a visitor came from google to my site / index it would say "welcome googler" and if they then clicked on my site / internal links and visited a new page on my site the java script referrer still knows they originally came from google and constantly displays again " welcome googler"
Is this possible with this script?
Thanks
@Anonymous,
No, I guess you can try using cookies to do that. or a server-side script using sessions.
thanks for your reply, I have had a brief look around at using either cookies or php but none of which has worked for me....!
Is there any such script you know of? php or javascript document.cookie which ever it just needs to work.
All I am looking for is Image (A) displays if come from referrer 1, Image (b) displays if come from referrer 2,.... and the image to then appear constant throughout the site.
Thanks
@Anonymous,
sorry, I didn't see sample code for this particular issue.
but Since, you can write PHP code on your site, then I'm sure this can be done with sessions.
1. You check the referrer if it is google then you set session x.
2. In other pages you check if session x is set to display the suitable image.
Nice tutorial
Wanna try this onto my blogspot. Thanks for the script.
Hello I was wondering if you know how I could modify this to count the number of referrals I'm getting from different sites? say I have 4 sites i'm interested in. Could I use this in partial and make an array of those sites but as a result of each one count the number I'm getting from each site?
could you provide an example.
thanks so much!
-B
I'm trying to use this with a URL like:
http://www.somesite.com/some-schools/sample-some-some-school-profile?A=Edit
as the referring URL. What syntax should I use for that? I looked at regex and don't get it...
Thanks, cool script! A jQuery plug would be sick!
@Anonymous,
try this regex
^http:\/\/www\.somesite\.com\/some-schools\/sample-some-some-school-profile\?A=Edit