Name: Flowsery
Author: Flowsery

El seguimiento de eventos personalizados abre posibilidades poderosas más allá de las vistas de página básicas. Esta guía cubre dos casos de uso prácticos: medir cuánto tiempo pasan realmente los visitantes leyendo tus artículos de blog, y rastrear de forma fiable los registros de usuarios desde el lado del servidor.

Medición del tiempo de lectura de artículos del blog

La analítica estándar de vistas de página te dice que alguien visitó un artículo, pero no si realmente lo leyó. Al combinar el seguimiento de desplazamiento con cálculos de tiempo en página, puedes determinar la lectura genuina.

Definición de "completamente leído"

Un artículo cuenta como completamente leído cuando se cumplen dos condiciones: el visitante ha pasado suficiente tiempo en la página como para haber leído plausiblemente el contenido, y se ha desplazado hasta el final. El tiempo mínimo de lectura se deriva del conteo de palabras del artículo, usando una velocidad de lectura promedio de aproximadamente 200-220 palabras por minuto.

Pasos de implementación

1. Añade el script de seguimiento de eventos

Incluye el fragmento de seguimiento de eventos de tu plataforma de analítica en el <head> de tus páginas. Si usas un generador de sitios estáticos como Hugo, esto va en tu plantilla base.

2. Adjunta metadatos del artículo

En cada página de artículo, incluye un pequeño elemento script que lleve el título del artículo y el conteo de palabras como atributos de datos:

<script type="text/javascript" src="/js/article.js"
    id="article"
    data-title="Título de tu artículo"
    data-words="1200"></script>

3. Escribe la lógica de seguimiento

El script necesita hacer tres cosas:

Primero, calcular la posición de desplazamiento para detectar cuándo el lector llega al final del artículo:

function getScrollPercent() {
    const h = document.documentElement,
          b = document.body,
          st = 'scrollTop',
          sh = 'scrollHeight';
    return Math.floor((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
}

Después, al cargar la página, lee el conteo de palabras y el título de los atributos de datos y calcula el tiempo mínimo de lectura:

window.addEventListener("DOMContentLoaded", () => {
    const script = document.getElementById("article");

    if(script &&
        script.hasAttribute("data-words") &&
        script.hasAttribute("data-title")) {
        const title = script.getAttribute("data-title");
        const minReadingTimeSeconds = Math.floor(
            parseInt(script.getAttribute("data-words")) / 220
        ) * 60;
        const start = new Date().getTime();
        let done = false;

Finalmente, escucha los eventos de desplazamiento. Cuando el visitante se desplaza más allá del 85% de la página y ha pasado al menos el tiempo mínimo de lectura, dispara un evento personalizado:

        window.addEventListener("scroll", () => {
            if(!done && getScrollPercent() > 85) {
                let readSeconds = Math.floor(
                    (new Date().getTime() - start) / 1000
                );
                if(readSeconds >= minReadingTimeSeconds) {
                    done = true;
                    // Enviar evento personalizado con duración y título del artículo
                    trackEvent("Read article", {
                        duration: readSeconds,
                        meta: { title }
                    });
                }
            }
        });
    }
});

4. Revisa los datos

Una vez que los eventos comienzan a fluir, aparecen en tu panel de analítica. Abre la vista detallada de eventos para ver qué artículos están siendo leídos y el tiempo promedio que los visitantes pasan en cada uno.

Seguimiento de registros de usuarios desde el backend

Los objetivos de conversión del front-end que se disparan cuando alguien visita una página de confirmación no son fiables ya que cualquiera puede navegar directamente a esa URL. Un enfoque más preciso es enviar un evento personalizado desde tu servidor solo después de que un registro sea efectivamente confirmado.

Flowsery

—

Analítica orientada a ingresos para tu sitio web

Panel en tiempo real

Seguimiento de objetivos

Rastreo sin cookies

Aquí tienes un ejemplo en Go:

func SignUp(w http.ResponseWriter, r *http.Request) {
    // Validar captcha, crear cuenta de usuario, etc.
    if err != nil {
        // Manejar error
    } else {
        go func() {
            if err := analyticsClient.Event("Registration", 0, nil, r); err != nil {
                // Registrar error
            }
        }()
    }
    // Renderizar la página de respuesta
}

Al disparar el evento solo tras una confirmación exitosa de cuenta, obtienes un conteo confiable de registros reales en lugar de números inflados por visitas incidentales a la página.

Conclusión clave

Los eventos personalizados te permiten medir prácticamente cualquier cosa que importe para tu negocio. Solo ten cuidado de no adjuntar información de identificación personal a los eventos, ya que eso socavaría los beneficios de privacidad de la analítica sin cookies.