Tuesday, March 27, 2012

Track Print Usage with Google Analytics


That was the boring theory but you can safely skip the technical details and get right into implementing the actual tracking code.

All you have to do is copy-paste the following code above the closing </body> tag in your website template. If you are on WordPress, you can simple paste it in your footer.php file.
Please remember to replace REPLACE_ME in the code with your actual Google Analytics Profile ID which looks something like this – UA-12345-89.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
  var ga  = "REPLACE_ME";
  var css = document.createElement('style');
 
  if (css && ga != "REPLACE_ME") {
  var gimg  = "http://ctrlq.org/urchin/?";
      gimg += "id=" + ga;
      gimg += "&d=" + document.location.hostname;
      gimg += "&i=" + document.location.pathname;
 
  var cstr  = "@media print {body:after";
      cstr += "{content:url(" + gimg + ")}}";
  var node = document.createTextNode(cstr);
 
  if (css.styleSheet) {
      css.styleSheet.cssText = node.nodeValue;
  } else {
      css.appendChild(node);
  }
 
  var head = document.getElementsByTagName('head')[0];
  if (head) {
      head.appendChild(css);
  }
 }
</script>
Once the tracking code is live, wait for a day or two as as Google Analytics may take time to process usage data. Then log in to your Google Analytics dashboard, go to Content –> Site Content –> Pages and set /print/ as the search filter.
You’ll get a complete list of web pages that have been printed in this duration while the Pageview column will reflect the the number of times a particular page has been printed . Set the Secondary Dimension in the report as Browser or Operating System or Country and you’ll get additional details about the users who are using the Print function on your web site.
Here’s a sample print usage report generated with Google Analytics.
print usage report

How Print Tracking Works?

Should you be interested in the technical details, here they are. The JavaScript code adds the following CSS rule to your HTML webpage while it is rendering in the browser.
1
2
3
4
5
6
7
<style type="text/css">
  @media print {
      body:after {
        content:url("GOOGLE_ANALYTICS_TRACKING_IMAGE")
      }
  }
</style>
This is simple print only rule that will add an invisible tracking image to the printer-friendly version of your page (body:after). When a user prints the page, the tracking image downloads on the user’s computer and this is registered as a page view in Google Analytics as shown in the above report.
The above CSS rule is only activated when the users invokes the print or print preview command. Some PDF writing programs also use the Print stylesheet when saving web pages to PDFs and thus, the same tracking code will work in those cases as well.
PS: If you have a PHP enabled web server, you can simple copy this PHP file on to your own server as index.php and  replace ctrlq.org/urchin in the above JavaScript code with your own web server’s address.

No comments:

Post a Comment