How to Use Cookies, Part I

This article describes how cookies work and ways cookies can be used for your benefit, as a webmaster, without compromising your visitor's privacy.

The second article in this series will show how to use cookies with JavaScript. And the third article will do that with Perl CGI programs.

Cookies are benign text data records stored on your visitor's hard drive. According to the specifications, the only internet site able to retrieve a cookie from that hard drive is the site that put it there in the first place.

Cookies are not programs. They are plain text data.

Cookies can not gather information on their own. The data cookies contain has been gathered by other means. And cookies can not collect personal information about your visitors from their computer.

Cookies allow your site to store information on your visitor's computer for later retrieval.

Why Sites Use Cookies:

When your visitors surf your site, they go from page to page. Ideally, it is a smooth, continuous experience.

For your server it is not that way. During the time between when one of your visitors arrives at pageD.html and decides to click to pageR.html, there may have been dozens of other visitor browsers retrieving those same and other pages. Once your server delivers a page to a browser, it disconnects from the browser.

There is no automatic method of remembering information from one page to the next.

In many situations, using cookies is the most efficient method of remembering and tracking preferences, purchases, commissions, and other information required for better visitor experience or site statistics.

How It Works:

Your server sends some data to the visitor's browser in the form of a cookie. (The exact format will be discussed later.) The data is plain text.

The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive.

Now, when the visitor arrives at another page on your site, the cookie is available for retrieval. Once retrieved, your server knows/remembers what was stored.

Cookies have specific size limits:

A cookie may be no larger than 4k.
There may be no more than 20 cookies per domain.
There may be no more than 300 cookies total from all sources.

(Note that browsers are not required to conform to those limits. They may allow more or larger cookies. However, responsible programming requires respect for the specifications.)

If your server asks a browser for cookies it may have accepted while at your site and none are available, either

the visitor has never been at your site,
the browser did not accept cookies your server offered,
in order to stay within the 300 cookie limit, the browser deleted your domain's cookie(s) from the hard drive when accepting cookies from other sites, or
the visitor manually deleted your server's cookie(s) from the hard drive.

What It Is:

Cookies are a plain text data record of 5 variable-length fields:

expires=_______: The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
domain=_______: The domain name of your site.
path=_______: The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page.
secure: If this field contains the word "secure" then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.
name="value:" You or your programmer determine what name to call this field and what data it contains. The name and data may be any visible plain text characters except semi-colons and commas. (To store those restricted characters or spaces, a plain text encoding method is used.) For example, "%20" (without the quotes) would represent a space in the generally accepted hexidecimal URL encoding system. No particular encoding method is required, except it must be plain text and the program decoding it must know the method used.

When your visitor's browser accepts a cookie from your site, it stores the record in a cookie database on the visitor's hard drive. That's actually what a cookie is -- a record in a plain text database stored on the visitor's hard drive.

Reasons for Using Cookies:

(1)Many shopping cart programs use cookies to keep track of items chosen for purchase.

When a browser requests a page, the shopping cart program asks for any available cookies. Cookies tell the shopping cart what items are already in the cart. When a new item is chosen (or removed from the cart) the server sends an updated cookie to the browser. At checkout time, the latest cookies tell the shopping cart what items are being purchased.

(2)Many affiliate programs use cookies to determine whether or not a visitor has previously been at the site and which affiliate earns the referral.

Your visitor clicks on one of your affiliate links. S/He arrives at the your affiliate company's site and their server sets a cookie with your affiliate number. The "expires" date in the cookie is set for whatever length of time you earn commissions on sales if/when the same visitor returns to the affiliate company's site.

(3)Using cookies is the most accurate method of counting unique visitors to your site.

IP Address counting is not reliable. Visitors from the same proxy server are likely to have the same IP Address. On the other hand, one of the largest ISP's (and there may be others do this, too) sends a different IP Address with every page view. With cookies you get the most accurate count.

(4)Using cookies is also the most accurate means of calculating the average number of pages viewed by your visitors before they leave your site, what percentage are repeat visitors, and the average number of times a visitor comes back to your site.

(5)Cookies can store visitor preferences.

This is a method used by portal page sites so their visitors can customize their portal page.

(6)
If you have more than one site, you can track visitors going from site to site.

You do this by displaying an image on all pages of each of your sites, an image that is retrieved from one common domain via CGI or other method that sets and retrieves cookies and also maintains auxiliary databases on its server. The image can be a banner, a 1x1 pixel GIF, or any other image. Because the image is retrieved from one image dispensing domain (even when loading a page on a different site), the image dispensing domain can maintain a record of pages visited on multiple sites. Many banner dispensing domains use cookies this way.

This method of using cookies can be a privacy infringement if the data thus obtained is collated with other sources of information.

Some Things that Affect Cookies:

People sometimes share computers.
Some people use more than one computer.
Some browsers are set to reject cookies.
Cookies can be erased.

Still, using cookies is the most efficient method of remembering and tracking.

Watch for Parts II and III of this series. They will show you how to use cookies for your site's benefit.
Articles in series:

How to Use Cookies, Part I
How to Use Cookies, Part II
How to Use Cookies, Part III

How to Use Cookies, Part II

(Last week's " How to Use Cookies, Part I " article talks about what cookies are, reasons to use cookies, and how they work.)

This week we will learn how to implement JavaScript cookie code on your site. The code will determine you how many times the visitor has loaded the page at your site. You can use that number to

display a popup window on the first visit,
display a special popup window depending on the number,
display different page content for different numbers, and/or
run other JavaScript functions depending on the number.

First, retrieve the JavaScript code from the demo page.

Lines 6 through 54 contain the required JavaScript cookie code. There is one variable, "DaysToLive" (on line 17), that you need to modify. The number you provide here is the number of days you want the cookie to remain on the visitor's computer. No other changes are required, just copy and paste the cookie code into your own page -- in the HEAD section just like on the demo page.

Lines 61 through 67 contain a function to launch a popup window. It could be any other function you want to run when the visitor has been at your page(s) a specific number of times, so feel free to customize or replace with your own.

Lines 85 through 102 are a demonstration of how to use the JavaScript cookie code. These lines, and how to customize them, are explained here.

The line

visits = GetCookie('page_name');

is where your page finds out how many times the visitor has been at your page(s). If it's the first visit, the value in the variable "visits" will be the digit 1. If the second, the value will be 2, and so on. However, if your visitor has the browser's cookies turned off, the number will not increment.

The parenthesis in the call to the GetCookie() function contains the name of the cookie that keeps count. (The name is between apostrophes.) In the example, the name is: page_name

If you use this JavaScript cookie code only on one page, you can leave the cookie name as is, or use anything else you want (only alphanumerics and underscores, no spaces, in the cookie name). However, if you will use the cookie code on multiple pages, here are considerations:

If you use the same cookie name on every page, the value in the variable "visits" will be the total number of page views for every page visited (every page that has the cookie code).
If you use different cookie names, the value in the variable "visits" will be the number of page views only for the pages using that specific cookie name.
For example, you might have cookie name MyIndex for your index page and cookie name MyInterior for all the interior pages of your site. When your visitor loads your index page, the value of "visits" will be the number of times the visitor has loaded your index page. And when your visitor loads any of your interior pages, the value of "visits" will be the total number of times the visitor has loaded interior pages.

The lines

if(visits == 1) {
document.write('<h2>Welcome!</h2>');
}
if(visits == 2) {
document.write('<h2>Welcome, again!</h2>');
}
if((visits >= 3) && (visits <= 9)) {
document.write('<h2>Welcome, friend!</h2>');
}
if(visits > 9) {
document.write('<h2>Welcome, loyal friend!</h2>');
}

determine the content of a heading on the page.

If it is the first visit to the page (or group of pages), the heading is"<h2>Welcome!</h2>".

If it is visit number 2, the heading is "<h2>Welcome, again!</h2>".

If it is the third through ninth visit, the heading is "<h2>Welcome, friend!</h2>".

And for every visit after the ninth visit, the heading is"<h2>Welcome, loyal friend!</h2>".

Use the above example to put your own custom content on your page, content depending on how many times your visitor has loaded your page(s).

The lines

if(visits == 1) { Popup('firstvisit.html',500,150); }
if(visits == 2) { Popup('secondvisit.html',500,150); }
if(visits == 15){ Popup('loyal.html',600,200); }

determine whether or not a JavaScript function is run, the determination depending on the number of times your visitor has loaded your page(s).

If it is the first visit to the page, the function Popup() is run to make a popup window 500 pixels wide and 150 pixels high. In the popup window will be the page found at URL firstvisit.html.

If it is the second visit, the function Popup() is run to make a popup window the same size as the first one. This time, the page in the window is secondvisit.html.

Then, when it is visit number 15, the function is run again. The window is 600 high and 200 wide; and contains the page at URL loyal.html.

You may substitute your own JavaScript functions. That makes your page very customizable.

That's all there is to it!

Next week's "How to Use Cookies, Part III" will have a CGI cookies implementation for you, one that will pre-fill some form fields for your visitor. Watch for it.

Articles in series:

How to Use Cookies, Part I
How to Use Cookies, Part II
How to Use Cookies, Part III

How to Use Cookies, Part III

This article shows you how to implement cookies to pre-fill in form fields for your visitor.

The demo page demonstrates with a feedback form. The code can be used for other forms as well. Note: the demo uses a script that requires Perl version 5 or higher, UNIX or Linux, and sendmail.

The demo page and the related code explain how to do it yourself.

The demonstration is called CGI-JS Cookie Feedback Form.

When your visitor goes to a page with your CGI-JS Cookie Feedback Form or other form that uses the code, JavaScript functions check for specific cookies on your visitor's hard drive. If found (if your visitor has used the form before with cookies enabled), the appropriate form fields are immediately filled in. If not found, the fields remain blank.

(By the way, the CGI-JS Cookie Feedback Form set of code is designed to help you spam-proof your site by eliminating the need to put your own email address anywhere in the form, not even as a hidden form field.)

When your visitor submits the form, the CGI script emails the form info to you and then sets cookies on the visitor's hard drive. The cookies contain the content of the form fields as submitted to the CGI script. Then the next time the visitor goes to the page with your CGI-JS Cookie Feedback Form, the content of the cookies will enable the JavaScript to immediately fill in some of the form fields for your visitor.

The content of the form fields submitted to the CGI script undergo a bit of encryption so email addresses will have some cloaking.

The JavaScript and Perl script are well commented with implementation instructions and also notes for changing the form and porting the code to other scripts.

Try the CGI-JS Cookie Feedback Form demonstration

The special cookie code in the CGI script can be put into scripts that serve other forms, too. And those forms can have the JavaScript code to pre-fill form fields. So long as the form fields have identical names (so the cookie names are identical), one form field can be filled with information previously gathered at another form.

Part I of this series talked about what cookies are and why you might want to use them. Part II showed how to make certain things happen depending on how often the visitor has been at your site (such as displaying a certain message the first visit). Those articles are linked from the library

Articles in series: