How to Use Google Analytics to Track When People Print your Web Pages

Say you have a website that is printer-friendly but you are not too sure if people are actually printing your web pages. And if they are, you are interested to know how often they print pages and what is the kind of content that users are most likely to print on your site.

There are basically three ways to print any standard web page

1. Experienced users may press the Ctrl + P keyboard shortcut (or Command-P on a Mac) to send the current web page to the printer.
2. Some web pages have a dedicated PRINT button on the page itself.
3. Other users may prefer to print web pages from the File Menu that is standard across all browsers.

Because there are multiple ways to print the same web page, it is difficult to use JavaScript based event tracking in Google Analytics to track print usage.

A simple workaround is that you add an invisible tracking image (like the ones used for read receipts in email) only in the printed version of a web page. Thus when a user prints a web page, through any route, that tracking image will download on his / her computer and you can easily track the print (and print preview) action.

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.

<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.

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.

<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.