Si eres usuario de WordPress o, mejor dicho, si eres un usuario “avanzado” que sigue la actualidad del CMS más usado en internet, estarás al corriente de los últimos cambios realizados en el core. Si este es el caso ya sabrás que WordPress está haciendo grandes esfuerzos en la creación de páginas web sin necesidad de escribir código mediante su nuevo editor de bloques (hasta hace poco conocido como Gutenberg).
Este editor, en concreto, te permite desde el core de la aplicación, y sin necesidad de usar cualquier otro tipo de maquetador visual como Elementor o Divi, la creación completa de páginas web a partir de bloques predefinidos. Podríamos decir que el momento cumbre del proyecto Gutenberg en WordPress llega con lo que se ha llamado el “Full Site Editing” o la “Edición completa de la web”, con el que somos plenamente capaces de crear todas las páginas de la web con todas las plantillas necesarias para cada página.
Pero, ¿qué tiene esto que ver con el análisis web?. Estos cambios, quizás no tengan demasiado que ver con la analítica de nuestra web de nuestra página de forma directa, pero indirectamente puede afectar a cómo identificamos algunos elementos en la web para poder detectar determinadas acciones o eventos. Vamos al caso práctico que te planteo, cómo detectar los enlaces del menú principal para crear un activador en GTM cuando un usuario haga clic en los mismos.
Como hacerlo con un tema tradicional
Anteriormente, cuando usábamos un tema tradicional, una de los métodos para identificar el clic en el enlace dentro del menú con GTM era aprovechar la posibilidad de usar un filtro en el activador de “clic – sólo enlaces”. En concreto podíamos hacerlo mediante el filtro que compara la clase del elemento “enlace” con el nombre de la clase que usemos para los enlaces del menú:
Sabemos que hay otros tipos de filtros a usar, pero este es los suficientemente “estable” como para usarlo de forma fiable en nuestro activador.
Por ejemplo, si tuviésemos un menú principal generado con el tema GeneratePress el código de nuestro menú principal luciría como sigue:
Centremos nuestra atención en los elementos de lista <ul> y los distintos items dentro de la lista <li>. Dentro de esos items tenemos los elementos <a> con la estructura típica de un enlace (<a href=”URL”></a>). Estos últimos son realmente los enlaces de los botones del menú.
En este caso debemos identificar en clic en los elementos de enlace (<a></a>) a través de GTM. Como podemos observar, no tenemos ninguna clase definida para esos elementos aunque sí en elementos superiores. Sin embargo, el activador tipo “clic – sólo enlaces” se activara únicamente al hacer clic en el elemento enlace, por lo que es ese elemento el que debe tener definida una clase.
En WordPress podemos añadir una clase a un elemento del menú a través de un filtro que permite modificar los atributos de los links de navegación. En nuestro caso podríamos añadir la función siguiente a nuestro tema (dentro de functions.php), a nuestro archivo de funciones personalizado o incluso a nuestro archivo mu-plugins en el que estemos definiendo los códigos de seguimiento:
/* Función para añadir una clase a los enlaces del menú principal */
function dmkt_add_menu_link_class( $atts, $item, $args ){
// Verificamos si se trata de un elemento del menú principal
if ($args->theme_location='primary'){
$atts['class'] = 'dmkt-primary-menu-link';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'dmkt_add_menu_link_class', 10, 3);Aplicando ese filtro en nuestra instalación de WordPress logramos que se inserte la clase que deseamos únicamente en los enlaces de nuestro menú principal:
Ahora podríamos aprovechar esta clase para identificar el enlace desde GTM:
El resto ya sabes cómo va. Se crea un evento y se añade como activador este que acabamos de crear.
Esta era una de las formas que teníamos para detectar el clic en los botones de menú con GTM para un tema tradicional en WordPress, pero ¿qué pasa cuando tenemos un tema FullSiteEditing?.
¿Necesitas ayuda para implementar el código de seguimiento en tu web? ¿No tienes claro qué deberías medir ni con qué objetivo?
Como hacerlo con un tema Full Site Editing (edición completa de la web)
Como hemos dicho, en un tema Full Site Editing tenemos la capacidad de crear toda nuestra web a partir de bloques y plantillas de bloques. En las últimas versiones de WordPress se han ido añadiendo bloques al core que nos permiten crear cualquier elemento de una web convencional. Uno de estos bloques es el de navegación.
El bloque de navegación de WordPress
El bloque de navegación fue uno de los últimos en ser incluido dentro del core. Con él podemos crear menus de navegación en WordPress de forma muy simple añadiendo otros “sub-bloques” que hacen las veces de enlaces.
No entraremos ahora en cómo crear un menú con este bloque, pero veamos la estructura que se genera:
Como vemos, el bloque de navegación nos crea un contenedor llamado “Navegación” en el que se introducen los enlaces del menú.
Esto, traducido a código HTML nos da lo siguiente:
Igual que en el caso de un tema tradicional nos centramos en las etiquetas <a>. El bloque de navegación le añade ya una clase a ese enlace, que como vemos es: “wp-block-navigation-item__content”.
Identificando el enlace para GTM mediante una clase
Idealmente podríamos pensar en esa clase para identificar los clics a los enlaces en el menú. El problema en este caso es que si insertamos más menús dentro de una misma página con el bloque de navegación (por ejemplo en el footer), dicho bloque va a asignar la misma clase a los items del otro menú con lo que si definimos el filtro en GTM con esa clase también se activará cuando hagamos clic en cualquier otro menú de la página y nos estaría dando una medición errónea.
Podríamos probar a añadir el código anterior con el filtro ‘nav_menu_link_attributes’ a nuestro tema con una clase personalizada, pero veremos que que no va a funcionar ya que los menus con un tema Full Site Editing están gestionados de forma distinta y el filtro anterior no nos sirve.
Otra solución podría ser añadir una clase personalizada a través del menú avanzado del bloque:
Comprobemos con el código si esto nos está identificando el elemento enlace tal y como necesitamos:
Como podemos observar, la clase adicional insertada en el bloque se aplica a la etiqueta <li> y no al enlace tal y como necesitamos. Entonces ¿cómo podemos identificar este enlace si estamos trabajando con GTM y un tema de edición completa?
Identificando el enlace mediante un elemento en GTM
Es en este momento que nos planteamos identificar el enlace de otra forma que no sea a través de la clase. En las opciones que ofrece GTM para su activador de “clic en enlaces” vamos a centrarnos en el “Click Element”, es decir, “cuando se hace click en un elemento”.
El otro elemento de la ecuación que vamos a necesitar se basa en los selectores CSS. Los selectores CSS son las estructuras que nos permiten asignar los estilos a los distintos elementos de HTML que componen nuestras web. Resulta que cuando activamos el filtrado a través de un “Click Element” en GTM podemos establecer condiciones relacionadas con los selectores CSS:
En concreto tenemos las opciones:
- “Coincide con el selector de CSS”
- “No coincide con el selector de CSS”
Y aquí se nos abre una puerta muy interesante ya que podemos identificar casi cualquier elemento de nuestra web a través de los selectores CSS. En nuestro caso, viendo el código inicial:
Podríamos pensar en aprovechar que tenemos un elemento <li> con su clase “wp-block-navigation-item” dentro del cual encontramos el elemento <a> con la clase “wp-block-navigation-item__content”. Visto así podríamos definir el activador en GTM como:
Donde en el campo del selector CSS hemos introducido: “li.wp-block-navigation-item a.wp-block-navigation-item__content”:
Si lo definimos así tenemos el mismo inconveniente que se nos planteaba al usar la clase del elemento <a> como identificador, que cada vez quese añada un nuevo menú con el bloque de navegación la estructura va a ser exáctamente la misma y no tendremos ningún elemento diferencial. Es aquí donde podemos aprovechar la posibilidad de introducir una clase en el bloque a través del editor de Gutenberg que hemos visto antes.
Si añadimos a cada uno de los enlaces la clase “dmkt-primary-menu-link” ya hemos visto que nos la inserta como una clase del elemento <li>. En este caso sí que será única para los enlaces para los que se la introduzcamos (idealmente los enlaces del menú principal). El código HTML ya hemos visto que quedaría de la siguiente forma:
Ahora sí que podríamos definir el siguiente selector CSS para identificar nuestro enlace: “li.dmkt-primary-menu-link a.wp-block-navigation-item__content”. Introducimos el selector en nuestro activador:
Y ahora sí que vamos a tener un trigger que se activará cuando se haga clic en un enlace cuyo elemento coincida con el selector CSS que acabamos de definir.
En este momento ya podemos usar el activador para definir nuestro evento.
Conclusión
Como véis puede parecer complicado, pero una vez comprendamos las estructuras de los selectores CSS el identificar los elementos a través de los elementos puede ser una alternativa muy interesante a tener en cuenta en el caso de que no tengamos identificadores o clases únicas que nos permitan identificar exáctamente lo que nos hace falta de forma inequícova.
¿Necesitas ayuda para implementar el código de seguimiento en tu web? ¿No tienes claro qué deberías medir ni con qué objetivo?
Deja una respuesta