Page View History: Leaving Breadcrumbs for Visitors

Learn how to be a gracious host and give your site visitors links to their most recently viewed pages. The display may also contain the current page's title.

It can be considered akin to a "You are here" and "You were here" map.

The system uses JavaScript.

When a browser arrives on one of your pages for the first time, a cookie is set with the title and URL of the page. Thereafter, when other pages are visited, the cookie is updated with the latest page title and URL.

Thus, the cookie contains a history of pages viewed.

In the JavaScript, you can specify the maximum number of links to keep track of. You can also change the cookie name and how long the cookie shall last.

Publishing the Visitor Page View History Breadcrumbs

To display the visitor page view history, first decide where it will be displayed.

At that place, put this JavaScript.

<script type="text/javascript"><!--
if(HistoryContent.length) {

document.write('<'+'div ');
document.write(' id="visitorhistory" ');
document.write(' style="border-style:solid; border-width:1px; padding:0 5px 10px 20px;">');

document.write('<'+'h3>You were here:<'+'/h3>');

document.write(HistoryContent);

document.write('<'+'h3>You are here:<'+'/h3>');

document.write(CurrentPage);

document.write('<'+'/div>');

}
//--></script>

The JavaScript publishes the visitor page view history and related content only if a visitor page view history is available. Change the document.write() statements to publish whatever you wish to say.

The example JavaScript writes an HTML div with a border within which the information is presented.

Notice that the div also has an id value. This is optional. However, if present, CSS can be used to style the current page info and page view history content. The current page title is between P paragraph tags, as is each link of the page view history.

In the example, the id value is "visitorhistory". To make the text in the paragraphs bold with less than normal margins and to make the link text italic without underlining, this CSS will do the trick.

<style type="text/css">
div#visitorhistory p { 
   font-weight:bold; 
   margin-top:3px;
   margin-bottom:3px;
   }
div#visitorhistory a { 
   font-style:italic;
   text-decoration:none;
   }
</style>

document.write(HistoryContent); prints a list of links to the pages that have been viewed.

document.write(CurrentPage); prints the title of the current web page.

Both of the above are optional, as is the bordered div and the headings. You may design the visitor page view history area as you please.

The JavaScript may be put into an external file for importing into web pages. See Importing JavaScript From An External File for instructions.

(If you're wondering why the HTML tags written with JavaScript have the first angle bracket separated from the rest of the tag, it is because HTML validators exist that try to parse JavaScript as if it was HTML. This can cause error messages about code with no errors. Thus, you see things like '<'+'h3>' instead of '<h3>' in the JavaScript.)

Keeping Track of Pages Viewed

JavaScript is used to keep track of the visitor page view history. It uses a cookie to do so.

Put the JavaScript above where you will display the visitor page view history. In the web page HEAD area is a good place.

<script type="text/javascript"><!--
// Obtained from https://www.willmaster.com/
//
// Specify maximum number of history links to keep, 
//    minimum 1.
var MaximumNumberOfLinks = 15;

// Specify cookie name.
var CookieName = "HistoryLinks";

// Specify number of days cookie is to remain on visitor's 
//    computer. (Use 0 to delete cookie when browser closed.)
var DaysToLive = 366;

// No other customizations required.
var HistoryLink = new Array();
var HistoryTitle = new Array();
var CurrentPage = new String();
var HistoryContent = new String();
DaysToLive = parseInt(DaysToLive);
MaximumNumberOfLinks = parseInt(MaximumNumberOfLinks);
if( MaximumNumberOfLinks < 1 ) { MaximumNumberOfLinks = 10; }

function GetCookie() {
var cookiecontent = '';
if(document.cookie.length > 0) {
   var cookiename = CookieName + '=';
   var cookiebegin = document.cookie.indexOf(cookiename);
   if(cookiebegin > -1) {
      cookiebegin += cookiename.length;
      var cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      cookiecontent = document.cookie.substr(cookiebegin,cookieend);
      }
   }
if( cookiecontent.length < 3 ) { return; }
cookiecontent = unescape(cookiecontent);
var historyList = cookiecontent.split('&');
for( var i = 0; i < historyList.length; i++ ) {
   var link = historyList[i].split('=',2);
   HistoryLink.push(link[0]);
   HistoryTitle.push(link[1]);
   var temparray = link[0].split('~amp;');
   link[0] = temparray.join('&');
   temparray = link[1].split('~amp;');
   link[1] = temparray.join('&');
   HistoryContent += '<'+'p>'+'<'+'a href="'+link[0]+'">'+link[1]+'<'+'/'+'a>'+'<'+'/'+'p>';
   }
}

function PutCookie() {
if( HistoryLink.length < 1 ) { return; }
var len = HistoryLink.length;
while( HistoryLink.length > MaximumNumberOfLinks ) {
   HistoryTitle.shift();
   HistoryLink.shift();
   }
var pairs = new Array();
for( var i = 0; i < HistoryLink.length; i++ ) { pairs.push(HistoryLink[i]+'='+HistoryTitle[i]); }
var value = pairs.join('&');
var exp = new String();
if(DaysToLive > 0) {
   var now = new Date();
   now.setTime( now.getTime() + (DaysToLive * 24 * 60 * 60 * 1000) );
   exp = '; expires=' + now.toGMTString();
   }
document.cookie = CookieName + "=" + escape(value) + '; path=/' + exp;
}

function RecordCurrentPage() {
var link = document.URL;
var title = document.title.length > 1 ? document.title : 'Untitled';
CurrentPage = '<'+'p>'+title+'<'+'/'+'p>';
var temparray = link.split('&');
link = temparray.join('~amp;');
var temparray = title.split('&');
title = temparray.join('~amp;');
HistoryLink.push(link);
HistoryTitle.push(title);
}

GetCookie();
RecordCurrentPage();
PutCookie();
//--></script>

In the JavaScript, you may change the maximum number of history links to keep track of, the cookie name, and the number of days the cookie shall exist.

No other edits required.

Every web page that will be part of the history links system will need the JavaScript. The JavaScript may be put into an external file for importing into web pages.

The Page Views Breadcrumb System

JavaScript on each web page uses a cookie to keep track of pages visited. Every web page to be included in the history when visited needs this JavaScript.

JavaScript is also used to publish the history for the convenience of site visitors. This JavaScript is needed only at the places where the history will be published.

Either or both of the above may be put into an external JavaScript file for importing into web pages.

Will Bontrager