Welcoming Visitors to your Site

With a small site of only a couple of pages or so, welcoming people to your site is easy. Just about all of your visitors will entry the site through your home page and you can easily incorporate a welcome message into the page.

When your site has hundreds of pages containing popular information then many of your visitors will be locating pages of specific interest to them using search engines or links from other sites and may not go anywhere near your home page. So how can you welcome them to your site when you don't know what page they will use to enter your site? Including a welcome message on each page of your site would be one solution but this would become annoying to those visitors traversing the many pages of your site who have already seen the welcome message on a previous page.

The answer is to use JavaScript to test if this is the first page that the visitor has reached on your site and to display the appropriate welcome message only when this is the case.

It is reasonable to assume that the pages of your web site are all located on the one server and that the full address of each page will all start with the same domain name. If you are not using your own registered domain name then the pages will also all be located within the specific directory that the domain owner allocated for your use. Using JavaScript, we can access the full address of the current page by reference to location.href.

Assuming that you haven't forgotten the address of where you have loaded your web site, this field doesn't really help much in determining whether the visitor has just entered your site or has just come from another page within your site. To work this out we need the address of the page that the visitor has just come from. Fortunately, JavaScript has access to the full address of this page as well by reference to document.referrer (assuming that your visitor has not overridden this value in their browser - which is beyond your control to do anything about).

If you have your own domain name (for this example, let's assume its example.com) then the following code will extract the appropriate number of characters from the address of the previous page (in this case 11 - the length of www.xyz.com) and test if that previous page was located on your site.

 var ref = document.referrer;
var refdir = ref.substring(8);
refdir = refdir.substring(0,11);
if (refdir != 'example.com') {
// code here executes if previous page was not on this site

With this code, the first line loads the address of the previous page into a field with a much shorter name (to make it easier to reference), the second line strips the http://from the front of the address, and the third statement removes the surplus characters from the end of the address leaving the name of our domain if the previous page was on our site and the corresponding part of the address if it wasn't. We can now compare this with our domain name to determine if this is the first page on our site to be visited.

The only changes you need to make to this code to use it on your site is to change the domain name from example.com to your domain name and the length (11) to the length of your domain name. If you are using a sub-domain then you can use the same code but of course the domain name you are comparing will be longer to include the subdomain on the front. You can also include a directory name on the end if you want to test for if this is their first visit to that directory.

So we now have some JavaScript code that determines if the previous page was on our own site or not. The easiest way to incorporate this into every page is to code this as an external JavaScript that is called from every page on your site (attached of course to the bottom of the page immediately before thew </body> tag).

The code to load your welcome message into the appropriate spor in the page goes in place of the comment within the if statement in the code. This code will only be executed on the first page of your site that the visitor arrives at. Unless the visitor uses the back button to return to that page the code will not be executed on any subsequent pages that they visit on your site during this visit.

There are various ways that you might want to greet your visitors. One way would be to use innerHTML or DOM commands to insert additional text into a predetermined spot within the page. Another alternative would be to use a lightbox script (perhaps without the semi-transparent overlay to display it as an in page dialog. There are numerous other possibilities as to what you may want to incorporate to present to visitors when they first enter your site, its just a matter of incorporating the appropriate code.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow