Detecting if an image is loaded on a page
My question is not similar to this one: Browser independent way to detect when image is loaded
I have advertisements on my site for which I am getting paid per impression, now I have seen a dramatic drop in the number of impressions each ad received, however I am getting more than average views / month. Is it possible for me to detect if an image is loaded or something like 404 (common with cheap ad blockers) was loaded instead?
a source to share
What do you think now? From your question, I suspect you are parsing server log or images are served with a dynamic url. If so, then the crash could be caused by client or proxy caching. Users view ads, but the request never reaches your server.
The obvious solution would be to disable caching, but this is very rude for your visitors. The current general approach is to use 1px GIF as a beacon for counting ads. JS will work too, but you will lose hits when JS is disabled.
<div id="ad">
<img src="/real.gif?ad_id=3435">
<img src="/beacon.php?ad_id=3435&random=6354377">
</div>
BTW: If the count is done by the ad provider, then there is always the possibility that they are lying. Market people are usually not the most honest or principled of the people.
a source to share
Often ad blockers are not the cause of the "dramatic drop" ...
You can add javascript that will "ping" your ad image server, or you can verify that your images will be loaded ... Both are very simple to implement, but failing to do so will result in the elimination of legitimate users. For example, I hate when pages freeze because someone is collecting staistics and sending a request to the server in the onunload event ...
a source to share
One way is to register the loading of the image with Ajax using the onload event for the image. If you load pages the same way, you can compare page loads to page loads that have successfully loaded an image.
<img src="..." onload="logMe(this)" />
function logMe(img) {
now = new Date()
src = this.src
....your Ajax code that writes to the server log.
}
a source to share
1.) There is an onload event for images ... you can see when / if this is fired.
2.) You can use DOM / JS to see if the properties exist in the image and are as expected.
3.) Keep in mind that if the image does not have a unique path or is served prior to caching, the browser will not re-fetch the image (so repeated visits will not reload images)
For the record, if you get paid per / impression, you're very lucky. Most systems only care about hits. So if the image is uploaded it doesn't mean anything ... but if the user clicks on it, then there is compensation.
a source to share