Registro de actividad con la API Web Beacon

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • ¡Registro!

  • Índice
    1. ¿Para qué sirve la API Beacon?
      1. Seguimiento de estadísticas y datos analíticos
      2. Depuración y registro
    2. ¿No podemos ya hacer esto?
    3. Empezando
      1. Usandonavigator.sendBeacon()
      2. Soporte del navegador
    4. Un ejemplo: registrar el tiempo en una página
    5. Consideraciones al realizar el seguimiento
      1. RGPD
      2. DNT: No rastrear
    6. En conclusión
      1. Otras lecturas

    La API Beacon es una forma ligera y eficiente de registrar información desde una página web a un servidor. Se utiliza para enviar pequeñas cantidades de datos a un servidor sin esperar respuesta. Piense en ello como una postal enviada a casa cuando está de vacaciones. Le pones una pequeña cantidad de datos, lo pones en el buzón y no esperas una respuesta. En este artículo, Drew McLellan le ayudará a descubrir cómo se puede utilizar y qué lo hace tan diferente de las técnicas tradicionales de Ajax.

     

    Beacon API es una API web basada en JavaScript para enviar pequeñas cantidades de datos desde el navegador al servidor web sin esperar una respuesta. En este artículo, veremos para qué puede ser útil, qué lo diferencia de técnicas familiares como XMLHTTPRequest('Ajax') y cómo puede comenzar a usarlo.

    Si ya sabe por qué desea utilizar Beacon, no dude en ir directamente a la sección Introducción .

    ¿Para qué sirve la API Beacon?

    La API Beacon se utiliza para enviar pequeñas cantidades de datos a un servidor sin esperar una respuesta . Esa última parte es fundamental y es la clave de por qué Beacon es tan útil: nuestro código ni siquiera llega a ver una respuesta, incluso si el servidor envía una. Las balizas son específicamente para enviar datos y luego olvidarse de ellos. No esperamos una respuesta y no recibimos una respuesta.

    Piense en ello como una postal enviada a casa cuando está de vacaciones. Le pones una pequeña cantidad de datos (un poco de “Ojalá estuvieras aquí” y “Ha hecho un tiempo maravilloso”), lo pones en el buzón y no esperas una respuesta. Nadie envía una postal de respuesta diciendo: "Sí, realmente desearía estar allí, ¡muchas gracias!".

    Para los sitios web y aplicaciones modernos, hay una serie de casos de uso que encajan perfectamente en este patrón de enviar y olvidar.

    Seguimiento de estadísticas y datos analíticos

    El primer caso de uso que le viene a la mente a la mayoría de la gente es el análisis. Grandes soluciones como Google Analytics podrían brindar una buena visión general de cosas como las visitas a la página, pero ¿y si quisiéramos algo más personalizado? Podríamos escribir algo de JavaScript para rastrear lo que sucede en una página (tal vez cómo interactúa un usuario con un componente, hasta dónde se ha desplazado o qué artículos se han mostrado antes de seguir una CTA), pero luego necesitamos enviar esos datos. al servidor cuando el usuario abandona la página. Beacon es perfecto para esto, ya que solo registramos los datos y no necesitamos una respuesta.

    No hay razón para que no podamos cubrir también el tipo de tareas mundanas que a menudo maneja Google Analytics, informando sobre el propio usuario y la capacidad de su dispositivo y navegador. Si el usuario ha iniciado sesión, incluso podría vincular esas estadísticas a una persona conocida. Independientemente de los datos que recopile, puede enviarlos de vuelta al servidor con Beacon.

    Depuración y registro

    Otra aplicación útil para este comportamiento es registrar información de su código JavaScript. Imagine que tiene un componente interactivo complejo en su página que funciona perfectamente para todas sus pruebas, pero que ocasionalmente falla en producción. Sabe que está fallando, pero no puede ver el error para comenzar a depurarlo. Si puede detectar una falla en el código en sí, puede recopilar diagnósticos y usar Beacon para enviarlo todo de regreso para su registro.

    De hecho, cualquier tarea de registro se puede realizar de manera útil usando Beacon, ya sea crear puntos de guardado en un juego, recopilar información sobre el uso de funciones o registrar los resultados de una prueba multivariada. Si es algo que sucede en el navegador y desea que el servidor lo sepa, entonces Beacon probablemente sea un contendiente.

    ¿No podemos ya hacer esto?

    Sé lo que estás pensando. Nada de esto es nuevo, ¿verdad? Hemos podido comunicarnos desde el navegador al servidor XMLHTTPRequestdurante más de una década. Más recientemente, también tenemos la API Fetch, que hace prácticamente lo mismo con una interfaz más moderna basada en promesas. Teniendo esto en cuenta, ¿por qué necesitamos la API Beacon?

     

    La clave aquí es que, como no recibimos una respuesta, el navegador puede poner en cola la solicitud y enviarla sin bloquear la ejecución de ningún otro código. En lo que respecta al navegador, no importa si nuestro código todavía se está ejecutando o no, o dónde se encuentra la ejecución del script, como no hay nada que devolver, puede simplemente enviar la solicitud HTTP en segundo plano hasta que sea conveniente mándalo.

    Eso podría significar esperar hasta que la carga de la CPU sea menor, o hasta que la red esté libre, o incluso simplemente enviarla de inmediato si es posible. Lo importante es que el navegador ponga en cola la baliza y devuelva el control inmediatamente. No detiene las cosas mientras envía la baliza.

    Para comprender por qué esto es tan importante, debemos observar cómo y cuándo se emiten este tipo de solicitudes desde nuestro código. Tomemos nuestro ejemplo de un script de registro de análisis. Nuestro código puede cronometrar el tiempo que los usuarios pasan en una página, por lo que resulta fundamental que los datos se envíen de vuelta al servidor en el último momento posible. Cuando el usuario sale de una página, queremos detener el cronometraje y enviar los datos a casa.

    Normalmente, usarías el evento unloado beforeunloadpara ejecutar el registro. Estos se activan cuando el usuario hace algo como seguir un enlace en la página para navegar. El problema aquí es que el código que se ejecuta en uno de los unloadeventos puede bloquear la ejecución y retrasar la descarga de la página. Si la descarga de la página se retrasa, la carga de la página siguiente también se retrasa, por lo que la experiencia se siente muy lenta. Korean Beauty

    Tenga en cuenta lo lentas que pueden ser las solicitudes HTTP. Si está pensando en el rendimiento, normalmente uno de los principales factores que intenta reducir son las solicitudes HTTP adicionales porque salir a la red y obtener una respuesta puede ser muy lento. Lo último que quieres hacer es poner esa lentitud entre la activación de un enlace y el inicio de la solicitud de la página siguiente.

    Beacon soluciona esto poniendo en cola la solicitud sin bloquearla, devolviendo el control inmediatamente a su script. Luego, el navegador se encarga de enviar esa solicitud en segundo plano sin bloquearla. Esto hace que todo sea mucho más rápido, lo que hace que los usuarios estén más felices y nos permite a todos conservar nuestros trabajos.

    Empezando

    Ahora que entendemos qué es Beacon y por qué podríamos usarlo, así que comencemos con algo de código. Los conceptos básicos no podrían ser más sencillos:

    let result = navigator.sendBeacon(url, data);

    El resultado es booleano, truesi el navegador aceptó y puso en cola la solicitud, y falsesi hubo un problema al hacerlo.

    Usandonavigator.sendBeacon()

    navigator.sendBeacontoma dos parámetros. La primera es la URL a la que realizar la solicitud. La solicitud se realiza como HTTP POST, enviando cualquier dato proporcionado en el segundo parámetro.

     

    El parámetro de datos puede estar en uno de varios formatos, todos si se toman directamente de la API Fetch. Puede ser un Blob, un BufferSourceo FormDatabásicamente URLSearchParamscualquiera de los tipos de cuerpo utilizados al realizar una solicitud con Fetch.

    Me gusta usarlo FormDatapara datos clave-valor básicos, ya que es sencillo y fácil de leer.

    // URL to send the data tolet url = '/api/my-endpoint';// Create a new FormData and add a key/value pairlet data = new FormData();data.append('hello', 'world');let result = navigator.sendBeacon(url, data);if (result) { console.log('Successfully queued!');} else { console.log('Failure.');}

    Soporte del navegador

    La compatibilidad con Beacon en los navegadores es muy buena, con las únicas excepciones notables de Internet Explorer (funciona en Edge) y Opera Mini. Para la mayoría de los usos, eso debería estar bien, pero vale la pena probar el soporte antes de intentar usar navigator.sendBeacon.

    Eso es fácil de hacer:

    if (navigator.sendBeacon) { // Beacon code} else { // No Beacon. Maybe fall back to XHR?}

    Si Beacon no está disponible y su solicitud es importante, puede recurrir a un método de bloqueo como XHR. Dependiendo de su audiencia y propósito, también puede optar por no molestarse.

    Un ejemplo: registrar el tiempo en una página

    Para ver esto en la práctica, creemos un sistema básico para cronometrar cuánto tiempo permanece un usuario en una página. Cuando se carga la página, anotaremos la hora y cuando el usuario abandone la página, enviaremos la hora de inicio y la hora actual al servidor.

    Como solo nos importa el tiempo invertido (no la hora real del día), podemos usarlo performance.now()para obtener una marca de tiempo básica a medida que se carga la página:

    let startTime = performance.now();

    Si concluimos nuestro inicio de sesión en una función, podemos llamarla cuando se descargue la página.

    let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, e.g. let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data);};

    Finalmente, necesitamos llamar a esta función cuando el usuario abandona la página. Mi primer instinto fue utilizar el unloadevento, pero Safari en una Mac parece bloquear la solicitud con una advertencia de seguridad, por lo que beforeunloadfunciona bien para nosotros aquí.

    window.addEventListener('beforeunload', logVisit);

    Cuando la página se descarga (o, justo antes de que lo haga), logVisit()se llamará a nuestra función y, siempre que el navegador admita la API Beacon, se enviará nuestra baliza.

    (Tenga en cuenta que si no hay soporte de Beacon, regresamos truey pretendemos que todo funcionó muy bien. Regresar falsecancelaría el evento y detendría la descarga de la página. Eso sería desafortunado).

     

    Consideraciones al realizar el seguimiento

    Como muchos de los usos potenciales de Beacon giran en torno al seguimiento de la actividad, creo que sería negligente no mencionar las responsabilidades sociales y legales que tenemos como desarrolladores al registrar y rastrear la actividad que podría vincularse a los usuarios.

    RGPD

    Podemos pensar en las recientes leyes europeas GDPR en relación con el correo electrónico, pero, por supuesto, la legislación se relaciona con el almacenamiento de cualquier tipo de datos personales. Si sabe quiénes son sus usuarios y puede identificar sus sesiones, entonces debe verificar qué actividad está registrando y cómo se relaciona con sus políticas establecidas.

    A menudo no necesitamos rastrear tantos datos como nuestros instintos nos dicen que deberíamos hacer. Puede ser mejor no almacenar deliberadamente información que pueda identificar a un usuario, y entonces reducirá la probabilidad de equivocarse.

    DNT: No rastrear

    Además de los requisitos legales, la mayoría de los navegadores tienen una configuración que permite al usuario expresar su deseo de no ser rastreado. Do Not Track envía un encabezado HTTP con la solicitud similar a esta:

    DNT: 1

    Si está registrando datos que pueden rastrear a un usuario específico y el usuario envía un DNTencabezado positivo, entonces sería mejor seguir los deseos del usuario y anonimizar esos datos o no rastrearlos en absoluto.

    En PHP, por ejemplo, puedes probar muy fácilmente este encabezado de la siguiente manera:

    if (!empty($_SERVER['HTTP_DNT'])) { // User does not wish to be tracked ... }

    En conclusión

    La API Beacon es una forma realmente útil de enviar datos desde una página al servidor, particularmente en un contexto de registro. La compatibilidad del navegador es muy amplia y le permite registrar datos sin problemas sin afectar negativamente la experiencia de navegación del usuario y el rendimiento de su sitio. La naturaleza sin bloqueo de las solicitudes significa que el rendimiento es mucho más rápido que alternativas como XHR y Fetch.

    Si desea leer más sobre la API Beacon, vale la pena visitar los siguientes sitios.

    • “ Especificación de baliza del W3C ”, Recomendación candidata del W3C
    • “ Documentación de MDN Beacon ”, documentos web de MDN, Mozilla
    • “ Información de soporte del navegador ”, caniuse.com

    Otras lecturas

    • 55 conjuntos de iconos gratuitos de alta calidad
    • La guía definitiva para la clonación en Photoshop
    • Dibujar a mano: cosas que no sabías que podían lograr con tus garabatos
    • Pasar de Adobe Fireworks a Sketch: diez consejos y trucos

    (ra, il, mrn)Explora más en

    • javascript
    • API
    • Técnicas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Registro de actividad con la API Web Beacon

    Registro de actividad con la API Web Beacon

    Implemente rápidamente. Implementar inteligentemente ¡Registro! Índice ¿Para qué sirve la API Beacon?

    programar

    es

    https://aprendeprogramando.es/static/images/programar-registro-de-actividad-con-la-api-web-beacon-941-0.jpg

    2024-05-20

     

    Registro de actividad con la API Web Beacon
    Registro de actividad con la API Web Beacon

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20