How to Track When People Print Web Pages on your Site

TRACK PRINTED WEB PAGES WITH GOOGLE ANALYTICS

What we need to do is add an invisible 1×1 tracking image 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 = "https://ssl.google-analytics.com/collect?v=1&t=event" +
      "&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);
      
    
  }

})();

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

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.