Cómo medir los enlaces de ancla en Google Analytics 4

Respuesta corta

Para medir los enlaces de ancla en Google Analytics 4 necesitarás enviar eventos personalizados ya sea a través de GTAG o de Google Tag Manager. Esto es debido a que los enlaces de ancla no suponen una carga de página y por tanto no se activa automáticamente el evento de página vista. En este artículo explico cómo conseguirlo.

Medir usando Google Tag Manager

Para medir los clics en enlaces de ancla usando Google Tag Manager debes seguir estos pasos.

Crea un activador para los enlaces ancla

Este activador debe de ser para «Solo enlaces» y solo puede activarse para «clics en enlaces de ancla». Puedes usar la regla más conveniente para tu sitio, pero en términos generales si indicas que «Click URL contiene #» será más que suficiente para reconocer un enlace de ancla.

Añade una variable javascript personalizada

Esta variable personalizada permitirá capturar el texto ancla de los clics hechos sobre estos enlaces. Puedes llamar la variable de cualquier forma. Para este ejercicio la llamaremos «texto ancla»

Crea una etiqueta de evento personalizado

Crea una etiqueta de evento personalizado de GA4 en Google Tag Manager para medir los enlaces. Solo debes añadir el activador que has creado, nombrar el evento con una descripción apropiada y añadir un parámetro personalizado (en este caso hemos usado «texto_ancla» para guardar el texto ancla en el que se ha hecho clic. Es importante que este parámetro lo añadas posteriormente en GA4.

El código JavaScript para crear la variable de texto es el siguiente:

function() {
  var url = {{Click URL}};  // Variable de click de URL
  var anchorText = url.split('#')[1];  // Extrae el texto ancla de la URL
  return anchorText ? '#' + anchorText : undefined;  // Devuelve el texto ancla, o undefined si no hay texto ancla
}

Medir usando GTAG

Si no usas Google Tag Manager sino que tu medición depende de GTAG, podrás insertar este código JavaScript dentro de tu sitio web, el cual de forma automática detectará cuándo un usuario hace clic en un enlace de texto ancla, y siempre que eso suceda, enviará un evento personalizado a Google Analytics llamado «anchor_click» que además incluirá un parámetro personalizado llamado «anchor_text» el cual incluirá el texto del ancla. Recuerda añadir el parámetro en GA4 para que sea legible en tus informes.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.body.addEventListener('click', (event) => {
    let target = event.target;
    while (target != null && target.tagName != 'A') {
      target = target.parentElement;
    }
    if (target && target.hash) {
      gtag('event', 'anchor_click', {
        'anchor_text': target.hash
      });
    }
  });
});
</script>