Monitor webpage printouts

A platform like XING demands constant monitoring for various reasons – both to see how the users interact with the site and of course to verify global availability and performance. Here at XING we use a combination of industry-standard and custom-made tools for these purposes, while always making sure that user privacy is also taken into account.

In spite of this mighty toolset, how do we measure which site pages our users print out? Providing printed stylesheets can be really time-consuming and difficult as well, so it’s important to know exactly where to provide a perfect user experience and where default styles would be just fine.

Here at XING we have an exposed print button on every user profile.

So if we assume that every printout on this page is triggered by this button, it would be quite simple to track usage:

<a href="javascript:printProfile();">Print this profile</a>

function printProfile() {
   fireSomeDefinedTrackingEvent(“Profile print out”);  //Notify your tracking system
   window.print();  //afterwards open up the browser’s print dialog
 }

There is however another scenario where users also use the browser’s internal print function (cmd/ctrl + p), which doesn’t trigger any JavaScript at all, meaning that you can’t fire a tracking event.

The solution to this is in the HTML/CSS and not in the JavaScript.

For that purpose we created our first-ever tracking pixel (called “traxing” pixel):

<img class="”traxing-pixel”" alt="" src="”transparent.gif”" width="”1”" height="”1”" />

This pixel was only included on our profile page at the very bottom of the markup. Given the fact that transparent.gif will always reside in the client’s browser cache, we don’t generate an extra request.

With the following block inside our stylesheets we make sure that the pixel is only rendered for print:

.traxing-pixel {
  display: none; 
}

Now we perform the following in the print stylesheet for this site:

.tracking-pixel {
  display: block;
  background-image: url(/url/to/yourlogserver.tld/?printFromProfile=1);
}

We assigned a background image to an 1×1 image (don’t forget that the source of this image was a transparent.gif so there won’t be anything visible in the resulting printout) via CSS. Of course there is no real image at /url/to/yourlogserver/?printFromProfile=1 but we generated a log entry on our logserver.tld.

For each profile printout we then have an entry such as the following in our Apache logs:

127.0.0.1 - - [12/Oct/2011:14:08:59 +0200]
"GET /url/to/yourlogserver.tld/?printFromProfile=1 HTTP/1.1" 200 - 
"https://www.xing.com/css/v/100019/xing/global/print.css"
"Mozilla/5.0 (Windows NT 6.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1"

With some regexp magic or tools like Splunk you can easily extract valuable information.

Here are some insights about what we learned after using this online for only one week:

• Someone prints out a profile about every 3 seconds
• 17% of printouts are triggered via the “Profile Print” action icon, and 83% via the native browser print option
• 2/3 of printouts are triggered via Internet Explorer (IE6: 2%, IE7: 24% , IE8: 66%, IE9: 8%)

These statistics were quite surprising, especially the fact that a profile is printed out every three seconds. We therefore took some immediate action and are planning to improve the appearance of profile printouts. In addition, we will continue investigating which sites on xing.com are frequently being printed out in order to further improve quality for our users.

About the author

4 thoughts on “Monitor webpage printouts”

1. Nice idea.

   One addition:
   This approach can also be perfectly used to simulate the HTML5 “onafterprint” javascript event.
   The event is currently only supported by Firefox 6+ and IE6+.

   See: http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#printing

2. Both the technique for tracking prints as well as the figures on the usage are interesting. One thing would be important to interpret what you wrote about the Internet Explore: What’s the ratio of Internet Explorer/other browsers for normal page views? If it’s also 2/3 the print out ratio isn’t that interesting …

3. @Christopher: We consider using “onafterprint” in combination with the upper approach as a fallback. Next step is, to gain information about print usage on the whole plattform and not just the profile page.

   @Chris: Good catch ! I forgot to mention this in the origin post. On our usual frontend, the IE share is almonst exactly 50%. Thats the reason, we consider the higher share in print-outs as “strange”

4. Pingback: Abstract Sequential - Print Styles Are Responsive Design