Controla las imágenes rotas de tu web con jQuery y Google Analytics

Imagen no encontrada Hay pocas cosas más feas que el icono que se muestra cada vez que se intenta cargar una imagen y por algún motivo no se encuentra. Este icono resulta muy feo, además de provocar en el usuario la sensación de que el sitio web está descuidado y con errores.
Una solución podría ser visitar todo el sitio en busca de imágenes no encontradas y arreglando el problema uno a uno, aunque no creo que tengas ganas de hacerlo, la verdad, sobre todo en sitio que tienen bastantes páginas.

Existe otra solución mucho más inteligente que pasa por usar Javascript y jQuery puede ayudarnos mucho en esta tarea.

Esta solución consiste en poner un pequeño código Javascript en la plantilla de tu web que nos avise cuando encuentre alguna imagen rota. Se supone que se tiene cargado el framework jQuery y el código de Google Analytics ga.js.

$(document).ready(function() {
		$('img').error(function() {
			pageTracker._trackEvent('Blog', 'Imagen_rota', $(this).attr('src'));
			$(this).attr({
				src: 'https://www.nosolocodigo.com/imagen-rota.jpg',
				alt: 'Lo siento, imagen no disponible.',
				style:'border: 1px solid #000000;'
			});
		});
});

El código recorre todas las imágenes de la página y les asigna una función al evento error. El evento error se dispara cuando una imagen no se ha podido cargar por cualquier motivo, generalmente porque no se encuentra disponible en la ruta especificada. La función envía un evento a Google Analytics con la categoría Blog, acción Imagen_rota y una etiqueta con el atributo src, es decir, la imagen que no carga debidamente.

Después de reportar el evento a Google Analytics, se cambia la imagen por una imagen creada a nuestro gusto que indique al usuario que la imagen pedida no está disponible, de esta forma queda todo mucho más homogéneo y el usuario sabe que la imagen no se ha cargado. También se le añade un atributo alt y un estilo inline, esto último queda a gusto del consumidor. De esta forma el usuario no tiene que verse el horrible icono de la discordia cada vez que una imágen no se encuentre disponible.

Otra opción sería reportar a Google Analytics y eliminar la imagen para que no aparezca nada, en este caso el código a utilizar sería el siguiente:

$(document).ready(function() {
		$('img').error(function() {
			pageTracker._trackEvent('Blog', 'Imagen_rota', $(this).attr('src'));
			$(this).remove();
		});
});

Una vez puesto esto solo falta esperar a recibir los informes de Google Analytics, ir a la sección Contenido > Seguimiento de Eventos y consultar la categoría Blog. Luego pinchar la acción Imagen_rota y aparecerá una lista de URLs con imágenes que por algún motivo no se han podido cargar.

Compartir:
Abrir chat
¿Tienes alguna duda que podamos aclarar?