One-Page Analytics: How to analyze different section of a single page site

Akshay JoshiSEO, Technology, Tools, Web Development0 Comments

One of Web Designer Pad reader asked my on LinkedIn that how can we analyze single page websites as there are no multiple pages on them. So here’s what I’ve came up with from degordian.com blog.

One-page website are the most popular trend in 2015. A website with only one page, usually divided into sections, so how can we keep an eye (or technically analyize) the single page websites. Everyone knows how one-page websites (single page websites) have become increasingly trendy in the previous years.

Generally, one-page websites are used for landing pages, presentations, storytelling, etc. Combined with the scrolling effect and especially the parallax effect, they can provide a delightful user experience.

However, one-page websites have a slight disadvantage in terms of SEO. For example, you cannot define meta keywords or description for the specific section of the page and, most importantly, you cannot rely on Google Analytics to get a really good understanding on how users behave on a single-pager. At least not without using some extra tools.

To track user behavior on a multi-page website, simply embed your Analytics code and you’re good to go. However, if you would do that on a one-page website, you’d get the wrong information. So how do you track user behavior on one-pagers?

ANALYTICS

So the main idea is to define sections of the one-pager as virtual pages and use Google Analytics virtual pageviews to track them.

Degordian, which is an agency, wrote a little jQuery plugin to help them implement analytics for single pages.

THE PLUGIN

When a user scrolls down to a specific page section, the plugin triggers and then calls the virtual page linked to that specific section. If there’s a triggerDelay parameter defined, virtual page won’t be called before the delay time exceeds. This can come in very handy, and I’ll show you why.

For example, you have two different sections; one with an image you want your visitor to look at and one with some text you want your visitor to read. The completion of these two goals takes different amount of time.

So, you can say that your goal is met when the visitor has been on the image section for 2 seconds or on the text section for 6 seconds. Neat, right? 🙂

But most importantly, with triggerDelay parameter you can avoid visitors’ fast scrolling to be interpreted as a page view.

With the downPercentage/upPercentage parameters, you are able to determine when the plugin triggers for all the sections or for a specific one.
For example, if you set the value to 0.6, the plugin will trigger when the section takes exactly 60% of the “page height”. You are able to set different values for up or down-scrolling.

THE PARAMETERS

The plugin uses the waypoint plugin which handles the page scrolling.
There are 7 parameters in the plugin options:

  • url
  • pageTitle
  • triggerDelay
  • downPercentage
  • upPercentage
  • up
  • down

Parameters url and pageTitle are sent to Google Analytics and the rest of them define how the plugin behaves. You can read more about the parameters in detail on the github page.

IMPLEMENTATION

The sections, now representing pages, should have a way of differentiation. Therefore, we use the id attribute.

<div id="home" class="page"><!-- home "page" content --></div> <div id="about" class="page"><!-- about "page" content --></div> <div id="contact" class="page"><!-- contact "page" content --></div>
All parameters have default values, so all of them are optional. However, you’d at least want to set the url and the pageTitle.
$('#home').waypointVirtualPage({url: '/home', pageTitle:'Home page'}); $('#about').waypointVirtualPage({url: '/about', pageTitle:'About', triggerDelay: 2500}); $('#contact').waypointVirtualPage({url: '/contact', pageTitle:'Contact', triggerDelay: 1500});

You can see a full implementation example here.

CONCLUSION

This tool is designed to help you better understand your one-page website visitors.
However, keep in mind that you’ll have to tweak the tool for every project as every project is different. By doing so, you will get better at it and, hopefully, get better insights on your analytics.

You can find the plugin code and an example on our github page .

Thanks a lot to degordian for such an awesome plugin.

Sources & Resources:

jeroensormani.com

degordian.com

Leave a Reply

Your email address will not be published. Required fields are marked *