Helping content editors to find broken images using Google Analytics

To help an editor to find images that does not exist at the site anymore, I added this small snippet of javascript:

window.setTimeout(function() {
        $('img').each(function(index, elm) {
            if (elm.complete && elm.naturalWidth === 0) {
               ga('send', 'event', 'image', '404', elm.src ? elm.src : '');
            }
        });
    }, 5000);

It uses Google Analytics to find pages with images that are missing or does not load correctly. It might not track in all browsers, but it helps the content editor to find broken pages.
The content editor does not need to know exatly how many pages that have missing images, just a few hints. Therefore the script relyes on the img tags complete and naturalWidth attributes. They are however not supported in every browser. Also, if the images are slower than 5 seconds (5000 milliseconds) to load, they are not tracked ether.

This script could be extended to find very large images, lets say images over 1500 pixels in height or width. That would just be another if inside the each:

if (elm.complete && elm.naturalWidth > 2500) {
    ga('send', 'event', 'image', 'very big', elm.src ? elm.src : '');
} else if (elm.complete && elm.naturalWidth > 1500) {
    ga('send', 'event', 'image', 'big', elm.src ? elm.src : '');
}

Another aproach would be lisitening for the error event on images like this:

$("body").one('error', "img", function(e) {
  ga('send', 'event', 'image', '404', e.target && e.target.src ? e.target.src : '');
});

The downside  of this, is that some servers might responsde 404 faster than the page loads jquery. And the jQuery error event does not fire on 403 forbidden errors.

I ended up with a combo of the two scripts:

window.setTimeout(function() {
$('img').each(function(index, elm) {
  if (elm.complete && elm.naturalWidth === 0) {
    ga('send', 'event', 'image', '404', elm.src ? elm.src : '');
  }
  if (elm.complete && elm.naturalWidth > 2500) {
    ga('send', 'event', 'image', 'very big', elm.src ? elm.src : '');
  } else if (elm.complete && elm.naturalWidth > 1500) {
    ga('send', 'event', 'image', 'big', elm.src ? elm.src : '');
  }
});
$("body").one('error', "img", function(e) {
  ga('send', 'event', 'image', '404', e.target && e.target.src ? e.target.src : '');
});
}, 5000);

Happy tracking!

Kategorier: Content, Frontend

1 kommentar »

  1. Hi Johannes,
    This is such a simple and cool piece of code. I am considering tracking such states and other (javascript) errors on a page to http://keen.io. If you do not know keen.io it is basically a cloud based API which lets you push and pull JSON data in any format.
    I have played with it and it seems very cool! 🙂
    Thanks for sharing!
    /Sten

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s