twoPaperRollsI’ve noticed that many of my clients have recently begun deploy­ing web pages (or even entire sites) using a lay­ered devel­op­ment tech­nique known as a “Long Page.”  Ini­tially made pop­u­lar by Nike​.com a few years back, this style of web devel­op­ment uses a one-page design, but employs par­al­lax scrolling to shift the con­tents of the page either hor­i­zon­tally or ver­ti­cally.  Based on what con­tent the vis­i­tor clicks, they are shown a brand new expe­ri­ence, while con­ve­niently stay­ing on the same page.  Long Page devel­op­ment can lend itself equally effec­tive to content-heavy sin­gu­lar pages within an exist­ing site, or can even serve as the core of an entire “micro-site.”  For an exam­ple of an Adobe-built long page, check out our doc­u­men­ta­tion for the new (and equally awe­some) mobile app mea­sure­ment libraries.

So why is the Long Page tech­nique so pop­u­lar?  For starters, they’re pretty easy to imple­ment, and the con­cept of hav­ing all of the con­tent housed within one sin­gle page is very appeal­ing to web devel­op­ers and mar­keters alike. They can also be viewed effec­tively on a num­ber of dif­fer­ent plat­forms, which is a plus for cus­tomers access­ing con­tent on mobile and non-mobile devices.  And finally, they’re just plain cool!

One com­mon issue that dig­i­tal mar­keters run into with these pages is that of mea­sure­ment.  Because it’s tech­ni­cally one sin­gle page, should it be mea­sured as such?  What about when the vis­i­tor clicks and the page scrolls to show new con­tent?  For­tu­nately, I’ve pro­vided some tips and tricks so any mar­keter can effec­tively ana­lyze their Long Pages.

A best prac­tice for dig­i­tal ana­lyt­ics is to call a new page view if the con­tent on the screen has changed by at least 50 per­cent.  Because many Long Pages scroll to show brand new con­tent, each new sec­tion of the page should be counted as a sep­a­rate page view.   To call a new page view while still tech­ni­cally on the same page, we’ll need to use the “man­ageVars” plu­gin.  This code effec­tively clears out the ‘s’ object and allows a new image request to be sent to our data col­lec­tion servers with­out any chance of vari­able dupli­ca­tion.  If your Ana­lyt­ics s_code file is ver­sion H.26 or prior, you’ll need to make sure that you have the plu­gin code installed.  If you’re rock­ing the new ultra-fast App­Mea­sure­ment for Javascript library, this func­tion­al­ity is avail­able right out of the box!

I typ­i­cally rec­om­mend that devel­op­ers build cus­tom func­tions within their Long Page to clear out the pre­vi­ous vari­ables and then send a new image request when con­tent shifts.  For ref­er­ence, I’ve pro­vided some sam­ple code below (this code assumes that the s_code file is ver­sion H.26 or prior):

<script language=“JavaScript”>

func­tion SCPageView(pageName,channel,hierarchy){

s.manageVars(“clearVars”);
s.channel = chan­nel;
s.pageName= page­Name;
s.hier1= hier­ar­chy;
s.prop1=“prop1 value”;
s.eVar2=“eVar2 value”;
s.t();

}

</script>

As men­tioned above, you will need to have the s.manageVars plu­gin installed in your s_code file in order to use the “clear­Vars” func­tion­al­ity — for more infor­ma­tion, make sure you con­tact your friendly Adobe Ana­lyt­ics con­sul­tant!  By using a func­tion such as this, you’re well on your way to prop­erly track­ing a Long Page!  Of course, the rec­om­men­da­tions within this post really only begin to scratch the sur­face of what you can mea­sure and opti­mize within a Long Page.  If you have ideas or com­ments, feel free to leave them below!

0 comments