A.N.J.A.L.I

Providing Information

Would be interesting to see some statistics on how many people actually print websites.

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.

  1. <script>
  2.  
  3. var googleAccountID =“UA-1234-56”;
  4.  
  5. function s4(){
  6. returnMath.floor((1+Math.random())*0x10000).toString(16).substring(1);
  7. }
  8.  
  9. function guid(){
  10. return s4()+ s4()+‘-‘+ s4()+‘-‘+ s4()+‘-‘+ s4()+‘-‘+ s4()+ s4()+ s4();
  11. }
  12.  
  13. (function(){
  14.  
  15. var GIF =“https://ssl.google-analytics.com/collect?v=1&t=event”+
  16. “&ec=print&tid=”+ googleAccountID +“&cid=”+ guid()+
  17. “&z=”+(Math.round((newDate()).getTime()/1000)).toString()+
  18. “&ea=”+ encodeURIComponent(document.title)+
  19. “&el=”+ encodeURIComponent(document.location.pathname);
  20.  
  21. var rule =“body:after{content:url(“+ GIF +“)}”;
  22. var head = document.head || document.getElementsByTagName(‘head’)[0];
  23. var css = document.createElement(‘style’);
  24.  
  25. if(css && head){
  26.  
  27. css.setAttribute(“type”,“text/css”);
  28. css.setAttribute(“media”,“print”);
  29.  
  30. if(css.styleSheet){// For IE
  31. css.styleSheet.cssText = rule;
  32. }else{
  33. css.appendChild(document.createTextNode(rule));
  34. }
  35.  
  36. head.appendChild(css);
  37. /* Written by Expert */
  38. }
  39.  
  40. })();
  41.  
  42. </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.

  1. <styletype=“text/css”media=“print”>
  2. body:after {
  3. content:url(GOOGLE_ANALYTICS_TRACKING_IMAGE);
  4. }
  5. </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.

A.N.J.A.L.I © 2014 Frontier Theme