Present a Special Message
to Really Interested Site Visitors

When people view 3 or more pages at a website, it is likely they are either thoroughly interested in the content or they are looking for something specific.

This article describes how to deliver a special message to those site visitors.

Only this page is enabled for the demonstration. According to the cookie, you have viewed this page times. When that number is exactly 3, the special message will appear at a point immediately above this paragraph. (The number increments whenever you reload the page.)

A cookie is set when the visitor first arrives. Whenever a web page enabled with this system is loaded into the browser, the value of the cookie is incremented, like a counter.

As the cookie's value reaches 3 (or other number you specify), a special message is delivered.

For examples, the special message may be a suggestion to use the site's search box for further research, a special price on the site's main product, or a form where the site visitor can type in any lingering questions.

The message can be delivered with an embedded content div, with an absolutely positioned content div, or even with a JavaScript alert box. Code for each is below. The article's example is an embedded content div.

Special Message Implementation

The monitoring of the page counts and delivering the special message is done with JavaScript.

When the special message is delivered with a JavaScript alert box, the entire message is coded in the JavaScript. A bit further down, I'll show you how to do that.

However, when the message is delivered with a content div, the div is coded with HTML. And, the content div needs to be in the web page source code somewhere above the JavaScript.

Below, the code for the two types of content divs is first. Then, the JavaScript. Following that is information about how to put it all together.

The Embedded Content Div

Here is the code for an example embedded content div.

<div 
   id="specialmessage" 
   style="display:none; 
      border:double 3px black; 
      padding:25px;
      background-color:yellow; 
      color:navy; 
      font-weight:bold;">
This is an example special message.
</div>

The display:none style needs to be in place. Otherwise, the style and the message may be changed to suit.

The div source code is inserted into the web page in the position where it will be displayed.

The embedded content div will display within the content at the place in the web page where its code is inserted.

The Absolutely Positioned Content Div

Here is the code for an example absolutely positioned content div.

<div 
   id="specialmessage" 
   style="position:absolute; 
      display:none; 
      z-index:999;
      top:-500px; 
      left:-500px; 
      border:double 3px black; 
      padding:25px; 
      background-color:yellow; 
      color:navy; 
      font-weight:bold;">
This is an example special message.
</div>

These five style definitions need to be in place:

position:absolute;
display:none;
z-index:999;
top:-500px;
left:-500px;

The top: and left: definitions may be changed so long as the values put the div off screen. The z-index: definition may be changed, too, if necessary.

Other than those 5, the style may be changed to suit. And the message may be changed, also, of course.

The div source code is inserted into the web page somewhere above the JavaScript.

The absolutely positioned content div will be displayed on top of the current content in the position specified in the content (instructions further below).

The JavaScript

Here is the JavaScript. There are two variables to customize, near the top of the code. Then, the last function in the code is customized depending on how the special message is to be delivered.

<script type="text/javascript"><!--
// Present a Special Message to Really Interested Site Visitors
// https://www.willmaster.com/
// Copyright 2009 Bontrager Connection, LLC
//
// Two variables to customize.

// Place 1.
// Specify a cookie name.

var CookieName = "specialMessage";


// Place 2.
// Specify the page load number to trigger the special message.

var PageLoadNumber = 3;


// No other customization required, unless 
//   PresentMessage() needs to be customized.
/////////////////////////////////////////////

if( SetCookie(ReadCookie()) == parseInt(PageLoadNumber) ) { PresentMessage(); }

function SetCookie(value) {
value = parseInt(value) + 1;
document.cookie = CookieName + "=" + escape(String(value)) + '; path=/';
return value;
} // function SetCookie()

function ReadCookie() {
var cookiecontent = 0;
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 = parseInt(document.cookie.substring(cookiebegin,cookieend));
      }
   }
return cookiecontent;
} // function ReadCookie()

function PresentMessage() {
document.getElementById("specialmessage").style.display = "block";
} // function PresentMessage()

// --></script>

The two variables to customize are the cookie name and the number of page loads upon which the special message is delivered. The places to customize are marked near the top of the JavaScript.

If neither variable's value is changed, the cookie name is "specialMessage" and the special message will be delivered when the third page load is detected.

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

Putting It All Together

Delivering the special message with an embedded content div —

If you are using the embedded content div, the only thing left to do is testing. That is, unless the id of the embedded content div is something other than "specialmessage".

If the content div id is not "specialmessage", then a change will need to be made in the JavaScript.

The last function in the above JavaScript is PresentMessage(). It has one line of code to execute. Within that line, you'll see "specialmessage". Change that to the id of the content div.

Delivering the special message with an absolutely positioned content div —

If you are using the absolutely positioned content div, replace the current function PresentMessage() with this.

function PresentMessage() {
var div = document.getElementById("specialmessage");
div.style.top = "200" + "px";
div.style.left = "300" + "px";
div.style.display = "block";
} // function PresentMessage()

The above function has four lines of code to execute.

If the contend div id is not "specialmessage" then change in the first line of the code to execute replace "specialmessage" with the id of the div.

In the second line, change "200" to the number of pixels space that shall be between the top of the browser window to the top of the special message div.

In the third line, change "300" to the number of pixels space that shall be between the left edge of the browser window to the left edge of the special message div.

The fourth line is okay as is.

You are ready to test.

Delivering the special message with a JavaScript alert box

If you are using an alert box to deliver the special message, replace the current function PresentMessage() with this.

function PresentMessage() {
alert("Special Message Here");
} // function PresentMessage()

Replace "Special Message Here" with your special message.

If your special message contains any double quotation mark characters (other than the ones enclosing the message itself), then escape them with a backslash character. Example:
"My \"message\" is here."

The message must be all one line in the JavaScript code. However, line breaks can be implied so they'll be printed in the alert box. To imply a line break, use the backslash character followed by a lowercase "n" character. Example:
"Line one.\nLine two."

Testing

Because the special message is delivered only when a specific number of web pages have been delivered to a browser, it puts a bit of a crimp into straight forward testing.

You'll need to delete the special message cookie before a test can be repeated.

My advice is to use a browser with an easy way to delete the special message cookie.

The easiest I've found is Firefox with Web Developer add-on. The add-on has an optional menu bar. There, simply click on "Cookies" and, in the dropdown, on "Delete Domain Cookies."

People who spend time on a website are special people. You now know how to deliver a special message to them.

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.