Developing a “Long” page? Here’s an Analytics “Short” Cut

http://blogs.adobe.com/digitalmarketing/wp-content/uploads/2013/11/twoPaperRolls.jpg
I’ve noticed that many of my clients have recently begun deploying web pages (or even entire sites) using a layered development technique known as a “Long Page.” Initially made popular by Nike.com a few years back, this style of web development uses a one-page design, but employs parallax scrolling to shift the contents of the page either horizontally or vertically. Based on what content the visitor clicks, they are shown a brand new experience, while conveniently staying on the same page. Long Page development can lend itself equally effective to content-heavy singular pages within an existing site, or can even serve as the core of an entire “micro-site.” For an example of an Adobe-built long page, check out our documentation for the new (and equally awesome) mobile app measurement libraries.

So why is the Long Page technique so popular? For starters, they’re pretty easy to implement, and the concept of having all of the content housed within one single page is very appealing to web developers and marketers alike. They can also be viewed effectively on a number of different platforms, which is a plus for customers accessing content on mobile and non-mobile devices. And finally, they’re just plain cool!

One common issue that digital marketers run into with these pages is that of measurement. Because it’s technically one single page, should it be measured as such? What about when the visitor clicks and the page scrolls to show new content? Fortunately, I’ve provided some tips and tricks so any marketer can effectively analyze their Long Pages.

A best practice for digital analytics is to call a new page view if the content on the screen has changed by at least 50 percent. Because many Long Pages scroll to show brand new content, each new section of the page should be counted as a separate page view. To call a new page view while still technically on the same page, we’ll need to use the “manageVars” plugin. This code effectively clears out the ‘s’ object and allows a new image request to be sent to our data collection servers without any chance of variable duplication. If your Analytics s_code file is version H.26 or prior, you’ll need to make sure that you have the plugin code installed. If you’re rocking the new ultra-fast AppMeasurement for Javascript library, this functionality is available right out of the box!

I typically recommend that developers build custom functions within their Long Page to clear out the previous variables and then send a new image request when content shifts. For reference, I’ve provided some sample code below (this code assumes that the s_code file is version H.26 or prior):

__

function SCPageView(pageName,channel,hierarchy){

s.manageVars(“clearVars”);
s.channel = channel;
s.pageName= pageName;
s.hier1= hierarchy;
s.prop1=”prop1 value”;
s.eVar2=”eVar2 value”;
s.t();

}

As mentioned above, you will need to have the s.manageVars plugin installed in your s_code file in order to use the “clearVars” functionality – for more information, make sure you contact your friendly Adobe Analytics consultant! By using a function such as this, you’re well on your way to properly tracking a Long Page! Of course, the recommendations within this post really only begin to scratch the surface of what you can measure and optimize within a Long Page. If you have ideas or comments, feel free to leave them below!