En post anteriores hemos visto lo que es un Tag Manager, los diferentes tipos que hay disponibles actualmente y como gracias a ellos es posible realizar una gestión centralizada de todas las huellas que queramos utilizar (Google Analytics, SiteCatalyst, doubleClick, etc.). Otra característica importante de estas herramientas es que nos permiten vincular el contenido y los eventos de las páginas web, con las huellas y la información que viaja en ellas.
Para extraer información y detectar eventos se utiliza JavaScript, que es el lenguaje que utilizan los navegadores para poder cagar de manera dinámica las páginas. En este post vamos a ver conceptos muy básicos de JavaScript que nos permitirán comenzar a extraer información y detectar estos eventos.
¿Cómo acceder a los contenidos y eventos de las páginas?
Como explicado, JavaScript es el lenguaje que se utiliza para cargar las páginas web, y se utiliza junto con las tecnologías HTML y CSS. HTML es el lenguaje que permite incluir los contenidos y CSS es el lenguaje que determina la forma en que se muestran. JavaScript hace que las páginas sean dinámicas, y para poder llevar a cabo esta tarea se basa en la utilización de la interfaz conocida como DOM.
Nuestro objetivo es sacar información del contenido HTML de las páginas, utilizando JavaScript y su interfaz DOM. El problema es que los métodos que proporciona este lenguaje en ocasiones son demasiado complejos, para realizar tareas aparentemente sencillas. En su lugar se suelen utilizar librerías como jQuery, que no es más que una extensión de JavaScript que permite manipular las páginas de manera muy sencilla. En los siguientes dos apartados vamos a ver ejemplos de cómo acceder a contenidos de las páginas y detectar los eventos que nos interesen.
Rescatar contenidos de las páginas utilizando jQuery
Un documento HTML está formado por una serie de bloques. Cada uno de estos bloques tiene un nombre, una serie de atributos y en determinadas ocasiones, un texto asociado. Para sacar información de una página web, debemos acceder al texto o a los atributos de algunos de sus bloques. Para ello, si utilizamos jQuery, debemos hacer uso del objeto $ que nos permite seleccionar los elementos que queramos, en base a una serie de selectores.
El primer selector que podemos utilizar es el nombre del bloque al que queremos acceder. Para utilizar este selector, simplemente tenemos que poner el nombre del bloque dentro del objeto $, de la siguiente manera:
$("input")
También podemos seleccionar un elemento en base al atributo “id” utilizando el carácter “#”, de la siguiente manera:
$("input#identificador_elemento")
También podemos acceder al elemento deseado en base a alguna de las clases a las que pertenezca, utilizando el punto:
$("input.clase_elemento")
Por último, si quisiéramos acceder al elemento a través de cualquier otro atributo, debemos especificar su nombre y su valor, como se indica a continuación:
$("a[name='valor_atributo']")
A través de estos selectores básicos y combinándolos de la forma que queramos, seremos capaces de acceder a cualquiera de los elementos del HTML de las páginas, y recuperar su texto o sus atributos mediante funciones de jQuery, como por ejemplo text():
$("a#enlace_divisadero").text()
En la siguiente sección vamos a ver cómo además de acceder a los elementos de las páginas, también es posible detectar los eventos que se producen.
Cómo detectar eventos
Para poder detectar eventos utilizando jQuery se suele utilizar el método .on(). Este método actúa sobre determinados elementos y detecta los eventos que se le pasan como parámetros, como se indica a continuación:
$().on(, , function(){<código de la función a ejecutar>})
De esta forma si quisiéramos detectar el click en un determinado enlace, deberíamos :
$("body").on("click", "a#enlace_divisadero", function(){<código de la función a ejecutar>})
Por lo tanto, podemos detectar un evento y recuperar el valor del bloque que queramos cuando se produzca, para enviar determinada información dentro de las huellas que utilicemos. Cabe destacar que dentro del código de la función, es posible acceder al objeto actual que ha generado el evento, utilizando el objeto $(this).
Conclusiones
A través de este post hemos abordado conceptos muy básicos de jQuery para acceder a los elementos del HTML de las páginas y detectar eventos que se produzcan en ellas. De esta forma podemos recuperar, utilizando un Tag Manager,información determinada, para enviarla como parte de las huellas que utilicemos. Esto nos permitirá lanzar las huellas con información de las páginas, sin necesidad de realizar modificaciones en su código. Existen métodos más avanzados de manipular las páginas con jQuery, disponibles en la página de referencia de la extensión.
No dudéis en comentarnos cualquier duda que podáis tener sobre la utilización de JavaScript y jQuery dentro de los Tag Managers.
