Quantcast
Channel: Savio.no - Blog
Viewing all articles
Browse latest Browse all 31

How to Track Printed Pages and Print Method in Google Analytics

$
0
0

It can sometimes be important to know if your content has been printed. The usual way to track this (in Google Analytics and other web analytics tools) is to use a "Print button" with an onclick event that sends the data to the tool.

However, not every website has a print button, and there are many other ways to print a page:

  • Printing from the Browser Menu
  • Right Click and choose Print from the Right Click Menu
  • Ctrl+P (Windows) or Cmd+P (Mac)

In this blog post I show you how to track printing, and what method used to print the page.

Google Analytics - Print tracking

About the Script used for Tracking Printing in Google Analytics

The script in this blog post is based on a script made by TJ VanToll, and is described in his blog post called Detecting Print Requests with Javascript.

The script and solution is a little bit "hacky", and that is described below.

Opera Browser and Print Tracking

As he describe in his blog post, you have to use different methods for different browsers to detect printing. So what I have done is to take his script, and added tracking of printing method to my script. The reason for this is not only curiosity, but also that printing from the Opera browser can't be detected using only javascript (perhaps this will change when Opera starts to use Webkit as the engine for the browser).

To get some understanding of printing from a Opera browser, you will have to rely on Print Button tracking and tracking of Ctrl/Cmd+P. Printing from Browser Menu or Right Click + Print can't be tracked from a Opera browser.

Chrome Browser and Print Tracking

Chrome is a different "beast" as well. It will in most of the time fire several events, and only the first event will show the correct Print Method. Because of this I only allow the script to run once.

General things about this script for Print Tracking

Other things to be aware of is that most browsers based on my testing (Internet Explorer, Chrome and Firefox) will tell you that the page was printed even if you cancel printing, while in Safari you will have to Print the Page or choose Print Preview for the script to "kick off".

If you right click but don't print, and instead chooses to print from the Browser Menu, this will probably be tracked as Right Mouse Button Printing.

Demo of Print Tracking

If you try to print this page, the method you use (Print Button, Browser Menu, Ctrl/Cmd+P or Right Click+Print) will be shown below for demonstration purposes.

Print me!

 

Script for tracking Print in Google Analytics

Remove formatting from Code

  1. <script type="text/javascript">
  2. // This script for tracking Printed Pages & Print Method in Google Analytics is provided as it is, and was put together by Eivind Savio April 2013. You need jQuery for this script to work. Happy tracking!
    http://www.savio.no/blogg/a/119/how-to-track-if-your-content-are-printed-in-google-analytics
  3. (function () {
  4. var runOnce;
  5. var afterPrint = function() {
  6. if (!runOnce) { // Because of Chrome we can only allow the code to run once.
  7. runOnce = true;
  8. var printData = $('html').attr('printType');
  9. var mouseButton = $('html').attr('mouseBtn');
  10. if (printData === undefined && mouseButton === 'Right') { // Print activated using Right Mouse Button
  11. printData = 'Right Mouse Button';
  12. } else if (printData === undefined) { // Print (probably) activated using Browser Menu
  13. printData = 'Browser Menu';
  14. }
  15. _gaq.push(['_trackEvent','Page Printed', printData, window.location.pathname]); // Send Print Data to Google Analytics
  16. $('html').removeAttr('printType'); // Clear the attribute, if not printing from the menu can be tracked wrongly.
  17. $('html').removeAttr('mouseBtn'); // Clear the attribute, if not printing from the menu can be tracked wrongly.
  18. };
  19. };
  20. if (window.matchMedia) { // Track printing from browsers using the Webkit engine
  21. var mediaQueryList = window.matchMedia('print');
  22. mediaQueryList.addListener(function(mql) {
  23. if (!mql.matches) {
  24. afterPrint();
  25. }
  26. });
  27. }
  28. window.onafterprint = afterPrint; // Internet Explorer
  29. $(document).keydown(function(allBrowsers){ // Track printing using Ctrl/Cmd+P.
  30. if (allBrowsers.keyCode==80 && (allBrowsers.ctrlKey || allBrowsers.metaKey)) {
  31. $('html').attr('printType', 'Ctrl/Cmd+P');
  32. if ($.browser.opera) { // Opera is a little different so we must send the afterPrint() function to get the tracking to work.
  33. afterPrint();
  34. }
  35. }
  36. });
  37. // Detect Right Mouse Button Click
  38. $('html').mousedown(function(e) {
  39. if( e.which == 3 ) {
  40. $('html').attr('mouseBtn', 'Right');
  41. }
  42. });
  43. // Print activated using window.print() ex. from a button. If you don't have a print button on your page, you can remove this code.
  44. $('.printMe').click(function(){ // Change this to fit your Class or ID.
  45. $('html').attr('printType', 'Print Button'); // Track printing using Print Button
  46. if ($.browser.opera) { // Opera is a little different so we must send the afterPrint() function to get the tracking to work.
  47. afterPrint();
  48. }
  49. window.print(); // If window.print() is activated in another script, you can remove it from this tracking script.
  50. });
  51. }());
  52. </script>

Some final words

This script relays on jQuery, so you will need that installed on your site to get this script to work.

If you think the code could be improved, feel free to chime in (I'm not a programmer).

Related Articles


Viewing all articles
Browse latest Browse all 31

Latest Images

Trending Articles





Latest Images