Como o MousePlayer funciona

Um guia simples sobre a nossa arquitetura de rastreamento, o tratamento das resoluções de tela em diferentes dispositivos e os limites do sistema.

1. Por que não gravamos vídeo

Um equívoco comum é achar que as ferramentas de análise visual gravam arquivos de vídeo comuns (como MP4 ou WebM) da tela do visitante. Isso consumiria uma quantidade enorme de banda, deixaria o seu site drasticamente mais lento e produziria textos borrados e ilegíveis.

Em vez disso, o MousePlayer usa uma tecnologia leve conhecida como telemetria por capturas do DOM. Veja como ela funciona na prática:

A captura da planta

Quando um visitante abre a sua página, o nosso script tira uma “planta” em texto da estrutura de HTML e de estilos. Ela registra onde os elementos estão, sem copiar os arquivos de imagem ou de vídeo da página; durante a reprodução, o player carrega as imagens do endereço original. A exceção são os elementos canvas, cujo conteúdo é transmitido como imagem (veja abaixo).

Telemetria de coordenadas

Enquanto o usuário interage, registramos um fluxo de eventos: posições do mouse, profundidade de rolagem, alvos dos cliques e redimensionamentos do navegador, além das alterações na própria página e, conforme as configurações, mensagens do console, requisições com falha ou lentas e medições de tempo de carregamento (Web Vitals). Movimentos e cliques são pequenos; capturas e alterações de página podem ser bem maiores, dependendo da página, e são transmitidas compactadas.

A reprodução no modo cinema

Quando você assiste a uma sessão no seu painel, o nosso player recria a página a partir da planta gravada e move um cursor virtual sobre ela em tempo real, mantendo o texto perfeitamente nítido.

Feito para ser leve: o script carrega de forma assíncrona e transmite pequenos pontos de dados numéricos em vez de vídeo, o que mantém pequeno o seu próprio impacto. O que isso significa para as suas Core Web Vitals depende das suas páginas, da sua hospedagem e da rede do visitante; por isso, meça no seu próprio site em vez de confiar em um número nosso. Nenhuma velocidade de carregamento específica é garantida – veja a seção 20 dos Termos de Serviço.

2. Resoluções de tela & dispositivos móveis

Os usuários de hoje navegam em tudo, de smartphones compactos a monitores 4K ultrawide. Os sites deslocam, recolhem e reorganizam o layout automaticamente para se adaptar a diferentes larguras de tela — um conceito conhecido como design responsivo.

Como reproduzimos exatamente a área visível do visitante

Para que a reprodução não fique distorcida, o MousePlayer registra as dimensões exatas da área visível do visitante (por exemplo, 390x844 em um smartphone ou 1920x1080 em um monitor de desktop). Quando você abre o player no modo cinema, o nosso mecanismo cria um ambiente isolado em escala que reproduz com perfeição a proporção original da tela do visitante.

Telas de desktop & notebook

Em computadores comuns, capturamos o movimento contínuo do mouse e a navegação em várias abas dentro da mesma sessão do navegador. Menus que abrem ao passar o mouse aparecem na reprodução quando a página altera o documento para isso; um efeito de hover feito só com CSS não fica visível no documento e não é reproduzido.

Smartphones & tablets

Telas sensíveis ao toque não têm um cursor de mouse flutuando. O MousePlayer se adapta automaticamente e registra toques, rolagens por deslize e mudanças de orientação (retrato ou paisagem).

O desafio do redimensionamento durante a sessão

Se um visitante gira o tablet ou redimensiona a janela do navegador no meio da sessão, o layout do site muda dinamicamente. O MousePlayer captura esses eventos de redimensionamento e ajusta a área de reprodução na hora, sem interrupções, para preservar o contexto da interação.

3. Limites do sistema & fronteiras técnicas

Para respeitar a privacidade dos usuários, preservar a segurança do navegador e manter o processamento de dados rápido, o MousePlayer opera dentro de limites técnicos definidos:

Limite do sistema Como o MousePlayer lida com isso
iFrames iframes da mesma origem da sua página são gravados junto com o conteúdo e a interação dentro deles. Conteúdo incorporado de outra origem (por exemplo, players do YouTube, formulários de pagamento do Stripe) não pode ser gravado por dentro devido às políticas de segurança do navegador (Same-Origin Policy); ele aparece como um espaço reservado na reprodução e não é carregado ali.
Campos de entrada sensíveis (dados pessoais) Campos de senha e de pagamento são mascarados no dispositivo do visitante em todos os níveis de mascaramento, e o mascaramento completo de todas as entradas de formulário é o padrão em todas as propriedades. Você vê que algo foi digitado, não o que foi digitado. Há dois limites: os dois níveis de mascaramento mais fracos só são ativados mediante nossa aprovação por escrito, e o mascaramento nunca alcança o que a sua própria página escreve no documento – uma página de confirmação que mostra um endereço faz parte da captura. Ambos estão descritos no acordo de tratamento de dados.
Elementos canvas & WebGL O conteúdo de um canvas é gravado como imagem: uma vez com a captura da página e de novo sempre que muda, no máximo cerca de uma vez por segundo e com um limite de tamanho. Por isso, animações suaves aparecem como uma sequência de quadros. Nenhuma imagem é transmitida em áreas mascaradas nem de elementos canvas que contêm imagens de outra origem; conteúdo WebGL pode ficar vazio.
Web Components (Shadow DOM) Shadow roots abertos são gravados junto com o seu conteúdo. Shadow roots fechados são inacessíveis para scripts; o conteúdo deles fica de fora da reprodução.
Transporte & armazenamento do navegador Os dados são enviados por uma conexão WebSocket criptografada (HTTPS/WSS). Se ela não puder ser estabelecida, por exemplo por causa de um proxy, o script passa a usar uma rota HTTP criptografada; capturas de página muito grandes são enviadas separadamente por HTTPS. O MousePlayer não define cookies; ele usa o local storage e o session storage do navegador no seu site.
Períodos de inatividade (AFK) Se um visitante deixa a aba aberta e se afasta por 20 minutos, o nosso mecanismo detecta a inatividade automaticamente e comprime esse intervalo na reprodução, para que você não perca tempo olhando telas paradas.