CODEWITHSUNDEEP
htmlcssprinting
Dan Fabulich
Dan Fabulich

Reputation: 39573

Server-side logging when someone prints a web page

At my work, we're interested in tracking how often people print our web pages. (If a lot of people are doing it, we'll probably put more focus on making the print view nicer.)

Obviously if we put a "Print" button on the page, we can log when people click on that, but if users just use the "File" menu and choose "Print," we have no way of knowing if they did that.

Is there some clever way to use print-only CSS to cause the browser to issue a web request only when printing? My experiments seem to say no, but this seems like it should be possible.

Edit: A reasonable answer is offered below that works in FF; I'm offering a 100 point bounty for a solution that works on IE as well.

Upvotes: 4

Views: 900

Answers (7)

brian chandley
brian chandley

Reputation: 1276

For IE, explore use the print - related events of the Document body.

window.onbeforeprint - Fires just prior to the page being printed window.onafterprint - Fires immediately after the page to be printed out has been loaded into printer queue/cache.

$(function() {

    //Check to see if browser supports onbeforeprint (IE6, IE7 and IE8)
    if (window.onbeforeprint !== undefined) {
       window.onbeforeprint = TrackPrint;

    }

}); function TrackPrint(){
$.get("http://www.example.com/Count.aspx");}

Upvotes: 1

Roy Rico
Roy Rico

Reputation: 3831

To build on responses from Tyson and Jao, you can try this approach to get around the issue of background images not being displayed/printed by default. instead of background image, use a bullet image...

Insert an element in your HTML source like:

<div id="print_tracker"><ul><li>&nbsp;</li></ul></div>

In your screen CSS:

@media screen {
    #print_tracker { display: none; }
}
@media print {
    #print_tracker { display: block; }
    #print_tracker UL { list-style-image: url(/images/printtracker.gif); }
}

Then track the hits to that image. Hacky... i know

Upvotes: 3

nickf
nickf

Reputation: 546085

You could have a "print version" page and put some server-side logging on that page, however that could be a bit annoying for all parties involved.

What else you could do to is something like this:

  1. On page load, use javascript to add a print-only stylesheet on the page which hides everything except a message saying "Please use the print link on this page".
    • Use javascript here so that users with JS disabled will still be able to print as normal. You won't be able to log them, but you won't piss them off either.
  2. Put a link on the page which, when clicked, logs the event via AJAX, removes that stylesheet and then calls window.print()

Upvotes: 0

jao
jao

Reputation: 18620

Maybe you could add a background image to the print.css file and link that background image to a file on your server which does the logging.

For example:

body {background-image:url(http://www.example.com/printlogger.aspx);}

I'm not sure if that works, just a thought

Update: I just tried the above. It does increment the counter if you do a print preview. However it doesn't when update the counter when printing a page (even with print background images turned off). Another option might be to use the CSS content property.

UPDATE II You can use the content property, works in Firefox, not in IE8. I haven't tested other browsers:

body
{
    content:url(http://www.example.com/Count.aspx);
}

Upvotes: 2

workmad3
workmad3

Reputation: 25677

You could check that your printing CSS has loaded (you can select CSS for a particular layout using media selectors) with javascript. The javascript could then log to the server this request.

Upvotes: 1

grawity_u1686
grawity_u1686

Reputation: 16282

There is no accurate way to see when a page is being printed (and some may consider it privacy invasion). The suggestions for having a separate print CSS do work, but they can create a lot of false alarms - Print Preview, prefetching, and mirroring tools (even wget) would request the CSS file too, even if they are not going to print anything.

Upvotes: 2

Tyson
Tyson

Reputation: 6244

Insert an element in your HTML source like:

<div id="print_tracker"></div>

In your screen CSS:

#print_tracker { display: none }

(That's not really needed unless you have some default styles for divs that causes it to have a size.)

In your print CSS:

#print_css { display: block; height: 1px; background-image: url(clear.gif); }

Then just track the hits to that image.

Upvotes: 1

Related Questions