By: Mitchell Harper

January 25th, 2002

Reader Rating: 8.5

Every top Internet marketer knows that ezine advertising and promotions are some of the best ways to drive targeted traffic to your site for little to no cost. If you run a Website and send an ezine to your visitors, how do you let them signup to receive it? Do they have to navigate through 5 pages on your site just to get to the signup page, or do you let them have it as soon as they enter your site?

If they can't see the signup form to join your ezine as soon as they come to your site, then chances are that you're missing out on grabbing their email address all together. Using some simple HTML and a bit of JavaScript, you can easily get your signup form to where it needs to be, without ruining your visitors' experience on your site.

A Popup is the Answer

The technique I'm about to describe is one of the best I've ever used to attract more subscribers to my ezine. Firstly, it involves the creation of a popup window using JavaScript. Like many other Webmasters, I once thought that using a popup window degraded the professionalism of my site. Boy was I wrong!

Adding a simple signup popup to my site increased my ezine subscriptions from about 20 a day to well over 100! No joke.

Visitors don't want to be annoyed by popup windows every time they visit your site, however. This is where cookies come into play. Using cookies, you can make their browser "remember" if your ezine signup page has already been displayed. If it has, then the page won't be displayed again.

Getting and Setting the Cookie

To start with, we need to create the generic functions that will actually get and set the cookies from the user's browser. To access the visitor's cookies through JavaScript, we manipulate the document.cookie value. It contains all the cookies that have been set for this user when they visit our site. It's important to note that we can only access the cookies that we have set, and not those set by other sites.

Cookies are stored by the Web browser in a plain text file on the visitor's computer. The browser checks the cookie file on their hard drive to see whether it contains any cookies for our site; if it does, the browser loads them automatically for us.

Each cookie is stored as a name/value pair. A sample document.cookie variable looks like this:

myCookie=myValue;myName=Mitchell;mySite=www.devarticles.com;

We will create two functions named setCookie and getCookie. They're created between <script> and </script> tags, just before the </head> tag of our HTML page, like this:

<script language= "JavaScript">

function setCookie(cookieName, cookieValue, cookiePath,  
cookieExpires)  
{

cookieValue = escape(cookieValue);  
if (cookieExpires == "")  
{  
var nowDate = new Date();  
nowDate.setMonth(nowDate.getMonth() + 6);  
cookieExpires = nowDate.toGMTString();  
}  

if (cookiePath != "")  
{  
cookiePath = ";Path=" + cookiePath;  
}  

document.cookie = cookieName + "=" + cookieValue +  
";expires=" + cookieExpires + cookiePath;
}

function getCookie(name)  
{
var cookieString = document.cookie;  
var index = cookieString.indexOf(name + "=");  

if (index == -1)
{
return null;  
}

index = cookieString.indexOf("=", index) + 1;  
var endstr = cookieString.indexOf(";", index);  

if (endstr == -1)
{
endstr = cookieString.length;  
}

return unescape(cookieString.substring(index, endstr));
}
</script>

The setCookie function shown above accepts the name, value, path and expiry date of a cookie to set. It's used like this:

setCookie('myCookie', 'myValue', '', '');

This would set a cookie named "myCookie", which would contain the value "myValue". The last two arguments to the setCookie function are the cookie path and its expiry date. As you can see, you can leave the last two arguments as ''. The setCookie function will use default values if they are empty.

The getCookie function accepts the name of a cookie to retrieve, and returns its value if it exists:

var c = getCookie('myCookie');

"c" would now contain "myValue".

Displaying the Ezine Signup Window

Now that we can get and set cookies, we're ready to actually use the setCookie and getCookie functions. We will create a function that will check whether or not a specific cookie is set. If it is, then we will not display the ezine popup window. On the other hand, if there is no cookie set, we will display the ezine popup page and set a cookie to indicate that the signup form has been shown. The function is very simple, and looks like this:

function doPopup()  
{  
 var ezine = getCookie('popupShown');  
 setCookie('popupShown', 'true', '', '');  
 
 if(ezine == '')  
 { // Show the popup window  
   window.open('ezine.html', 'ezineWin', 'width=500,height=400');  
 }  
}

The doPopup function starts by creating a new variable named ezine, which will contain the value of the "popupShown" cookie. Irrespective of whether or not the getCookie() function returns a value, we set the "popupShown" cookie. Our "setCookie" function automatically sets a period of time for which the cookie will persist. As you can see from the code snippet below (taken from the setCookie function we created above), the default is 6 months:

var nowDate = new Date();  
nowDate.setMonth(nowDate.getMonth() + 6);  
cookieExpires = nowDate.toGMTString();

By resetting the "popupShown" cookie each time the user visits this page, we're making sure the popup is never displayed again as long as they continue to visit the site at least once every six months.

The most popular times to display the actual signup form are when the user jumps to another page or exits your site. Both of these events trigger the onUnload event handler. We need to tell the browser to call the doPopup function when this occurs so we modify the <body> tag like this:

<body onUnload="doPopup()">

Now, if the visitor jumps to another page on our site, or closes the browser window, then our ezine popup will be displayed in a new window.

Conclusion

This is a very simple method to attract more subscribers to your ezine, and it'll work for small, medium and large sites alike! If you're competent with a server-side scripting language such as ASP, PHP, or JSP, then I would recommend creating the signup form using one of these languages and storing the visitors' email addresses in your newsletter database when they click on the submit button.