How to Track When People Print Web Pages on your Site

You have made your website printer-friendly but you are not too sure if people are actually printing any of web pages. And if they are, you would probably like to know how frequently they print pages from your site and what kind of content is printed more often.

There are multiple ways to print a web page.

You may use the File->Print menu in the browser or press the Ctrl+P keyboard shortcut (or Command+P on a Mac) to send the current web page to the printer. Some web pages have a dedicated PRINT button on the page itself that internally executes the window.print() method to print the document.

We therefore need a solution that can track and capture the print action on a web page irrespective of the method that was originally used to send that page to the printer. That’s where Google Analytics will help.

Track Printed Web Pages with Google Analytics

What we need to do is add an invisible 1×1 tracking image — similar to the one we used for Gmail read receipts — – to the printed version of our web pages. Now when a site visitor prints a web page, through any route, the Analytics tracking image will download on their computer and print action will be recorded into your Google Analytics.

The implementation is really easy. Simply copy-paste this code above the closing </body> tag in your website template. If you are on WordPress, you can paste the code in your footer.php file. Do remember to replace UA-1234-56 with your actual Google Analytics Profile ID.

<script>

var googleAccountID = "UA-1234-56";

function s4() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}

function guid() {
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

(function(){

  var GIF = "http://ift.tt/1i6zkJc; +
      "&ec=print&tid=" + googleAccountID + "&cid=" + guid() +
      "&z=" + (Math.round((new Date()).getTime() / 1000)).toString() +
      "&ea=" + encodeURIComponent(document.title) +
      "&el=" + encodeURIComponent(document.location.pathname);

  var rule = "body:after{content:url(" + GIF + ")}";
  var head = document.head || document.getElementsByTagName('head')[0];
  var css  = document.createElement('style');

  if (css && head) {

      css.setAttribute("type",  "text/css");
      css.setAttribute("media", "print");

      if (css.styleSheet) { // For IE
          css.styleSheet.cssText = rule;
      } else {
          css.appendChild(document.createTextNode(rule));
      }

      head.appendChild(css);
      
      /* Written by Amit Agarwal - labnol.org */
  }

})();

</script>

Once you have added the tracking JavaScript code to your web pages, log in to your Google Analytics dashboard, go to Real Time –> Events and choose Print for the event category. Alternatively, for old reports, you should go to Behavior -> Events report.

Also see: QR codes for Printed Pages

How Print Tracking with Analytics Works?

The above JavaScript code adds the following CSS rule to your web page. It append the Google Analytics tracking image to the page but the rule is only trigger when the print stylesheet is active.

<style type="text/css" media="print">
  body:after {
        content:url(GOOGLE_ANALYTICS_TRACKING_IMAGE);
  }
</style>

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.

---

This story, How to Track When People Print Web Pages on your Site, was originally published at Digital Inspiration on 21/04/2014 under Google Analytics, Print, Internet