A couple years ago, one of my clients recently had the need to keep track of pages that were printed by the staff for back-office type operations. They were using Internet Explorer exclusively, so I felt comfortable using IE’s proprietary onafterprint<\/em> event.<\/p>\n Within this handler of this event, I was using AJAX to hit a server-side script that kept track of the number of times a given page was printed. To be accurate, this event was also fired after a page was previewed for printing.<\/p>\n I thought that kinda strange, since it was a JavaScript event fired by the browser, it should have had the fined-grained control to tell us when the page actually printed (as opposed to simply being previewed).<\/p>\n Anyway, this solution worked perfectly, until my client decided to explore other browsers. One day I get the email – “why doesn’t our print tracking work anymore?”.<\/p>\n After digging into it for a few minutes, I came to the conclusion that they were no longer using Internet Explorer exclusively.<\/p>\n After a quick Google search, I found that the window.matchMedia()<\/em> function would quickly solve this issue. The only problem is, it isn’t fully supported by legacy browsers.<\/p>\n I started composing an email to my client to the effect of, “any chance you guys can start using the latest Chrome exclusively?”. \u00a0Then, it hit me, instead of putting the workload on my client, there was a simple solution that has been supported by all browsers since the dawn of time (well, close enough).<\/p>\n I could drop a background image style inside a print-only CSS block. But, instead of supplying a background image, I’d use a server-side script and supply any necessary tracking options in the query string.<\/p>\n The browser certainly doesn’t like the content-type response, but it does the job. I suppose I could offer up a content-type: image\/gif header and a very small image as the response, but it’s not really necessary to get the job done.<\/p>\n","protected":false},"excerpt":{"rendered":" Capturing visitor print events has applications, whether it be for analytics or to slap someone on the wrist for printing too many pages! I recently found a solid cross-browser way to do it.<\/p>\n","protected":false},"author":1,"featured_media":2210,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[87],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2196"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=2196"}],"version-history":[{"count":4,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2196\/revisions"}],"predecessor-version":[{"id":2212,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2196\/revisions\/2212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media\/2210"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=2196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=2196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=2196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Options for modern browsers<\/h3>\n
CSS Background Images<\/h3>\n
<style type=\"text\/css\">\r\n @media print { \r\n .order-date { \r\n background-image: url(\/updatePrinted.php?page_id=x); \r\n } \r\n }\r\n<\/style><\/code><\/pre>\n