Single Page Websites and High Bounce Rates in Google Analytics

You may have noticed that it is becoming trendy to have your whole site on a single page, broke out into seperate sections. Some sites built in this manner are pretty nice. Some of these sites still have additional pages but they try to get everything important on that homepage. While I am sure there could be a debate over the effectivness of these types of designs, I want to share a solution to help you better understand what is happening on those pages.

The problem with the high bounce rate

Pages like this tend to have a high bounce rate because there is a lot of info and sometimes everything a visitor needs. By default the way a bounce happens is when no second pageview ever happens after the first. By reducing from a small site of 5 pages to a single page with 5 sections you have eliminated the possibility of a second pageview for the most part. This means people who stick around, read entire sections and then gave you a call or click offsite, may have gotten exactly what they were looking for. The analytics will not reflect that, they will show a bounce.

If a section is becoming the equivenlent of a page then maybe each of those should count as a “pageview”. This will change your analytics and inflate your numbers but as long as you are aware what it means it will provide a lot of valuable info about your single page site.

If you have used GA before you have probably copied that snippet more times than you care to remember but it is always essential. This is the line, from that code, that fires off that pageview on every page of your site, and in this case once on your single page website.

    ga('send', 'pageview');

How do we solve the inaccuracy in the bounce rate.

There are a few things that we can do to get a more accurate bounce rate. We are going to look at virtual pageviews, these are pages that we view that do not reload the page but are still pages. To add virtual pageviews you will have to add a little code to your child theme or plugin. Many of these sites use things like waypoints or scrollto to make the anchor links more pleasant. So we look for code that may look something like this (this could also be applied without any of those js animations):

$('.scroll-me a').bind('click', function (event) {
    var $anchor = $(this);
    $('html, body').stop().animate( {
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1000, 'easeInOutQuad');
    event.preventDefault();
} );

This code gets ran every time a link with a class of ‘scroll-me’. So we can add some of our own code to this to fire another pageview. Right below ‘var $anchor = $(this);’ would be a good place. So we add that code from before again.

$('.scroll-me a').bind('click', function (event) {
    var $anchor = $(this);

    ga('send', 'pageview');

    $('html, body').stop().animate( {
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1000, 'easeInOutQuad');
    event.preventDefault();
} );

Now it will fire an additional pageview each time a link is clicked. This still is not quite helpful though because your one page will just have a bunch of inflated pageviews. Luckily there is a third param that defaults to the current page. So if we add a param to it we can more closely measure what sections of the page are being viewed.

So now the final code looks something like

$('.scroll-me a').bind('click', function (event) {
    var $anchor = $(this);

    ga('send', 'pageview', '/' + $anchor.attr('href') );

    $('html, body').stop().animate( {
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1000, 'easeInOutQuad');
    event.preventDefault();
} );

Now in your analytics you will start to see views “/#contact-us” that resemble the sections people are looking at and making your bounce rate more accurate because we are accounting for interactions.

Virtual pageviews can be fired at any point you feel they are warranted. If you have a popup that happens after a specific event you could take a similar approach there as well.

2 thoughts on “Single Page Websites and High Bounce Rates in Google Analytics”

  1. I’m an old Internet guy but very new at WordPress and delike
    fascinated with the new ways and happy to be learning new stuff that trigger my curiosity back into high speed…. your information is still overwhelming but soo interesting that I will dig further and learn more .. thanks for your insights! Tony

Comments are closed.