How to detect user scrolling behaviour with JavaScript

Tracking user behaviour can help you tailor your website to users' needs and keep them on your site. We've developed a script to track how far down a page a user scrolls before navigating away from that page, which should be especially useful for websites with longer pages. If for example you found that hardly any users actually scrolled to the very bottom of your web page you may then decide to either condense your content or adjust it so more users are likely to view it.

What skills do I need to apply scroll detection?

• JavaScript
• MooTools framework
• PHP
• MySQL
• CSS
• HTML
• AJAX

What do I need to start tracking user scroll behaviour?

Before we start you will need to grab hold of the MooTools JavaScript framework Core and More files, the Date Picker files and the scroll tracking files which can be found here: Scroll Detection Files

For the purpose of this tutorial we will create a demo page for this code to run on but this can be applied to any page on a site (see 'How to Integrate into your site' below).

Overview of scroll detection

Before going into detail it's worth providing a textual sketch of the technology involved and how it will be used.

• JavaScript using the MooTools framework used to record the users scroll behaviour
• AJAX and PHP used to save the data
• A MySQL database to store the data
• Finally some HTML and CSS to display the results

Let the coding begin...

First of all place the files you just downloaded in a folder and create a blank html file. The JavaScript creates a div with an id of 'scrolldetection'. This is used for debugging and will only be displayed on the page if debugging is enabled and the script is functioning correctly. The JavaScript also creates a div with an id of 'trackingresults', this is used to display the tracking data.

Now add whatever content you want to the page to make it nice and tall (the following site may help to create some dummy text: www.lipsum.com). You will then need to link to the necessary JavaScript and CSS files in the head of your web page code as detailed below:

(START-CODE)

<link href="stylesheet.css" rel="stylesheet"></link>

<script type="text/JavaScript" src="mootools.js"></script>

<script type="text/JavaScript" src="mootools_more.js"></script>

<script type="text/JavaScript" src="control.js"></script>

<!-- Date Picker -->

<script type="text/JavaScript" src="Locale.en-US.DatePicker.js"></script>

<script type="text/JavaScript" src="Picker.js"></script>

<script type="text/JavaScript" src="Picker.Attach.js"></script>

<script type="text/JavaScript" src="Picker.Date.js"></script>

<link href="datepicker.css" rel="stylesheet"></link>

(END-CODE)

Scroll detection database storage

Now you have the web page, you will need to create a MySQL database and table to store the captured data. In the database we will store the depth the user scrolled to (ScrollDepth), the file name of the web page the user is on (Page), and the date (DateAdded).

(START-CODE)

CREATE DATABASE scrolltrack_db;

USE DATABASE scrolltrack_db;

CREATE TABLE userscrolls (`ID` int(11) NOT NULL auto_increment,

`ScrollDepth` float(22,2) default NULL,

`Page` varchar(255) default NULL,

`DateAdded` datetime default NULL,

PRIMARY KEY (`ID`),

KEY `FirstNameIndex` (`ScrollDepth`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

(END-CODE)

Scroll detection configuration

There are certain options that you can amend within the control.js file:

debug: This value can be either true or false. By default the 'scrolldetection' div is hidden by the CSS but setting debug to true the JavaScript will amend the CSS display value so the div will become visible giving an indication that the script is working.

runtracker: This value can be either true or false. If set to true then tracking will be stored in the database table. When debugging or viewing the results it is best to set this to false.

showresults: This value can be either true or false. If set to true then the results of the tracking will be displayed on the pages with any results.

domain_home_page: This needs to be set to the value of the file name for your home page so that if a user is on your domain with no filename selected they will still be tracked, e.g. http://www.bluelinemedia.co.uk

(START-CODE)

debug: false,

runtracker: false,

showresults: true,

maxpageheight: '',

domain_home_page: 'index.php'

(END-CODE)

You will also need to set up your database settings at the top of the ajax.php file.

Let's start some scroll tracking

Now the script is up and running let's get some test data in there so we can see this script in action. First of all make sure 'runtracker' is set to true. Then load the web page and scroll down a certain amount, then close the page. Repeat this process numerous times to build up a few tracking results. Once you have a set of results set 'runtracker' to false and set 'showresults' to true to view the data that has been tracked.

Add user scroll tracking to your website

Firstly you will need to set up the database table in your website database and copy the JavaScript, CSS, AJAX and image files up to your web space. Then all you need to do is to add the scrolldetection and trackingresults divs to every page you want to track on your website. If you have a template to create your pages add it to this. The divs should be added just after the HTML '<body>' tag.

You will then need to amend the options in the control.js file. Make sure 'debug' is set to true as this will help you to identify if the script is working: you should see this message on the page: 'Scroll detection is active!'. Finally set up your database settings in ajax.php and you're good to go.

Filtering the user scrolling results

Included in this script is a filter box that will appear in the top right corner of the web page when showresults is set to true. This will display the date when tracking was started (i.e. date first tracking entry was recorded) and a date form. The date form enables you to view the tracking data for a particular date or month or year. Just leave the day and/or month values empty to leave the filtering more vague. Clicking on the calendar icon will popup a date picker to make it easier to choose a specific date.

So what do these results mean?

If you have enabled the showresults option then you will see all the results displayed on the page. Transparent horizontal bars will appear denoting the results. The results are grouped every 50 pixels to make the results easier to read. The width of the bar represents the percentage number of the result and shows the number of users who have not viewed that area of the page. The text within the bar gives the exact percentage. For example if there is a bar on your page that says 60%, then this means only 40% of users have read that far down the page.

Generally you will see no bars at the top of the page with them becoming wider as you scroll down the page of results. If the bar is the full 100% width then no users have viewed that content on your web page.

This should give you a good indication of how much of your content most users are actually viewing. Once you know how users are really using your pages, you can enhance content and improve results.