Como continuación al post de mi compañero Javier Pozueco, hoy vamos a ampliar información sobre cómo seleccionar elementos de una web para su medición, basándonos ahora en sus atributos HTML.
El objetivo de la analítica web es extraer conclusiones y poder definir estrategias a partir de datos obtenidos de entornos web que nos permiten conocer mejor a los clientes y al mercado,e impulsar mejoras en el canal. Ese es el objetivo, la meta. Pero para conseguir eso, el primer paso es obtener los datos, y aquí entra en juego JavaScript (muy usado actualmente a través de tag managers como Google Tag Manager, Tealium, BrightTag, Ensighten, Qubit, TagMan, entre otros ).
JavaScript es un lenguaje de programación que permite obtener datos como por ejemplo qué página se está visualizando, qué botón ha pulsado el usuario, de qué página viene, etc. Sin embargo con JavaScript surgían algunos problemas,como el hecho de que por lo general se requería mucho código para realizar tareas sencillas, y sobre todo el inconveniente de que un mismo código no se ejecutaba de la misma manera en todos los navegadores, con lo cual era necesario crear código ad-hoc para cada navegador con el consecuente incremento de tiempo y coste necesario para realizar una tarea.
Surgió entonces jQuery, una librería JavaScript que permitía escribir menos código y que además se ocupaba internamente de las diferencias entre navegadores (entre otras ventajas). Y a raíz de todo eso surgió… este post. Porque en ocasiones se ven en algunas webs fragmentos de código en los que se emplea jQuery, pero no todo su potencial. Da la sensación de que se emplea una tecnología por el mero hecho de usarla, o de “estar a la última”. jQuery es una librería muy potente y que puede facilitar mucho tareas que antes eran mucho más complicadas, pero como se suele decir “la potencia sin control no sirve de nada”.
En este post (y otros en el futuro) explicaré algunos selectores y filtros fundamentales para sacarle el máximo partido a jQuery. Comenzamos con una selección de ellos que en sucesivas publicaciones iremos avanzando.
SELECTORES DE ATRIBUTO
Comenzamos con los selectores de atributo, muy útiles de cara a filtrar mejor qué elemento se quiere obtener.
Por ejemplo, supongamos que en nuestra web tenemos varios elementos div pero queremos obtener algún dato (el que sea) sólo de aquellos que tienen el atributo id (sea cual sea su valor). jQuery nos permite obtenerlos de forma muy sencilla:
$("div[id]")
También podemos querer ir más allá y acceder a elementos que no sólo tienen cierto atributo sino que además queremos que dicho atributo tenga un valor determinado. Por ejemplo, si queremos acceder al enlace de nuestra web que contiene nuestro catálogo de productos (catalogo.pdf) jQuery nos permite acceder de forma sencilla:
$("a[href='catalogo.pdf']")
– Esto parece interesante… ¿y si no quiero acceder sólo al catálogo sino a todos los pdf que el usuario puede descargar de mi web?
– No hay problema, jQuery te permite hacerlo de la siguiente forma:
$("a[href$='.pdf']")
El código anterior selecciona todos los enlaces (elementos “a”) cuyo atributo href termina en “.pdf”.
– ¿Y si mi página tiene 1000 pdfs?
– Da igual, el código anterior es genérico y se adapta automáticamente al contenido de tu web, no importa si se añaden pdfs o si se quitan, el código anterior siempre seleccionará todos los pdf que haya.
– Vale, pero ahora no quiero acceder a todos los pdf, sólo a los catálogos que tengo (catalogo2014.pdf, catalogo2015.pdf, catalogoVIP.pdf, etc), ¿puedo hacerlo?
– Con jQuery esto es tan sencillo como escribir el siguiente código:
$("a[href^='catalogo']")
El código anterior selecciona todos los enlaces cuyo atributo href comienza por “catalogo”.
– Ya pero si tengo un enlace que lleva al usuario a la página “catalogo.html” ese enlace también comienza por “catalogo” pero no es lo que quiero, no es un pdf.
– Me has pillado… pero por suerte a jQuery no se le pilla tan fácilmente ya que te da la opción de hacer lo siguiente:
$("a[href^='catalogo'][href$='.pdf']")
El código anterior selecciona los enlaces cuyo atributo href comienza por “catalogo” y además termina con “.pdf”.
– ¿Y si quisiera hacer un filtro y seleccionar sólo los enlaces que llevan a algún documento de 2014, como por ejemplo “catalogo2014.pdf”, “doc_2014_publico.html”, “2014_balance.xls”?
– Bien, suponiendo que en el nombre del documento aparece el año (algo que no debería ser nada descabellado), bastaría con el siguiente código:
$("a[href*='2014']")
Ese código obtendría todos los enlaces en cuyo href aparece el texto “2014”, sin importar si ese texto aparece al principio, al final o por el medio, y sin importar si es un pdf, una página estática HTML, una página dinámica construida por ejemplo con PHP o Java, una hoja de cálculo, un documento de Word, etc.
– Vaya, esto parece muy interesante, las posibilidades son muy amplias. Tengo ganas de saber qué más me puede ofrecer jQuery y la analítica web.
– Por hoy es suficiente. Pero recuerda, tener una web y no emplear analítica es como tener un coche y no echarle gasolina… no podrás avanzar. Y el primer paso para una buena analítica es una buena selección de los datos a analizar.
Hasta aquí por hoy. Hemos visto una pequeñísima muestra de las posibilidades que ofrece jQuery. Espero que a las personas que no conocieran alguno de estos selectores sientan ahora la curiosidad sobre todo lo que puede ofrecer esta librería. Yo por mi parte trataré de satisfacer esa curiosidad en sucesivos posts.
(Icon made by Freepik from www.flaticon.com)
