Advanced Percent of Page Viewed
[Warning: Some elements of this post are meant for advanced SiteCatalyst users so read at your own risk!]
Last week, Ben Gaines (@OmnitureCare) wrote a great blog post about the getPercentPageViewed JavaScript plug-in, which he had demonstrated in his Summit presentation. This plug-in is very fun and I have enjoyed using it. While this topic is fresh in people’s mind, I wanted to throw out some additional/advanced uses of this plug-in in case they are relevant to those out there using it or thinking about implementing it.
Beyond % of Page Viewed
When I first started using the aforementioned plug-in, my goal was like most, to see the total % of each website page that my visitors viewed. I found the Browser Height report to be too limiting (shows pixels, not % of page viewed) and this plug-in helped provide some additional insight. However, after using the plug-in, and correlating % of Page Viewed to pages, I realized that there were a few more things that could be done with this concept. The next question that popped in my head was “I wonder what % of the page, for each website page, can be attributed to scrolling?” After all, the % Page Viewed plug-in really only shows you how much of the page they saw in total, but not how much of the page they initially saw vs. saw because they scrolled. This line of thinking drove me to ask what else could be learned from this plug-in such as:
- Total % of Page Viewed by Page Name
- % of the page that users tend to scroll by Page Name
- Initial % of Page visitors tend to see before they start scrolling (to get around the pixel limitation of the Browser Height report)
As I mentioned earlier, Ben’s post covered item #1 above, so in this post, I will show you how to solve items #2 and #3.
How Much Are Users Scrolling on each Page?
To see how much visitors are scrolling on each page, I asked my developer if he could calculate the actual % of the page that users scroll through the plug-in. Through his supreme awesomeness, he told me that he could. That meant that we would have the total % of the page that was viewed and the % representing scrolling (both available on the next page as described by Ben). From there, we decided that we would concatenate the two values into an sProp. This means that the sProp Ben described would be slightly different such that instead of having raw number values (i.e. 100, 95, 56, etc…), it would have two values concatenated together as shown below [TOTAL % OF PAGE VIEWED]|[TOTAL % VISITOR SCROLLED]:
(Before you get scared, bear with me as I will show you how to deal with these strange looking values in the next few paragraphs!)
Once you have these concatenated values in the sProp, it is time to classify them using SAINT Classifications. To do this, you create the following classifications of this sProp:
- Total % Page Viewed. This is the first of the two values and this classification replicates what Ben blogged about.
- Scrolling %. This is the second value and represents the % of the page the visitor scrolled to see.
When you are done with this, you can see the report Ben showed in his post, but can now see the following additional report:
Through this clever classification, you can see how often people on your website tend to scroll. In this case, it looks like 73.2% of visitors don’t reach for that scroll bar! However, as Ben stated, all of this data is more valuable when viewed by Page Name. Since this Scrolling % report is really a classification of an sProp that is correlated to the Previous Page Name sProp, any classifications of it will also be correlated to Previous Page Name (if you understand that in one reading you are a true SiteCatalyst ninja – if not, re-read it a few times). This means that you can break the above report down by Page Name, or in other words, you can look at any page on your website and determine how often visitors are scrolling. To do this, simply open your Previous Page Name report, find the page you care about, and break it down by the Scrolling % (classification of the Percent of Page Viewed sProp). In the following example, we can see how much visitors scroll when looking at the Home Page:
In this case it looks like about half of the time visitors are scrolling on the Home Page. Finally, if you want, you can bucket these Scrolling percentages into more meaningful groupings by adding additional SAINT classification columns as Ben described.
What % of the Page Do Visitors See Upon Page Load?
So the other thing I wanted to see was the percentage of the page that visitors see before scrolling. I don’t like looking at Browser Height pixels, but would rather simplify things and see the exact % of the page my visitors are seeing – period! Unfortunately, there is not an easy way to do this in SiteCatalyst. However, when I was looking at the above items in this plug-in, I realized that the answer to this question was a side-benefit of doing the SAINT Classification shown above. Think about it…we have the Total % of the Page Viewed and the Total % that visitors scrolled, both concatenated in an sProp as shown above. If you subtract these two values, you are left with the percent of the page that visitors saw before scrolling (in other words, upon page load)! For example, if the value in the sProp is “58|10” (see first row of example above), then we know that the visitor saw a total of 58% of the page and they scrolled 10% of it, so they must have seen 48% of it initially (good thing web analysts like math!).
Therefore, when you are classifying the sProp shown above, you can add a new Classification of the Percent of Page Viewed sProp named “Initial % of Page Viewed” and simply subtract these two values and add that as a new classification (no new data to collect!). When you do this, you end up with a new report that shows you the total % of pages visitors tend to initially see like this:
Here we can see that, in general, about 60% of visitors are essentially seeing the entire page without having to scroll. Again, we can group these values into more meaningful buckets using SAINT, but the real power is seeing this Initial Page Viewed % classification by a specific Page Name. Again, using the Home Page as an example, the following report shows how much of the Home Page most visitors see before scrolling:
What’choo Talkn ‘Bout, Willis?
OK…I know this sounds complicated, but really all you need to do is slightly modify the code (see below) that Matt Thomas (of Omniture Consulting) created and that Ben alluded to in his post to add one concatenated value (% Scrolled). The majority of the hard work is in building the SAINT classification file to get all of these cool, new reports. Well the good news there is, that I have already created the file which you can use as a starting point for these extra reports. All you have to do is to download it by clicking here (save .TAB file to your hard drive). Simply save this file and add the values to your own SAINT template after you have created the Classifications mentioned in this post.
So there you have it…a few additional ideas for you to ponder while you have % of Page Viewed on the brain… If you have other ideas or questions, please leave a comment here…Thanks!
FOR OMNITURE GEEKS ONLY!
Here is the “enhanced” JavaScript code that modifies the great code that Matt Thomas (from Omniture Consulting) created and is in the Omniture KnowledgeBase. This is not currently supported by Omniture so use at your own risk!
/*
* Plugin: getPercentPageViewed v1.x
* This code has been modified from the original version distributed
* by Omniture and will not be supported by Omniture in any way
*/
s.getPercentPageViewed=new Function("",""
+"var s=this;if(typeof(s.linkType)=='undefined'||s.linkType=='e'){var"
+" v=s.c_r('s_ppv');s.c_w('s_ppv',0);return v;}");
s.getPPVCalc=new Function("",""
+"var dh=Math.max(Math.max(s.d.body.scrollHeight,s.d.documentElement."
+"scrollHeight),Math.max(s.d.body.offsetHeight,s.d.documentElement.of"
+"fsetHeight),Math.max(s.d.body.clientHeight,s.d.documentElement.clie"
+"ntHeight)),vph=s.d.clientHeight||Math.min(s.d.documentElement.clien"
+"tHeight,s.d.body.clientHeight),st=s.wd.pageYOffset||(s.wd.document."
+"documentElement.scrollTop||s.wd.document.body.scrollTop),vh=st+vph,"
+"pv=Math.round(vh/dh*100),cv=s.c_r('s_ppv'),cpi=cv.indexOf('|'),cpv="
+"'',ps='';if(cpi!=-1){cpv=cv.substring(0,cpi);ps=parseInt(cv.substri"
+"ng(cpi+1));}else{cpv=ps=0;}if(pv<=100){if(pv>parseInt(cpv)){ps=pv-M"
+"ath.round(vph/dh*100);s.c_w('s_ppv',pv+'|'+ps);}}else{s.c_w('s_ppv'"
+",'');}");
s.getPPVSetup=new Function("",""
+"var s=this;if(s.wd.addEventListener){s.wd.addEventListener('load',s"
+".getPPVCalc,false);s.wd.addEventListener('scroll',s.getPPVCalc,fals"
+"e);s.wd.addEventListener('resize',s.getPPVCalc,false);}else if(s.wd"
+".attachEvent){s.wd.attachEvent('onload',s.getPPVCalc);s.wd.attachEv"
+"ent('onscroll',s.getPPVCalc);s.wd.attachEvent('onresize',s.getPPVCa"
+"lc);}");
s.getPPVSetup();