Here at Degordian, the word “measure” is our mantra. To give you a glimpse of what we do to measure everything, I will describe how we created a simple plugin that gave us a better understanding on how visitors behave on one-page websites. Also, I will show you how you can use this plugin on your own projects.

One-page and multi-page websites

One-page website is exactly what the name says – a website with only one page, usually divided into sections. For the last couple of years, one-page websites (single page websites) have become increasingly trendy.

Multi-page websites have multiple pages, differentiated with urls, titles, etc. They’re still the main paradigm of the web spaces, but more and more one-page websites are on the horizon.

Typically, 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

Being a performance-oriented agency, we always measure if our campaigns were successful. When it comes to measuring one-page websites, standard Analytics don’t come in too handy.

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

Since we got a lot of requests of single page websites, we wrote a little jQuery plugin to help us implement analytics for these kind of projects.

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 .

Interested in more?
Read blogs from our developers or contact us at info@degordian.com!