getPercentPageViewed

Record the portion of a page (0-100%) that the user views and pass the value into a variable on the next page view. This plugin lets you determine how much of your content users are seeing on average, so that you can optimize your page lengths and layouts based on user behaviors.

You can also use classifications to group percentages (such as Less than 25% or Less than 50%) so that you can identify page-viewing trends.

Note: The following instructions require you to alter the data collection code on your site. This can affect data collection on your site, and should only be done by a developer with experience using and implementing Analytics.

Plug-in Code and Implementation

Config Section: No changes required for this section.

Sample Calls

/*
 * Add one of the following examples in s.doPlugins(), after s.pageName has been assigned:
 */
 
//         >>>>>>>>>>>>>>>>>>>>> IMPORTANT NOTE - PLEASE READ! <<<<<<<<<<<<<<<<<<<<
//
// The getPercentPageViewed plugin returns an integer if the pageID argument is unspecified
// or is set to an empty string or evaluates to false, as shown in example 1 below. If the
// PageID is specified, the plugin returns an array as shown in example 2.
 
// Example 1: Get maximum percent viewed only, using s.pageName as an implicit identifier
 
s.prop21 = s.getPreviousValue(s.pageName,'s_ppn'); //prop21: prev page name
s.prop22 = s.getPercentPageViewed(); //prop22: max % viewed of prev page
if(!s.prop21||s.prop21=='no value')s.prop22=''; //clear max % viewed if no prev page view
 
//Example 2: Get entire percent page viewed array and save metrics
 
s.prop21 = s.getPreviousValue(s.pageName,'s_ppn'); //prop21: prev page name
var ppv = s.getPercentPageViewed(s.pageName); //get array of data on prev page % viewed
if( ppv && typeof ppv=='object' && ppv[0] == s.prop21 ) { //if ppv array returned and prev page id matches prev page name
  s.prop22 = ppv[1] + '|' + ppv[2]; //prop22: prev page max and initial % viewed, delimited by "|". (Use classifications to separate values)
  s.prop23 = ppv[4] + 'x' + ppv[5]; //prop23: viewport width x height in CSS pixels
  s.prop24 = ppv[6] + 'x' + ppv[7]; //prop24: display width x height in real pixels
  s.prop25 = ppv[8]; //prop25: pixel density, i.e. number of virtual pixels per real pixel
  s.prop26 = ppv[9]; //prop26: device orientation: initial and final (final only present if rotation occurred)
}

Returns

  • If there was not a previous page view in this visit, an empty string is returned
  • If pid is "-", or unspecified, an integer containing the last page's maximum percent viewed is returned
  • Otherwise, an array is returned with the following elements:
    • array[0] - Page ID
    • array[1] - Maximum percent viewed
    • array[2] - Initial percent viewed
    • array[3] - Maximum vertical pixels viewed
    • array[4] - Viewport width in CSS pixels new
    • array[5] - Viewport height in CSS pixels new
    • array[6] - Display width in real pixels (reflecting orientation) new
    • array[7] - Display height in real pixels (reflecting orientation) new
    • array[8] - Final pixel density new
    • array[9] - Device orientation, set to one of the following text strings: new
      • "L" - Landscape (rotation did not occur)
      • "P" - Portrait (rotation did not occur)
      • "LP" - started landscape, ended portrait
      • "PL" - started portrait, ended landscape

Plugins Section: Add the following code to the area of the s_code.js file labeled PLUGINS SECTION. Do not make any changes to this portion of the plug-in code.

/*
 * Plugin: getPercentPageViewed v1.71
 */
s.getPercentPageViewed=new Function("n",""
+"var s=this,W=window,EL=W.addEventListener,AE=W.attachEvent,E=['load"
+"','unload','scroll','resize','zoom','keyup','mouseup','touchend','o"
+"rientationchange','pan'];W.s_Obj=s;s_PPVid=(n=='-'?s.pageName:n)||s"
+".pageName||location.href;if(!W.s_PPVevent){s.s_PPVg=function(n,r){v"
+"ar k='s_ppv',p=k+'l',c=s.c_r(n||r?k:p),a=c.indexOf(',')>-1?c.split("
+"',',10):[''],l=a.length,i;a[0]=unescape(a[0]);r=r||(n&&n!=a[0])||0;"
+"a.length=10;if(typeof a[0]!='string')a[0]='';for(i=1;i<10;i++)a[i]="
+"!r&&i<l?parseInt(a[i])||0:0;if(l<10||typeof a[9]!='string')a[9]='';"
+"if(r){s.c_w(p,c);s.c_w(k,'?')}return a};W.s_PPVevent=function(e){va"
+"r W=window,D=document,B=D.body,E=D.documentElement,S=window.screen|"
+"|0,Ho='offsetHeight',Hs='scrollHeight',Ts='scrollTop',Wc='clientWid"
+"th',Hc='clientHeight',C=100,M=Math,J='object',N='number',s=W.s_Obj|"
+"|W.s||0;e=e&&typeof e==J?e.type||'':'';if(!e.indexOf('on'))e=e.subs"
+"tring(2);s_PPVi=W.s_PPVi||0;if(W.s_PPVt&&!e){clearTimeout(s_PPVt);s"
+"_PPVt=0;if(s_PPVi<2)s_PPVi++}if(typeof s==J){var h=M.max(B[Hs]||E[H"
+"s],B[Ho]||E[Ho],B[Hc]||E[Hc]),X=W.innerWidth||E[Wc]||B[Wc]||0,Y=W.i"
+"nnerHeight||E[Hc]||B[Hc]||0,x=S?S.width:0,y=S?S.height:0,r=M.round("
+"C*(W.devicePixelRatio||1))/C,b=(D.pageYOffset||E[Ts]||B[Ts]||0)+Y,p"
+"=h>0&&b>0?M.round(C*b/h):0,O=W.orientation,o=!isNaN(O)?M.abs(o)%180"
+":Y>X?0:90,L=e=='load'||s_PPVi<1,a=s.s_PPVg(s_PPVid,L),V=function(i,"
+"v,f,n){i=parseInt(typeof a==J&&a.length>i?a[i]:'0')||0;v=typeof v!="
+"N?i:v;v=f||v>i?v:i;return n?v:v>C?C:v<0?0:v};if(new RegExp('(iPod|i"
+"Pad|iPhone)').exec(navigator.userAgent||'')&&o){o=x;x=y;y=o}o=o?'P'"
+":'L';a[9]=L?'':a[9].substring(0,1);s.c_w('s_ppv',escape(W.s_PPVid)+"
+"','+V(1,p,L)+','+(L||!V(2)?p:V(2))+','+V(3,b,L,1)+','+X+','+Y+','+x"
+"+','+y+','+r+','+a[9]+(a[9]==o?'':o))}if(!W.s_PPVt&&e!='unload')W.s"
+"_PPVt=setTimeout(W.s_PPVevent,333)};for(var f=W.s_PPVevent,i=0;i<E."
+"length;i++)if(EL)EL(E[i],f,false);else if(AE)AE('on'+E[i],f);f()};v"
+"ar a=s.s_PPVg();return!n||n=='-'?a[1]:a");

Notes

  • Always test plug-in installations to ensure that data collection is as expected before deploying in a production environment.
  • Because the plug-in passes the percentage of page viewed on the previous page, data is not collected for the final page view of the visit. One way around this is to use a function on all exit links to call s.getPercentPageViewed().
  • This plug-in relies on the ability to set cookies in the user's web browser. If the user does not accept first-party cookies, the plug-in will not pass data into Analytics.
  • The plug-in creates its own first-party cookie named s_ppv.
  • A very small percentage of users will not pass percentage of page viewed data due to browser limitations. However, this plug-in has been successfully tested in IE, Firefox, Chrome, Safari, and Opera.