Measuring How Far Down Your Homepage Visitors Scroll

As optimistic web developers, we’d like to imagine that most people visiting our site for the first time will scroll down our homepage to check out all of the content we’ve painstakingly laid out for them.

But how many actually scroll down?

With a little bit of JavaScript and the help of an analytics service, we can figure it out:

	// This code assumes that each section of your homepage uses a "section" tag
	// and each one has an id corresponding to its purpose: "testimonials", "pricing", etc
	( function() {
	var viewedSections = [];

	$( window ).on( 'scroll', function() {
	$( 'section' ).each( function() {
	var sectionName = $( this ).attr( 'id' );
	var distanceToTopOfViewport = this.getBoundingClientRect().top;
	if ( sectionName && distanceToTopOfViewport < 600 ) {
	var hasAlreadyBeenTracked = viewedSections.indexOf( sectionName ) !== –1;
	if ( ! hasAlreadyBeenTracked ) {
	viewedSections.push( sectionName );
	analytics.record( 'Viewed Homepage Section', {
	name: sectionName
	} );
	}
	}
	} );
	} );
	} )();

view raw

homepage-scroll-tracking.js

hosted with ❤ by GitHub

This fires a Viewed Homepage Section analytics event where the name property is set to the id attribute of each section tag that the visitors scrolls by (where “scrolls by” means that the distance of the section to the top of the viewport is less than 600px).

You can then set up a funnel to measure which sections visitors see:

Viewed Homepage (which should be fired when anyone hits the homepage regardless of how far down they’ve scrolled)
Viewed Homepage Section where the name property is features
Viewed Homepage Section where the name property is pricing
Etc etc

My guess is that you’re going to be very surprised by how few people scroll down your homepage. The results should also underscore just how important the content above the fold is because everyone one of your visitors will see that; the content below the fold not so much. And if you’re A/B testing your homepage, you should focus on the content above the fold because that’s what most people see and where your tests will have the biggest impact.

You can get more sophisticated with this too by tracking how many people see a certain section when signing up. For example, you can measure what % of people who sign up actually saw the pricing section on your homepage:

	// Add this below the analytics tracking:
	if ( sectionName === 'pricing' ) {
	setCookie( 'viewed_homepage_pricing', 'true' );
	}

	// Then in your sign up event:
	analytics.record( 'Signed Up', {
	viewed_pricing: getCookie( 'viewed_homepage_pricing' ) === 'true'
	} );

view raw

advanced-homepage-scrolling-analytics.js

hosted with ❤ by GitHub

You’ll then be able to set up a funnel to measure what % saw the pricing, what impact that has on their post-sign up behavior, and more. All of this will help you understand your users better and help you make better decisiosn about the future of your product.

If you’re tracking other types of homepage analytics events like this that you find useful I’d love to hear about it – drop a comment below or shoot me a note on Twitter.

Cheers!