Poner una galería de fotos en una web es una de las posibilidades más sencillas y fáciles para mejorar su funcionalidad.
En la actualidad, disponemos de varias posibilidades. Desde JavaScript’s totalmente independientes (Lightbox2, Shadowbox.js, etc.) pasando por diferentes plugins de los distintos frameworks de JavaScript más conocidos (jQuery, Mootols, YUI, etc.)
Independientemente del plugin o componente de JavaScript que decidamos instalar, una vez que lo hayamos integrado nos debería surgir la pregunta de ¿lo están usando realmente nuestros usuarios?
Para poder contestar ésta pregunta, necesitaremos retocar un poco el código del componente o plugin que hayamos decidido instalar de forma que podamos habilitar el seguimiento con nuestra herramienta de analítica web. En nuestro caso nos centraremos con Google Analytics y Yahoo! Web Analytics.
Para este artículo, utilizaremos el plugin de jQuery “lightBox”, aunque todo lo que hagamos es aplicable para cualquier otro que seleccionemos.
Los pasos a seguir para instalar y configurar el lightbox son:
- Descargar el jQuery ligthBox plugin. Lo primero es descargar y descomprimir el código fuente del plugin desde la home de su web
- Abrir con nuestro editor preferido el fichero js/jquery.lightbox-0.5.js
- Añadir nueva opción de configuración, analytics
- Identificar la función ó evento de visualización de una imagen en la galería
- Añadir la línea de código para la ejecución de nuestro código de seguimiento
- Actualizar el llamado en la configuración de nuestro plugin y difrutar!
Veamos ahora la explicación de cada uno de los pasos:
Los dos primeros son bastante evidentes por los que nos centraremos en el tercer paso. Para añadir la nueva opción de configuración debemos añadir una línea justo al final de la definición de la variable settings:
, analytics: null
*No olvidar colocar la coma “,”.
Con esto hemos creado una nueva opción que se llama “analytics” para poderla definir en pasos posteriores.
El punto que nos puede llevar más tiempo completar es el cuarto, ya que dependerá de la legibilidad del código fuente, es decir, del tiempo que tardemos en encontrar el código que controla la aparición de las imágenes.
En el caso de lightBox, el código que se encarga de dicha tarea se encuentra es _set_image_to_view(), por tanto será en esta función donde añadiremos nuestro código sin afectar el funcionamiento.
El código que insertamos se encarga primero de validar si el parámetro que creamos antes (analytics) tiene asignado una función. En el caso que hayamos definido nuestra función de seguimiento ésta se ejecutará y le pasaremos como argumento la URL de la imagen.
En el caso de lightBox la URL de la imagen está contenida en la primera posición del vector settings.activeImage.
if(typeof settings.analytics == "function"){
settings.analytics(settings.imageArray[settings.activeImage][0]);
}
Finalmente modificamos la inicialización de nuestro plugin, añadiendo la función que se ejecutará. En el fichero zip descargado se encuentra una página de ejemplo que podemos utilizar para su integración, index.htm:
$(‘#gallery a’).lightBox({
analytics:
function(url){
_gaq.push(['_trackPageview', '/'+url]);
//_gaq.push(['_trackEvent', 'gallery', 'display', url]);
var YWATracker = YWA.getTracker("1000123xxxx");
YWATracker.setDocumentName(url);
YWATracker.setDocumentGroup("Gallery");
YWATracker.submit();
}
});
Utilizando una función anónima para englobar nuestra funcionalidad analítica y solo recibiendo una parámetro, la URL de la imagen, podemos marcar una página vista, evento o hacer el múltiple seguimiento con varias herramientas.
Con la implementación anterior podemos hacer el seguimiento adecuado de nuestra galería y uso de la misma de nuestros usuarios.
