Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

How Far Did the User Scroll?

By Stephen Bucaro

From a reader; "I'm trying to find code snippet I can add to html pages so I can tell how far a reader scrolled down in a sales letter before bailing and have that info show up in a log or other file that is easy to get to. That way I know where people lose interest in a sales letter or article so it can be changed to be more effective."

Let's see what we have in our Java Script bag of tricks. The html <BODY> tag has a property, scrollTop that gives you the upper-left corner pixel location of the users browser window. Along with the <BODY> tag properties clientHeight and clientWidth this can give you the location of the pixel in the lower-right corner of the users browser window, as shown below.

var st = document.body.scrollTop + 
(document.body.clientHeight *  document.body.clientWidth);

But because of the flowing layout nature of a webpage, this value is of limited practical use. The problem is that the user can change the size and shape of their browser window. As the user adjusts the shape of their browser window, the text, images, and other elements rearrange themselves as they flow into position on the webpage.

Text has a property called line-height that relates to the amount of white space between the lines. If the user shapes their browser into a thin tall column, it's possible that each word of text contributes line height area to the browser window. If the user shapes their browser into a thin wide shape, it's possible that the text might be arranged as a single line, reducing the area used for line height in the browser window.

The only practical way to determine how much of a webpage the user actually viewed requires that the webpage's dimensions be locked. A webpage's dimensions can be locked by placing it's contents within a table and specifying the tables Width attribute. Or by placing it's contents within a div or span and using style rules to specify it's width. An example of webpage contents within a fixed width table is shown below.

<table width=500><tr><td>
<p><font size=3>Amendment 7</p>

<p><font size=2>In suits at common law, where the value in
controversy shall exceed twenty dollars, the right of trial
by jury shall be preserved, and no fact tried by a jury
shall be otherwise re-examined in any court of the United
States than according to the rules of the common law.</p>

<p><font size=3>Amendment 8</p>

<p><font size=2>Excessive bail shall not be required, nor
excessive fines imposed, nor cruel and unusual punishments
inflicted.</p>

<p><font size=3>Amendment 9</p>

<p><font size=2>The enumeration in the constitution of
certain rights shall not be construed to deny or disparage
others retained by the people.</p>

<p><font size=3>Amendment 10</p>

<p><font size=2>The powers not delegated to the United
States by the Constitution, nor prohibited by it to the
States, are reserved to the States respectively, or to the
people.</p>
</td></tr></table>

•The table width attribute specifies the MINIMUM width. If you place something larger than the with in the table, the table width will increase to accommodate that object.

Another contributer to the problem is that different browsers have different default margin sizes. You must assign specific margins in the <BODY> tag. The example below sets the margins to zero.

<body topmargin=0 leftmargin=0 rightmargin=0
 onUnload="LogLeave()">

In the line above, the onUnload event of the body tag calls a Java Script function named LogLeave. The code for the LogLeave function is shown below.

<script language="JavaScript">
function LogLeave()
{
  var par;
  var loc = document.body.scrollTop +
    (500 *  document.body.clientHeight);
  if(loc < 42428) par = 0;
  else if(loc > 42428 && loc < 85621) par = 1;
  else if(loc > 85621 && loc < 129214) par = 2;
  else if(loc > 129214 && loc < 172858) par = 3;
  else if(loc > 172858) par = 4;

  alert(par);
}
</script>

This Java Script code block should be placed in the <HEAD> section of the webpage. In the code, the value Loc is calculated by multiplying the table's width (500 pixels) by the height of the webpage, and then adding the pixel value at the upper-left corner of the browser window. It then uses an if/else if structure to test for end-of-paragraph pixel locations to determine which paragraph was visible when the user left the page.