Vamos a ver dos casos prácticos sencillos de GTM y CSS, o cómo aprovechar los nuevos estilos CSS estándares de los frameworks y CMS, para trackear automáticamente una web. El ejemplo lo hacemos con Bootstrap pero el resto de frameworks tendrán casos de uso muy similares.

Ejemplo 1: Tracking de Click en Botones con Google Tag Manager (Bootstrap)

Si queremos trackear los botones de una web con BootStrap (y con otros frameworks similares)…

¿Qué tal si usamos directamente un trigger estándar con Click Classes contains/begins with btn?

En ciertos framewors como este, ya está predefinida la nomenclatura de muchas clases CSS, con lo cual, ya tenemos conocimiento a priori sobre cómo se van a rellenar algunas variables muy relevantes por ej. si queremos hacer tracking de clicks relevantes.

Por ej. sabemos que los botones suelen incluir todos las clase «btn» al comienzo de su atributo «class=» en el código HTML de la web. Por ej.

http://getbootstrap.com/css/

En principio, la clase se utiliza con etiquetas <button>, pero también puede usarse con etiquetas <a href>, por ello elegimos como tipo de activador «Clicks – Todos los elementos» (y no «Solo enlaces»):

A continuación, para saber cómo rellenar la etiqueta de evento en Tag Manager, nos podremos servir también del valor de la misma variable automática de Tag Manager: {{Click Classes}}, y completar además con {{Click URL}} la información del evento enviado a Google Analytics (por si en algún caso se usa el botón en un enlace con destino, interno o externo, del tipo <a href>).

Ejemplo 2: Tracking de clicks en navegación por Pestañas (Bootstrap)

Por ejemplo, supongamos que queremos medir la navegación por pestañas en Bootstrap.

Como los estilos son comunes en todos los sitios que tienen activos los estilos de Bootstrap, de nuevo, esto puede reutilizarse!! :)

El código:

Lo encuentras aquí: http://getbootstrap.com/javascript/#tabs.

De nuevo, con la variable automática de GTM {{Click Text}} podremos extraer el texto de la pestaña clicada.

Para distinguir cuándo se hace click en cada pestaña, debemos generar el siguiente activador:

Selectores CSS y Google Tag Manager

¿Por qué usamos ese Selector CSS para la comparación?

porque ni cada <a> ni cada <li> cuentan con una clase común fácil para localizarlos. Más bien con un ID separado que nos generaría un tracking excesivamente manual y complejo de mantener o sostener en el tiempo si un site crece. Por ello, debemos usar aquí un selector CSS que agrupe todos esos elementos que nos interesan, por el tipo de elemento o etiqueta que son, no por ids específicos.

Si no sabemos CSS (menos mal que esto en mi caso sí :P) se podría intentar aprender a usar un truco o función de desarrolladores del navegador o explorador de internet (primero Inspeccionar y después Copiar Selector):

Botón derecho sobre el elemento que nos interesa / Inspeccionar (o Inspeccionar elemento). Por ej. sobre la pestaña «Home» de la siguiente URL: http://getbootstrap.com/javascript/#tabs.

Y luego hacemos click derecho sobre el elemento HTML en cuestión en el panel de Herramientas de Desarrollo:

Y pulsamos en Copy / Selector:

Nos devuelve una de estas dos opciones:

#home (nos da esta al existir un id en el elemento)

Esta mejor NO usar porque habría que crear una expresión regular con todos los IDs de todas las tabs de la web, y eso no tiene sentido, no es operativo. En cuanto se añada una sección nueva de la web ya no servirá.

#myTabs > li.active a (nos daría esta si no existiera dicho ID)

Fijémonos en que aquí nos pone «.active», ya que esta clase marca que esa es la pestaña activa, con lo que si queremos crear un selector genérico para todas las tabs clicadas, lo quitamos.

#myTabs > li a

Y por otro lado, el navegador nos ha devuelto un selector con el id #myTabs, que tampoco es muy extrapolable a otros proyectos (los ids son «únicos» y puede que por nuestro equipo de desarrollo se usen de otro modo y/o se cambien). Si es posible, mejor lo convertimos a algo más genérico (ccon clases en lugar de ids), es decir:

ul.nav.nav-tabs li a

Si no comprendemos cómo se ha llegado de lo anterior a esto, podemos ir probando a modo prueba y error hasta lograr el selector que deseamos, aunque es un pelín desesperante, mejor aprender un poco de CSS y selectores ;)

Es fundamental entender que mientras que para un botón concreto y único necesitamos un ID, cuando lo que queremos son soluciones genéricas, en selectores CSS que deseemos reutilizar ocurre lo contrario: lo que funcionan son las CLASES, por ser más amplias y englobar elementos del mismo tipo.

En el curso avanzado de GTM y Analytics hago un resumen y explicación de selectores a partir de este post de Oloblogger, donde me parece que se explica muy bien:

http://www.oloblogger.com/2013/06/css-selectores-basicos.html

Y es que para aprender a profundizar bien bien en Tag Manager, nos resulta necesario a tod@s ir ampliando poco a poco nuestro campo de conocimientos. A los de marketing nos toca avanzar hacia aspectos técnicos (HTML, CSS, JS…). Y a los de IT o desarrollo, que tampoco os libráis :P, os toca acercaros mucho más hacia conocimientos marketinianos y de analítica y publicidad avanzada. O me diréis ahora que entender cómo funcionan los píxeles de seguimiento (de tipo pageview, event, transaction, etc. y con todos sus valores dinámicos que hay que configurar… y aprender cómo hace los recuentos cada etiqueta según su proveedor (Google, Facebook, etc)…  o mejor: entender qué es el RTB… todo eso os sigue pareciendo sencillo?  jaja :P ojalá!