Qué registra el seguimiento de clics en un sitio web y qué clics pierde

¿Qué es el seguimiento de clics en un sitio web?

En un sitio web, el seguimiento de clics es la práctica de registrar en qué elemento hizo clic un visitante, en qué página y en qué momento, y después enviar ese registro a una herramienta de analítica para que los clics se puedan contar, comparar y vincular a conversiones. Un pequeño script escucha el evento click del navegador, lee lo que se pulsó y envía un payload corto a un endpoint de recogida. Haz seguimiento de los clics en los elementos que deciden si un visitante convierte, como el botón de registro, el selector de precios y el enlace al checkout, antes de rastrear cualquier otra cosa.

El seguimiento de clics es la capa de datos que hay debajo de varios informes que parecen distintos. Un objetivo cuenta clics en un botón. Un mapa de calor pinta los clics por posición. Un paso del embudo puede ser un clic. El método que elijas decide qué informes puede alimentar esos datos.

¿Qué cuenta un navegador como clic?

Un navegador dispara un evento click cuando se pulsa y se suelta un botón del puntero dentro del mismo elemento, cuando un gesto táctil cae sobre él o cuando un usuario de teclado lo activa, así que un solo listener cubre ratón, pantalla táctil y teclado. La referencia de MDN indica que "click fires after both the mousedown and mouseup events have fired, in that order," y enumera "a touch gesture" y "pressing the Space key or Enter key while the element is focused" como equivalentes.

La regla del teclado tiene una trampa que rompe el seguimiento en los controles personalizados. MDN señala que la equivalencia de Enter y Espacio "only applies to elements with a default key event handler, and therefore, excludes other elements that have been made focusable by setting the tabindex attribute." Un <div tabindex="0"> con estilo de botón no recibe ningún click desde el teclado, así que los usuarios de teclado desaparecen de su recuento de clics. Usa un <button> o un <a> reales para todo lo que pienses rastrear.

El evento también cuenta las repeticiones. MDN dice que la propiedad detail contiene "the number of times the target was clicked," así que vale 2 en un doble clic y 3 en un triple clic. Ese contador es la materia prima para detectar los rage clicks.

¿Cuáles son las tres formas de hacer seguimiento de clics?

Los tres métodos son un evento con nombre en elementos elegidos, un único listener delegado que registra todos los clics de la página y la captura de coordenadas, que guarda en qué punto de la pantalla cayó cada clic. Cada uno responde a una pregunta distinta y falla de una forma distinta.

Los eventos con nombre son el método que hay detrás del seguimiento de eventos, donde el nombre del evento lleva la acción y las propiedades llevan el detalle. El listener delegado es lo que los proveedores llaman autocapture. La captura de coordenadas alimenta el mapa de calor del sitio web, que agrega posiciones de muchas visitas en una sola imagen. Un reparto práctico es usar eventos con nombre para el puñado de clics que importan y la grabación de sesiones para el resto.

¿Qué debería registrar un evento de clic?

Un evento de clic debería registrar el identificador estable del elemento, la página en la que ocurrió, el destino en el caso de los enlaces y una marca de tiempo, y nada que haya escrito el visitante. Esos cuatro campos responden a "qué, dónde, hacia dónde y cuándo" sin guardar nada personal.

Deja fuera el texto de los enlaces en las páginas que muestran datos de la cuenta, y nunca leas valores de los campos de formulario cercanos, porque un botón con el nombre de un cliente en su etiqueta envía ese nombre con cada clic. Un atributo data-track dedicado es el identificador más seguro, ya que solo cambia cuando alguien lo cambia a propósito.

El listener siguiente usa un solo manejador para todo el documento, filtra los elementos que llevan data-track y envía con navigator.sendBeacon():

document.addEventListener(
  'click',
  (event) => {
    const el = event.target.closest('[data-track]');
    if (!el) return;
    navigator.sendBeacon(
      '/collect',
      JSON.stringify({
        name: el.dataset.track,
        path: location.pathname,
        href: el.getAttribute('href'),
        clicks: event.detail,
        ts: Date.now(),
      }),
    );
  },
  { capture: true },
);

La opción capture: true ejecuta el manejador en el descenso por el DOM, antes que cualquier manejador del propio botón. Así, un componente que llama a event.stopPropagation() en su propio manejador de clic no puede ocultar el clic al tracker.

¿Por qué algunos clics rastreados nunca llegan al informe?

Los clics se pierden cuando la página se descarga antes de que se envíe la solicitud, cuando un bloqueador descarta la solicitud o cuando el elemento pulsado nunca coincidió con el listener. Los enlaces llevan el riesgo añadido de la primera causa, porque el clic que inicia una navegación es también el clic que desmonta la página que lo envía.

MDN describe el problema directamente: "the browser may be about to unload the page, and in that case the browser may choose not to send asynchronous XMLHttpRequest requests." Su respuesta es navigator.sendBeacon(), que "asynchronously sends an HTTP POST request containing a small amount of data to a web server" y está pensado para este caso. La comparación de sendBeacon frente a fetch keepalive cubre los límites de tamaño y cuándo encaja mejor fetch con keepalive: true.

Revisa las causas en este orden cuando los recuentos parezcan bajos:

1. Compara con un total conocido. Los clics en un botón de checkout no pueden superar las páginas vistas del checkout. Una proporción muy inferior a la esperada apunta a pérdida, no a poco interés.
2. Prueba el caso del enlace. Haz clic en el elemento con el panel de red abierto y "Preserve log" activado. Una solicitud que aparece como cancelada es el problema de la descarga.
3. Prueba el teclado. Llega al elemento con el tabulador y pulsa Enter. Si no hay evento, es un div enfocable en lugar de un botón.
4. Prueba con un bloqueador activado. Una solicitud que desaparece con un bloqueador de contenido se pierde para esa parte de los visitantes en todos los informes.
5. Revisa el selector. Una definición escrita sobre un nombre de clase deja de coincidir tras un rediseño, y el recuento cae a cero sin ningún error.

¿Cómo hace GA4 seguimiento de clics sin código adicional?

GA4 rastrea automáticamente dos tipos de clic en enlaces mediante la medición mejorada: los clics salientes y las descargas de archivos, y no rastrea los clics en botones que se quedan en tu propio dominio. El centro de ayuda de Google dice que el evento click se dispara "each time a user clicks a link that leads away from the current domain and to another website" y recoge "link_classes, link_domain, link_id, link_url, outbound (boolean)." El evento file_download se dispara "when a user clicks a link leading to a file (with a common file extension)."

Todo lo demás, incluido el botón de registro y el selector de precios, necesita un evento personalizado. Las guías sobre cómo rastrear enlaces salientes y descargas de archivos cubren en detalle los dos casos automáticos.

¿Qué revelan los patrones de clic sobre las páginas rotas?

Los clics repetidos en un mismo elemento y los clics que no producen respuesta son los dos patrones que apuntan a una página rota y no a poco interés. Un rage click es una ráfaga de clics en el mismo elemento, y un dead click es un clic tras el cual nada cambia en la página. Ambos parecen interacción en un recuento bruto de clics, y por eso un informe de clics sin el contexto de la sesión exagera lo bien que funciona una página. La guía de rage clicks frente a dead clicks enumera los umbrales que publica cada proveedor.

Flowsery cubre las dos mitades del trabajo. Los eventos personalizados rastrean cualquier interacción con una llamada a la API de JavaScript, incluidos clics en botones, envíos de formularios y descargas de archivos, y el seguimiento de objetivos convierte esos eventos en tasas de conversión en la página de seguimiento de objetivos y eventos. La grabación de sesiones reproduce el movimiento del cursor, los clics, el scroll y la entrada en formularios, y la IA de Flowsery marca rage clicks, dead clicks y errores de JavaScript en cada sesión grabada, y después los agrupa en incidencias ordenadas según cuántas sesiones afectaron. El seguimiento funciona sin cookies y sin banner de consentimiento.

Preguntas frecuentes

¿Cuál es la diferencia entre el seguimiento de clics y un mapa de calor?

El seguimiento de clics es la recogida de registros de clics, y un mapa de calor es una forma de mostrarlos. Un mapa de clics agrega las posiciones x e y de muchos clics en una capa de color sobre una imagen de la página. Los eventos de clic con nombre no llevan ninguna posición y alimentan objetivos y embudos.

¿El seguimiento de clics cuenta los toques en el móvil?

Sí. Un gesto táctil sobre un elemento dispara el mismo evento click que pulsar y soltar el ratón, así que un solo listener cuenta ambos. Los clics en móvil necesitan su propia vista de mapa de calor, ya que las coordenadas cambian con el diseño más estrecho.

¿Por qué se cuentan de menos mis clics en enlaces salientes?

La página empieza a descargarse en cuanto el visitante sigue el enlace, y el navegador puede descartar una solicitud normal durante la descarga. Enviar el evento con navigator.sendBeacon() o con fetch y keepalive: true permite que la solicitud sobreviva a la página. Los bloqueadores de contenido eliminan otra parte que ningún método de envío recupera.

¿Debería rastrear todos los clics o solo los importantes?

Rastrea como eventos con nombre los clics ligados a una conversión y deja el resto a la grabación de sesiones o a un mapa de calor. Los eventos con nombre en cada elemento producen un esquema que nadie mantiene. Un listener delegado sobre todo produce volumen con selectores que se rompen en el siguiente rediseño.

¿El seguimiento de clics recoge datos personales?

Un registro de clic contiene un identificador del elemento, una ruta de página y una marca de tiempo, y nada de eso identifica a una persona. Los datos personales entran cuando el payload incluye texto de enlaces o valores de formularios que muestran datos de un cliente, o cuando los clics se unen a un identificador persistente. Envía un valor data-track fijo en lugar del texto visible para mantener el registro anónimo.

¿Puede GA4 rastrear clics en botones automáticamente?

No. La medición mejorada de GA4 registra los clics en enlaces que salen de tu dominio y en enlaces a tipos de archivo habituales. Un botón que se queda en tu propio sitio necesita un evento personalizado enviado con tu propio código o a través de un gestor de etiquetas.

¿Por qué un <div tabindex="0"> no registra clics desde el teclado?

Según MDN, la equivalencia de teclado para Enter y la barra espaciadora solo aplica a elementos con un controlador de eventos de teclado por defecto, lo que excluye a los elementos que solo se hicieron enfocables con tabindex. Un <div tabindex="0"> con estilo de botón nunca dispara un evento click cuando un usuario de teclado pulsa Enter o espacio, así que esos usuarios desaparecen del conteo de clics. Usa un <button> o <a> real para todo lo que planees rastrear.

¿Qué mide la propiedad detail del evento de clic?

La propiedad detail guarda el número de veces que se hizo clic en el elemento, así que marca 2 en un doble clic y 3 en un triple clic. Ese contador es la materia prima que usa la detección de rage clicks. Un evento con nombre que también registre detail puede señalar clics repetidos en un elemento sin necesidad de otro listener.

¿Cuál es la diferencia entre un rage click y un dead click?

Un rage click es una ráfaga de clics sobre el mismo elemento, y un dead click es un clic tras el cual nada cambia en la página. Ambos parecen interacción en un conteo de clics sin más contexto, por eso un informe de clics sin contexto de sesión puede leer una página rota como una página popular.

¿Qué hace la opción capture: true en un listener de clics?

Hace que el controlador de seguimiento se ejecute en el descenso por el DOM, antes de cualquier controlador de clic asociado al propio elemento. Un componente que llama a event.stopPropagation() en su propio controlador igual queda registrado, porque el rastreador ya se ejecutó antes de que ese controlador se disparara.