Compartir tecnología

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

direccion original

¿Qué es un punto de entierro?

El nombre científico es Event Tracking y se centra principalmente en capturar, procesar y enviar tecnologías relacionadas y procesos de implementación para el comportamiento del usuario o procesos comerciales.
Enterrar un punto es un término profesional en el campo de los datos y también es un nombre común en el campo de Internet.

Los puntos enterrados son la base para el análisis de datos de productos y generalmente se utilizan para obtener información de los sistemas de recomendación, seguimiento y análisis del comportamiento del usuario, análisis estadístico de nuevas funciones o efectos de la actividad operativa, etc.

Los puntos de incrustación incluyen dos conceptos importantes: evento (evento) y atributo (parámetro)

• Evento: lo que sucede en la aplicación, como acciones del usuario, eventos del sistema o errores del sistema. Por ejemplo, si fotografía un producto, contiene los siguientes eventos: enter_page (ingrese a la página), left_page (abandone la página).
• Parámetro: atributo definido para describir un segmento de usuarios, como la preferencia de idioma o la ubicación geográfica. Tome el evento "Ingresar al ejercicio después de clase" como ejemplo. Contiene los siguientes atributos de evento: enter_from (de qué página), class_id (id del curso), etc.
• Valor del atributo (valor): la dimensión del atributo, es decir, la dimensión específica cuando se activa el comportamiento. Por ejemplo: enter_from: home (página de inicio), system (sistema), etc.

plan general

El enterramiento sin rastro (enterramiento completo) utiliza el método de monitoreo integrado del navegador o la aplicación para monitorear la página de navegación del usuario, los clics y otros comportamientos. Generalmente se usa para análisis de datos de grano grueso, como el slardar de la empresa.
defecto:

• Los datos son ruidosos y se recopilan independientemente de si son útiles o no.
• No se pueden personalizar puntos enterrados, no se pueden recopilar eventos ni atributos comerciales específicos
• Menos información disponible para DA
  ventaja:
• Acceso simple, casi sin intrusión, no se requieren costos de desarrollo adicionales
• La recopilación del comportamiento operativo del usuario es muy completa y casi no se hacen omisiones.

Puntos enterrados de código, los desarrolladores front-end personalizan el monitoreo y la recopilación en el código
defecto:

• La carga de trabajo es pesada, el código es intrusivo y el mantenimiento posterior es inconveniente.
  ventaja:
• Puede enterrar puntos con precisión y tener una identificación clara de eventos
• Los atributos del vendedor son muy ricos.
• El método de activación del punto enterrado se puede definir de forma flexible
• DA es más conveniente y preciso de usar

SDK de puntos enterrados, el SDK expone la interfaz para informar puntos enterrados y los desarrolladores desconocen el proceso de monitoreo y recopilación, como el té de la empresa.
Desventajas: NA
ventaja:

• El desarrollo empresarial solo necesita prestar atención a la identificación de eventos, atributos comerciales, etc.
• Teniendo en cuenta las ventajas de los puntos de entierro sin rastro y los puntos de entierro de código

Atributos ocultos comunes

Por lo general, el front-end cuenta los puntos enterrados según las dimensiones de la página. Los atributos de eventos comunes son los siguientes:

Eventos enterrados comunes

Solución de recopilación de datos de rendimiento

Actualmente, la mayoría de los datos del indicador de rendimiento provienen de la API window.Performance.

Indicadores de desempeño comunes

FP

El indicador FP (Primera pintura) generalmente refleja el tiempo de pantalla en blanco de la página. Cuanto más corto sea el tiempo de espera del usuario por el contenido, mayor será el rendimiento de carga de la red de la página web. es muy bueno, la pantalla blanca Cuanto más corto sea el tiempo, menor será la probabilidad de abandono de usuarios.

Este indicador puede obtener la información de puntos proporcionada por la API PerformancePaintTming a través del método preformance.getEntriesByType('paint'). Busque el objeto con el nombre first-paint y la descripción son los datos del indicador FP:

FCP

FCP (First Contentful Paint) es el momento en que el contenido se presenta por primera vez. En los indicadores estadísticos de rendimiento, el tiempo desde el momento en que el usuario comienza a acceder a la página web hasta FCP puede considerarse como el tiempo sin contenido. , FCP >= FP

Los indicadores pueden obtener la información de puntos proporcionada por la API PerformancePaintTiming a través del método performance.getEntriesByType('paint'). Busque el objeto con el nombre first-contentful-paint, que describe los datos del indicador FCP, como se muestra en la siguiente figura:

FMP

FMP (Primera pintura significativa) es el momento en que se dibuja el contenido significativo por primera vez. Cuando el diseño y el contenido del texto de toda la página se representan por completo, se puede considerar que se completa la primera pintura significativa del contenido significativo.Por tanto, FMP mide el tiempo que tardan los usuarios en ver el contenido principal de una página web y es un indicador de medición importante desde la perspectiva de la experiencia del usuario.

Un método para calcular FMP que ahora es reconocido por la industria front-end es "el tiempo de dibujo después del cambio máximo de diseño de la página durante la carga y renderizado". Puede usar MutationObserver para monitorear cada cambio DOM general de la página, activar la devolución de llamada de MutationObserver y calcular la puntuación de cambio del árbol DOM actual durante la devolución de llamada. El momento en que la puntuación cambia más es el punto de tiempo de FMP.

TTI

TTI (Time To Interactive), que es el tiempo que transcurre desde el inicio de la carga de la página hasta que la página está en un estado completamente interactivo. Cuando la página está en un estado completamente interactivo, se cumplen las tres condiciones siguientes:

La página ya muestra contenido útil.
Se ha registrado la función de respuesta a eventos asociada a los elementos visibles de la página.
La función de respuesta al evento puede comenzar a ejecutarse dentro de los 50 ms posteriores a que ocurra el evento.

Indicador de carga de recursos

window.performance.getEntriesByType('resource') devolverá varios indicadores de rendimiento de todos los recursos (js, css, img...) cargados en la página actual, que se pueden utilizar para la recopilación de datos de rendimiento de recursos estáticos.

Los tipos principales son: script, link, img, css, xmlhttprequest, beacon, fetch, otros.
PerformanceResourceTiming: API web | MDN

Otros métodos de cálculo de indicadores.

Solución de recopilación de datos de errores

Hay tres tipos

• Errores de carga de recursos, capture errores de falla de carga de recursos en la fase de captura a través de addEventListener ('error', devolución de llamada, verdadero).
• Errores de ejecución de js, capture errores de js a través de window.onerror.
  • Los scripts entre dominios mostrarán un mensaje de "Error de script" y no se podrá obtener información de error específica ni información de pila. En este momento, debe agregar el atributo crossorigin="anonymous" a la etiqueta del script y el servidor de recursos debe agregar configuraciones relacionadas con CORS, como Access-Control-Allow-Origin: *
• Error de promesa, capture el error de promesa a través de addEventListener ('unhandledrejection', devolución de llamada), pero no hay información como la cantidad de filas y columnas donde ocurrió el error, por lo que solo puede arrojar manualmente la información de error relevante.

// 在捕获阶段，捕获资源加载失败错误
Element.addEventListener('error', e => {
const target = e.target
    if (target != window) {
        monitor.errors.push({
            type: target.localName,
            url: target.src || target.href,
            msg: (target.src || target.href) + ' is load error',
            time: Date.now()
        })
    }
})

// 监听 js 错误
window.onerror = function(msg, url, row, col, error) {
    monitor.errors.push({
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack? error.stack : msg,
        url: url,
        time: Date.now()
    })
}
// 监听 promise 错误 缺点是获取不到行数数据
addEventListener('unhandledrejection', e => {
    monitor.errors.push({
        type: 'promise',
        msg: (e.reason && e.reason.msg) || e.reason || '',
        time: Date.now()
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Plan de informes de datos

En este escenario, hay dos cuestiones a considerar:

Si la interfaz de informes de datos y el sistema empresarial utilizan el mismo nombre de dominio, el navegador tiene límites en la cantidad de solicitudes simultáneas, por lo que existe la posibilidad de competencia por los recursos de la red.
Los navegadores generalmente ignoran las solicitudes ajax asíncronas cuando se descarga la página. Si es necesaria una solicitud de datos, generalmente se crea una solicitud ajax sincrónica en el evento de descarga o antes de la descarga para retrasar la descarga de la página. Desde la perspectiva del usuario, los saltos de página se ralentizan.

Navegador.sendBeacon

ventaja:
Envía datos de manera confiable cuando se descarga la página, sin bloquear el cierre de la página.
Admite el envío de datos en segundo plano.

defecto:
Solo se pueden enviar solicitudes POST y no se pueden obtener los resultados de la respuesta.

Además de Internet Explorer, los principales navegadores modernos actuales tienen una tasa de compatibilidad muy alta con balizas. Baliza - Documentación de MDN

La interfaz Beacon se utiliza para programar solicitudes asincrónicas sin bloqueo al servidor web.

• Las solicitudes de baliza utilizan el método HTTP POST y no requieren una respuesta.
• Las solicitudes de baliza garantizan que la inicialización se complete antes de que la página active la descarga.

En términos sencillos, Beacon puede enviar datos de forma asincrónica al servidor y puede garantizar que la solicitud se envíe antes de que se complete la descarga de la página (resuelva el problema de que la descarga de la página ajax finalizará la solicitud). Cómo usarlo:

navigator.sendBeacon(url, data);
1

El parámetro de datos es opcional y su tipo puede ser ArrayBufferView, Blob, DOMString o FormData. Si el navegador agrega con éxito la solicitud de baliza a la cola que se enviará, este método devolverá verdadero; de lo contrario, devolverá falso

Cuando se usa Beacon, el backend debe usar el método de publicación para recibir parámetros. Teniendo en cuenta los problemas entre dominios, el backend también necesita modificar la interfaz y configurar CORS. Al mismo tiempo, el encabezado de la solicitud debe cumplir con el encabezado de solicitud de la lista segura de CORS, en el que el tipo de contenido debe ser aplicación/x-www-form-urlencoded, multipart/form-data o text/plain.

type ContentType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';

const serilizeParams = (params: object) => {
    return window.btoa(JSON.stringify(params))
}

function sendBeacon(url: string, params: object) {
  const formData = new FormData()
  formData.append('params', serilizeParams(params))
  navigator.sendBeacon(url, formData)
}

1
2
3
4
5
6
7
8
9
10
11
12

Imagen

ventaja:
Es fácil de usar, tiene buena compatibilidad y se puede informar entre dominios.
No bloqueará la carga y el cierre de la página.

defecto:
Solo se pueden enviar solicitudes GET y no se pueden obtener los resultados de la respuesta.
No se admiten operaciones asincrónicas.

El problema de compatibilidad de sendBeacon es inevitable, pero puede aprovechar al máximo la función de que la mayoría de los navegadores completarán la carga de la imagen antes de descargar la página e informarán los datos agregando img a la página.

function sendImage(url: string, params: object) {
  const img = new Image()

  img.style.display = 'none'

  const removeImage = function() {
    img.parentNode.removeChild(img)
  }

  img.onload = removeImage
  img.onerror = removeImage

  img.src = `${url}?params=${serilizeParams(params)}`

  document.body.appendChild(img)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Dado que la imagen img es una solicitud de obtención, diferentes servidores tienen restricciones en la longitud del uri. Cuando la longitud excede el límite, se producirá un error HTTP 414. Por lo tanto, también debe prestar atención a la frecuencia de informes para reducir demasiados atributos. subido al mismo tiempo.

Soluciones compatibles

Se prefiere el método sendBeacon y el método Image se utiliza como alternativa.

function sendLog(url: string, params: object) {
    if（navigator.sendBeacon) {
        sendBeacon(url, params)
    } else {
        sendImage(url, params)
    }
}
1
2
3
4
5
6
7
8

De hecho, ¿mucha gente usa GIF para enterrar el punto?
El envío de datos al servidor se puede realizar solicitando la interfaz, solicitando archivos ordinarios o solicitando recursos de imágenes. Siempre que se puedan informar los datos, ya sea solicitando un archivo GIF, solicitando un archivo js o llamando a una interfaz de página, al servidor realmente no le importa el método de informe específico. Entonces, ¿por qué todos los sistemas utilizan de manera uniforme el método de solicitar imágenes GIF para informar datos?
●Prevenir dominios cruzados
En términos generales, el nombre de dominio con puntos no es el nombre de dominio actual, por lo que todas las solicitudes de interfaz constituirán solicitudes entre dominios. Los navegadores pueden interceptar fácilmente las solicitudes entre dominios debido a una configuración incorrecta y errores de informe, lo cual es inaceptable. Sin embargo, el atributo src de la imagen no cruza dominios y también se pueden iniciar solicitudes. (Excluir informes de interfaz)
●Evitar el bloqueo de la carga de la página y afectar la experiencia del usuario.
Por lo general, después de crear un nodo de recursos, el navegador no enviará una solicitud de recurso hasta que el objeto se inyecte en el árbol DOM del navegador. Operar repetidamente el DOM no solo causará problemas de rendimiento, sino que cargar recursos js/css también bloqueará la representación de la página y afectará la experiencia del usuario.
La excepción son las solicitudes de imágenes. No solo no es necesario insertarlo en el DOM al construir una imagen, sino que puede iniciar una solicitud siempre que el nuevo objeto Imagen se cree en js y no haya ningún problema de bloqueo. En un entorno de navegador sin js, puede hacerlo. También se puede gestionar normalmente a través de la etiqueta img, que es otro tipo de solicitud de recursos que no se puede hacer. (Excluir método de archivo)
●En comparación con PNG/JPG, GIF tiene el tamaño más pequeño.
El archivo BMP más pequeño requiere 74 bytes, PNG requiere 67 bytes y un GIF legal solo requiere 43 bytes.
Para la misma respuesta, GIF puede ahorrar un 41% de tráfico que BMP y un 35% de tráfico que PNG.
Y la mayoría de ellos utilizan GIF transparente de 1*1 píxel para informar.
1x1 píxel es la imagen legal más pequeña. Además, debido a que se realiza a través de imágenes, es mejor hacer que las imágenes sean transparentes, de modo que no afecte el efecto de visualización de la página en sí. Para indicar que la imagen es transparente, solo necesita usar un bit binario para marcar. La imagen es de color transparente y no es necesario almacenar datos del espacio de color, lo que puede ahorrar volumen.

API de búsqueda y XMLHttpRequest

ventaja:

Se pueden enviar solicitudes asincrónicas y se admiten múltiples métodos HTTP como GET y POST.
Los resultados de la respuesta se pueden obtener y procesar posteriormente.
defecto:

La lógica de solicitud y respuesta debe manejarse manualmente.
Necesidad de manejar problemas de solicitudes entre dominios (como la configuración de CORS).

Utilice XMLHttpRequest o Fetch API para enviar solicitudes asincrónicas para informar datos. Puede optar por utilizar el método GET o POST y enviar los datos como cuerpo de solicitud o parámetros de URL.

WebSocket

ventaja:

Buen rendimiento en tiempo real y admite comunicación bidireccional.
Adecuado para monitoreo en tiempo real y generación de informes de datos a gran escala.
defecto:

El servidor debe ser compatible con el protocolo WebSocket.
Más complejo y no adecuado para requisitos simples de puntos enterrados.

Plataforma de informes

Las herramientas comunes de enterramiento de datos de front-end incluyen Google Analytics, Baidu Statistics, Umeng Statistics, etc. Por supuesto, también puede utilizar la interfaz o plataforma interna de la empresa para generar informes.

Tomemos como ejemplo Google Analytics:
Google Analytics es una herramienta de análisis de sitios web desarrollada por Google para rastrear e informar el tráfico del sitio web. Ayuda a los propietarios de sitios web a comprender el comportamiento de sus visitantes, incluido quiénes son, de dónde vienen, qué hacen en el sitio y más. A través de Google Analytics, los propietarios de sitios web pueden comprender mejor a su audiencia, optimizar el contenido del sitio web y las estrategias de marketing, mejorando así el rendimiento del sitio web y la experiencia del usuario. Google Analytics proporciona una gran cantidad de funciones de análisis de datos, incluidos datos en tiempo real, análisis del comportamiento del usuario, seguimiento de conversiones, análisis de fuentes de tráfico y más. Es una herramienta poderosa que se utiliza ampliamente en varios sitios web y campañas de marketing online.

Cómo utilizar Google Analytics

Como utilizamos Google Analytics, primero debemos tener una cuenta de Google, que deberá crear usted mismo. En segundo lugar, necesita conocer la entrada a Google Analytics. Aquí están las dos direcciones utilizadas:

Administrador de etiquetas de Google: tagmanager.google.com/

Análisis: analytics.google.com/

Administrador de etiquetas de Google
Google Tag Manager (GTM) es un sistema de gestión de etiquetas desarrollado y proporcionado por Google. Permite a los administradores de sitios web administrar e implementar varios códigos de seguimiento, códigos de análisis y etiquetas de marketing sin modificar el código del sitio web. Con GTM, los usuarios pueden agregar, actualizar y eliminar etiquetas fácilmente sin depender de los desarrolladores.

Las características principales de GTM incluyen:
En términos sencillos: esta plataforma se utiliza para recopilar eventos ocultos activados por el front-end y puede realizar informes de datos personalizando las condiciones de activación y activando devoluciones de llamadas de eventos. Se utiliza aquí para recopilar datos e informarlos a Google Analytics.

Google analitico
Como sugiere el nombre, es un sitio web que se utiliza para recopilar, ver y mostrar datos.