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 : […]

Read More →

Frontend Meetup Aarhus

Kom til en hyggelig og inspirerende aften og mød andre dygtige kollegaer, der også elsker frontend. Program 17:00 Responsive Design and the Modern Web Application Responsivt webdesign (RWD) er ofte en del af løsningen, når en moderne webapplikation skal ud på et utal af devices. Men stigende krav til rige oplevelser, er med til at gøre metoden utilstrækkelig på sigt. […]

Read More →

Catch up på frontend

Vi har samlet to videoer til dig om frontend-udvikling, som sætter fokus på de krav brugerne møder jeres webløsninger med, samt jeres muligheder for at give dem en ekstra god oplevelse i browseren. Her er altså massere af tips at tage med ind i det nye år – uanset om du er teknikker eller ej.

Read More →

The Anatomy of Search Suggest

If you are developing a nice and usable search engine on your website, you have most probably thought of implementing a ‘search suggest’ feature that gives useful suggestions to the user in a drop down menu. But have you considered that the search suggestions can be all different depending on what you want to achieve with the feature? Let’s have a look at the anatomy of Search Suggest – read before you start the development or improvement of your own suggest-implementation. The usability results can differ a lot depending on what model you choose.

Read More →