underCover - Detect Below the Fold Views

Welcome to the demonstration page for the underCover plugin written by Scott Brooks at UserFirst Interactive. This plugin was created to further our goals here at UserFirst and extend our tracking methods so that we can get more robust data from our users while they are on our website. This plugin is intended to give our analytics team the knowledge of when a user scrolls below the fold on a page of your website.

This plugin is very simple to install. Just add the following code to the header of your website or include it manually on each page.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.undercover.js"></script>	

How does this code track if a user looks below the fold?

By adding this plugin to your header, when a user arrives at your website the code will detect the browser window width and height. Upon scrolling down the page, an event is triggered, and the code checks to see if the user has scroll below the specified height. If they have, then a custom even is triggered.

Usage

Variables:

number_of_pixels_below_fold - # of pixels you want to trigger the "below the fold" event. i.e. if a banner is 300 pixels below the fold and you want to detect if a user saw it, then set it to 300.
execute - code to execute.

Sample Code

Sample usage for underCover:

$(document).ready(function() {
	$().undercover({
		number_of_pixels_below_fold:	200,
		execute:	function()
		{
			alert("You have scrolled below the fold!!");
		}
	});
});

Demo

Here's a demo of the plugin displaying the below the fold detection.

Download

Plugin

Download version:

Version 1.0 - underCover js file

Download the complete demo here.

Questions? Comments?

We'd love to hear from you! Visit our blog and let us know what you think of our creations!