Bootstrap CSS Classes Tag Manager

Trucos para Tag Manager: Aprovecha los estándares CSS en frameworks como Bootstrap

Posted by Lucía Marín on Abr 27, 2017

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/

Bootstrap CSS Classes Tag Manager

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»):

Google Tag Manager btn Classes Bootstrap

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>).

Evento click boton Tag Manager

 

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:

tabs-bootstrap-tag-manager-lucia-marin

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.

google-tag-manager-tab-event-bootstrap

 

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

Bootstrap Tab Classes Google Tag Manager

 

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.

Inspeccionar Elemento Tag Manager CSS Selector

 

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

Y pulsamos en Copy / Selector:

Copy Selector Tag Manager CSS 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á!

 

Si necesitas aprender Google Tag Manager y Analytics, entonces te interesa mi curso online. Consta de material PDF actualizado constantemente. Un sitio para hacer tus prácticas. Y está tutorizado por foro/email durante 2 meses (más opción a clases particulares).

O si prefieres una formación in company, en tu empresa, sobre:

  • Tag Manager y Píxeles de Conversión
  • Google Analytics básico o avanzado
  • Data Studio
  • Supermetrics Functions
  • SEO
  • Google Ads
contacta con nosotros, seguro que podemos ayudarte :)

Sobre mí