Compartilhamento de tecnologia

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

Endereço original

O que é um cemitério?

O nome científico é Event Tracking, que tem como foco principal a captura, processamento e envio de tecnologias relacionadas e processos de implementação do comportamento do usuário ou processos de negócios.
Enterrar um ponto é um termo profissional na área de dados e também um nome comum na área da Internet.

Os pontos enterrados são a base para a análise de dados do produto e geralmente são usados ​​para feedback de sistemas de recomendação, monitoramento e análise do comportamento do usuário, análise estatística de novas funções ou efeitos de atividades operacionais, etc.

Os pontos de incorporação incluem dois conceitos importantes: evento (evento) e atributo (parâmetro)

• Evento: o que acontece no aplicativo, como ações do usuário, eventos do sistema ou erros do sistema. Por exemplo, se você fotografar um produto, ele contém os seguintes eventos: enter_page (entra na página), leave_page (sai da página).
• Param: Um atributo definido para descrever um segmento de usuário, como preferência de idioma ou localização geográfica. Tomemos como exemplo o evento "Inserir exercício pós-aula". Ele contém os seguintes atributos de evento: enter_from (de qual página), class_id (id do curso), etc.
• Valor do atributo (valor): A dimensão do atributo, ou seja, a dimensão específica quando o comportamento é acionado. Por exemplo: enter_from: home (página inicial), sistema (sistema), etc.

Plano principal

O enterramento sem rastros (enterrado completo) usa o método de monitoramento integrado do navegador ou APP para monitorar a página de navegação do usuário, cliques e outros comportamentos. Geralmente é usado para análise de dados de granulação grossa, como o slardar da empresa.
deficiência:

• Os dados são barulhentos e são coletados independentemente de serem úteis ou não.
• Não é possível personalizar pontos ocultos, não é possível coletar eventos e atributos de negócios especificados
• Menos informações disponíveis para DA
  vantagem:
• Acesso simples, quase nenhuma intrusão, sem necessidade de custos adicionais de desenvolvimento
• A coleção do comportamento de operação do usuário é muito completa e quase nenhuma omissão é feita

Pontos de enterramento de código, desenvolvedores front-end personalizam monitoramento e coleta no código
deficiência:

• A carga de trabalho é pesada, o código é intrusivo e a manutenção posterior é inconveniente.
  vantagem:
• Pode enterrar pontos com precisão e ter identificação clara do evento
• Os atributos do vendedor são muito ricos
• O método de disparo de ponto enterrado pode ser definido de forma flexível
• DA é mais conveniente e preciso de usar

SDK de ponto enterrado, o SDK expõe a interface para relatar pontos enterrados, e os desenvolvedores não têm conhecimento do processo de monitoramento e coleta, como o chá da empresa
Desvantagens: NA
vantagem:

• O desenvolvimento de negócios só precisa prestar atenção à identificação de eventos, atributos de negócios, etc.
• Levando em consideração as vantagens dos pontos de enterramento sem rastros e dos pontos de enterramento de código

Atributos ocultos comuns

Normalmente, o front-end conta os pontos ocultos de acordo com as dimensões da página. Os atributos comuns do evento são os seguintes:

Eventos enterrados comuns

Solução de coleta de dados de desempenho

Atualmente, a maioria dos dados dos indicadores de desempenho vem da API window.performance.

Indicadores de desempenho comuns

FP

O indicador FP (FIrst Paint) geralmente reflete o tempo de tela branca da página. Quanto menor o tempo que o usuário espera pelo conteúdo, menor será o desempenho de carregamento da página da Web. é muito bom, a tela branca Quanto menor o tempo, menor a probabilidade de desligamento do usuário.

Este indicador pode obter as informações de ponto fornecidas pela API PerformancePaintTming por meio do método preformance.getEntriesByType('paint') Encontre o objeto com o nome first-paint e a descrição são os dados do indicador FP:

PCF

FCP (First Contentful Paint) é o momento em que o conteúdo é renderizado pela primeira vez. Nos indicadores estatísticos de desempenho, o tempo desde o momento em que o usuário começa a acessar a página da web até o FCP pode ser considerado como o tempo sem conteúdo. , FCP >= FP

Os indicadores podem obter as informações de ponto fornecidas pela API PerformancePaintTiming por meio do método performance.getEntriesByType('paint') Encontre o objeto com o nome first-contentful-paint, que descreve os dados do indicador FCP, conforme mostrado na figura a seguir:

FMP

FMP (First Meaningful Paint) é o momento em que o conteúdo significativo é desenhado pela primeira vez. Quando o layout e o conteúdo do texto de toda a página são completamente renderizados, pode-se considerar que a primeira pintura significativa do conteúdo significativo é concluída.Portanto, o FMP mede o tempo que os usuários levam para ver o conteúdo principal de uma página web e é um importante indicador de medição do ponto de vista da experiência do usuário.

Um método de cálculo do FMP que agora é reconhecido pela indústria de front-end é “o tempo de desenho após a alteração máxima do layout da página durante o carregamento e a renderização”. Você pode usar o MutationObserver para monitorar cada alteração geral do DOM da página, acionar o retorno de chamada do MutationObserver e calcular a pontuação da alteração da árvore DOM atual durante o retorno de chamada. O momento em que a pontuação muda mais é o ponto no tempo do FMP.

TTI

TTI (Time To Interactive), que é o tempo que leva desde o início do carregamento da página até que a página esteja em um estado totalmente interativo. Quando a página está em um estado totalmente interativo, as três condições a seguir são atendidas:

A página já exibe conteúdo útil.
A função de resposta a eventos associada aos elementos visíveis da página foi registrada.
A função de resposta a eventos pode começar a ser executada dentro de 50 ms após a ocorrência do evento.

Indicador de carregamento de recursos

window.performance.getEntriesByType('resource') retornará vários indicadores de desempenho de todos os recursos (js, css, img...) carregados na página atual, que podem ser usados ​​para coleta de dados estáticos de desempenho de recursos.

Os principais tipos são: script, link, img, css, xmlhttprequest, beacon, fetch, outros.
PerformanceResourceTiming - APIs da Web | MDN

Outros métodos de cálculo de indicadores

Solução de coleta de dados de erro

Existem três tipos

• Erros de carregamento de recursos, captura erros de falha de carregamento de recursos na fase de captura por meio de addEventListener('error', callback, true).
• erros de execução de js, capture erros de js por meio de window.onerror.
  • Os scripts entre domínios exibirão um aviso de "Erro de script" e nenhuma informação de erro específica e informações de pilha poderão ser obtidas. Neste momento, você precisa adicionar o atributo crossorigin="anonymous" à tag de script, e o servidor de recursos precisa adicionar configurações relacionadas ao CORS, como Access-Control-Allow-Origin: *
• Erro de promessa, capture o erro de promessa por meio de addEventListener('unhandledrejection', callback), mas não há informações como o número de linhas e colunas onde o erro ocorreu, então você só pode lançar manualmente as informações de erro relevantes.

// 在捕获阶段，捕获资源加载失败错误
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

Plano de relatório de dados

Neste cenário, há duas questões a considerar:

Se a interface de relatório de dados e o sistema de negócios usarem o mesmo nome de domínio, o navegador terá limites no número de solicitações simultâneas, portanto existe a possibilidade de competição pelos recursos da rede.
Os navegadores geralmente ignoram solicitações assíncronas de ajax quando a página é descarregada. Se uma solicitação de dados for necessária, uma solicitação síncrona de ajax geralmente é criada no evento unload ou beforeunload para atrasar o descarregamento da página. Da perspectiva do usuário, os saltos de página ficam mais lentos.

Navegador.sendBeacon

vantagem:
Envia dados de forma confiável quando a página é descarregada, sem bloquear o fechamento da página.
Suporte para envio de dados em segundo plano.

deficiência:
Somente solicitações POST podem ser enviadas e os resultados das respostas não podem ser obtidos.

Além do Internet Explorer, os atuais navegadores modernos têm uma taxa de suporte muito alta para beacons. Farol - Documentação MDN

A interface Beacon é usada para agendar solicitações assíncronas sem bloqueio para o servidor Web.

• As solicitações de beacon usam o método HTTP POST e não requerem resposta.
• As solicitações de beacon garantem que a inicialização seja concluída antes que a página acione o descarregamento.

Em termos leigos, o Beacon pode enviar dados de forma assíncrona para o servidor e pode garantir que a solicitação seja enviada antes que o descarregamento da página seja concluído (resolva o problema de que o descarregamento da página ajax encerrará a solicitação). Como usá-lo:

navigator.sendBeacon(url, data);
1

O parâmetro data é opcional e seu tipo pode ser ArrayBufferView, Blob, DOMString ou FormData. Se o navegador adicionar com sucesso a solicitação de beacon à fila a ser enviada, este método retornará verdadeiro, caso contrário retornará falso

Ao usar o Beacon, o backend precisa usar o método post para receber parâmetros. Considerando problemas de domínio cruzado, o backend também precisa modificar a interface e configurar o CORS. Ao mesmo tempo, o cabeçalho da solicitação deve atender ao cabeçalho da solicitação na lista segura do CORS, no qual o tipo de conteúdo deve ser application/x-www-form-urlencoded, multipart/form-data ou 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

Imagem

vantagem:
É simples de usar, tem boa compatibilidade e pode ser relatado em vários domínios.
Não bloqueará o carregamento e o fechamento da página.

deficiência:
Somente solicitações GET podem ser enviadas e os resultados das respostas não podem ser obtidos.
Operações assíncronas não são suportadas.

O problema de compatibilidade do sendBeacon é inevitável, mas você pode aproveitar ao máximo o recurso de que a maioria dos navegadores conclui o carregamento da imagem antes que a página seja descarregada e relata os dados adicionando img à 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

Como a imagem img é uma solicitação get, diferentes servidores têm restrições quanto ao comprimento do uri. Quando o comprimento exceder o limite, ocorrerá um erro HTTP 414. Portanto, você também deve prestar atenção à frequência de relatório para reduzir muitos atributos. carregado de uma só vez.

Soluções compatíveis

O método sendBeacon é preferido e o método Image é usado como substituto.

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

Na verdade, muitas pessoas usam GIF para enterrar o ponto?
O reporte de dados ao servidor pode ser feito através da solicitação da interface, solicitação de arquivos comuns ou solicitação de recursos de imagem. Contanto que os dados possam ser relatados, seja solicitando um arquivo GIF, solicitando um arquivo js ou chamando uma interface de página, o servidor não se importa realmente com o método de relatório específico. Então, por que todos os sistemas usam uniformemente o método de solicitação de imagens GIF para relatar dados?
●Evitar vários domínios
De modo geral, o nome de domínio pontilhado não é o nome de domínio atual, portanto, todas as solicitações de interface constituirão solicitações entre domínios. Solicitações entre domínios podem ser facilmente interceptadas pelos navegadores devido a configurações inadequadas e erros de relatório, o que é inaceitável. No entanto, o atributo src da imagem não atravessa domínios e as solicitações também podem ser iniciadas. (Excluir relatórios de interface)
●Evitar o bloqueio do carregamento da página e afetar a experiência do usuário
Normalmente, depois de criar um nó de recurso, o navegador não enviará realmente uma solicitação de recurso até que o objeto seja injetado na árvore DOM do navegador. Operar repetidamente o DOM não só causará problemas de desempenho, mas carregar recursos js/css também bloqueará a renderização da página e afetará a experiência do usuário.
A exceção são as solicitações de imagens. Além de não precisar ser inserido no DOM ao construir uma imagem, ele pode iniciar uma solicitação, desde que o novo objeto Image seja criado em js e não haja problemas de bloqueio em um ambiente de navegador sem js. também será gerenciado normalmente através da tag img, que é outro tipo de solicitação de recurso que não pode ser feito. (Excluir método de arquivo)
●Em comparação com PNG/JPG, o GIF tem o menor tamanho
O menor arquivo BMP requer 74 bytes, PNG requer 67 bytes e um GIF legal requer apenas 43 bytes.
Para a mesma resposta, o GIF pode economizar 41% do tráfego que o BMP e 35% do tráfego que o PNG.
E a maioria deles usa GIF transparente de 1 * 1 pixel para relatar.
1x1 pixel é a menor imagem legal. Além disso, por ser feito por meio de imagens, o melhor é deixar as imagens transparentes, para que não afete o efeito de exibição da própria página. Para indicar que a imagem é transparente, basta utilizar um bit binário para marcar. a imagem como uma cor transparente e não há necessidade de armazenar dados do espaço de cores, o que pode economizar volume.

XMLHttpRequest e Fetch API

vantagem:

Solicitações assíncronas podem ser enviadas e vários métodos HTTP, como GET e POST, são suportados.
Os resultados da resposta podem ser obtidos e processados ​​posteriormente.
deficiência:

A lógica de solicitação e resposta precisa ser tratada manualmente.
Necessidade de lidar com problemas de solicitação entre domínios (como configuração de CORS).

Use XMLHttpRequest ou Fetch API para enviar solicitações assíncronas para relatar dados. Você pode optar por usar o método GET ou POST e enviar os dados como corpo da solicitação ou parâmetros de URL.

Soquete da Web

vantagem:

Bom desempenho em tempo real e suporta comunicação bidirecional.
Adequado para monitoramento em tempo real e relatórios de dados em grande escala.
deficiência:

O servidor precisa oferecer suporte ao protocolo WebSocket.
Mais complexo e não adequado para requisitos simples de pontos enterrados.

Plataforma de relatórios

Ferramentas comuns de enterramento de dados front-end incluem Google Analytics, Baidu Statistics, Umeng Statistics, etc. Claro, você também pode usar a interface interna ou plataforma da empresa para relatórios.

Veja o Google Analytics como exemplo:
O Google Analytics é uma ferramenta de análise de sites desenvolvida pelo Google para rastrear e relatar o tráfego do site. Ajuda os proprietários de sites a compreender o comportamento de seus visitantes, incluindo quem eles são, de onde vêm, o que fazem no site e muito mais. Através do Google Analytics, os proprietários de websites podem compreender melhor o seu público, otimizar o conteúdo do website e as estratégias de marketing, melhorando assim o desempenho do website e a experiência do utilizador. O Google Analytics oferece diversas funções de análise de dados, incluindo dados em tempo real, análise do comportamento do usuário, acompanhamento de conversões, análise de origem de tráfego e muito mais. É uma ferramenta poderosa e amplamente utilizada em diversos sites e campanhas de marketing online.

Como usar o Google Analytics

Como usamos o Google Analytics, primeiro precisamos ter uma conta do Google, que você mesmo precisa criar. Em segundo lugar, você precisa saber a entrada do Google Analytics. Aqui estão os dois endereços utilizados:

Gerenciador de tags do Google: tagmanager.google.com/

Análise：analytics.google.com/

Gerenciador de tags do Google
Google Tag Manager (GTM) é um sistema de gerenciamento de tags desenvolvido e fornecido pelo Google. Ele permite que administradores de sites gerenciem e implantem vários códigos de rastreamento, códigos analíticos e tags de marketing sem modificar o código do site. Com o GTM, os usuários podem facilmente adicionar, atualizar e excluir tags sem depender dos desenvolvedores.

Os principais recursos do GTM incluem:
Em inglês simples: esta plataforma é usada para coletar eventos ocultos acionados pelo front-end e pode realizar relatórios de dados personalizando condições de acionamento e retornos de chamada de eventos de acionamento. É usada aqui para coletar dados e relatá-los ao Google Analytics.

Análise do Google
Como o nome sugere, é um site usado para coletar, visualizar e exibir dados