O Guia Completo de
Replay de Sessão

Imagine sentar ao lado dos seus usuários enquanto eles navegam pelo seu site. Seria incrível, não seria? Você vivenciaria em primeira mão o tipo de problema que eles enfrentam e veria as partes da sua aplicação que eles não entendem e que os deixam frustrados.

Imagine agora poder afastá-los quando esses problemas surgissem e abrir as ferramentas de desenvolvedor do navegador deles para entender o que deu errado. Não seria fantástico?

É aqui que entra o replay de sessão. Ele permite que você assista a como seus usuários navegam pela sua aplicação web e veja o que aconteceu nos bastidores, para que você possa reproduzir facilmente a situação caso algo dê errado.

As ferramentas de replay de sessão podem atender a muitas áreas diferentes dentro de uma mesma empresa, tornando a escolha da alternativa certa ainda mais difícil.

• Quer conferir como os usuários estão interagindo com a nova atualização de design? O replay de sessão tem você coberto!
• Tentando descobrir por que o app vive travando? O replay de sessão pode responder a essa pergunta.
• Curioso para saber como os usuários estão reagindo aos recursos recém-lançados? Você acertou, o replay de sessão também pode ajudar!

Vamos dar uma olhada em alguns dos casos de uso mais comuns em que as ferramentas de replay de sessão brilham como nenhuma outra.

A tecnologia de replay de sessão é tão versátil que oferece valor a diferentes equipes dentro de uma organização. Essa é uma das razões pelas quais há tantas alternativas de replay de sessão no mercado. Cada uma foca em personas e casos de uso diferentes. Dificilmente existe alguma ferramenta por aí que englobe todas elas juntas. Portanto, certifique-se de ter em mente seu usuário interno e seu principal caso de uso ao escolher sua ferramenta de replay de sessão.

Vamos esclarecer o que acontece nos bastidores ao capturar e reproduzir uma gravação de sessão. Algumas partes podem ser técnicas, mas não se preocupe; tudo fará sentido.

O que realmente é capturado dentro dos replays de sessão?

Os dados coletados podem variar de uma ferramenta de replay de sessão para outra. Lembre-se de que essas ferramentas podem ter como alvo diferentes personas em uma organização e, portanto, atender a alguns casos de uso, mas não a outros. Dito isso, as melhores ferramentas devem ser capazes de capturar os elementos abaixo:

• Comportamento dos usuários: Estamos falando de cliques, movimentos do mouse, rolagens, hesitações e mais. Os usuários estão rolando por cima de mensagens importantes? Ou talvez estejam clicando com raiva em alguns botões? Esses dados são valiosos para revelar as principais frustrações.
• Mutações do DOM: Quando você visita um site, seu navegador baixa e depois monta diversos elementos, como imagens, texto e vídeos, antes de renderizar cada página. O Document Object Model (DOM) atua como um tradutor entre esses elementos e seu navegador, permitindo que as páginas web sejam montadas e renderizadas. As ferramentas de replay de sessão detectam quando algum desses elementos é atualizado e capturam essas mutações (mudanças) como parte do replay. As mutações do DOM são os ingredientes essenciais das gravações de sessão. Elas são os quadros que compõem o replay.
• Ferramentas de desenvolvedorSão ferramentas fornecidas pelos navegadores que ajudam os desenvolvedores a reproduzir todo tipo de problema em seus ambientes locais de teste. Coisas como requisições e payloads de rede, erros de JavaScript, logs e o estado da aplicação web, entre outras. Algumas ferramentas de replay de fato capturam esses dados técnicos, para cada sessão de usuário, tornando a depuração uma brincadeira para os desenvolvedores.
• Web vitals:Monitorar os tempos de carregamento da sua aplicação web, não apenas das páginas, mas também de seus diversos recursos, pode fornecer insights valiosos sobre como seus usuários vivenciam seu site. Além disso, métricas como utilização de memória e CPU podem ser usadas para rastrear travamentos e corrigir lentidões na sua aplicação. Isso faz das ferramentas de replay de sessão uma peça-chave da sua stack de observabilidade.
• Frustrações:Rage clicks, rolagem excessiva ou cliques mortos são exemplos de frustrações dos usuários que as plataformas de replay de sessão podem detectar. Identificá-las é o primeiro passo para proporcionar uma melhor experiência de produto aos seus usuários.
• Eventos personalizados: Isso abrange eventos a jusante ou a montante na sua aplicação que você talvez precise registrar junto com cada sessão gravada. Rastrear eventos personalizados significa que você pode sincronizar esses fragmentos de dados com seus replays para um contexto muito mais rico.
• Metadados:Informações adicionais sobre uma gravação específica. Coisas como userIDs, segmentos, versões de navegador, país e mais. Os metadados são usados para filtrar os replays e agregar dados.
• Assets:O cache de certos assets, como imagens, fontes ou folhas de estilo, é um aspecto vital de qualquer plataforma de replay de sessão. Imagine que você grava uma sessão para seu novo site e, alguns meses depois, decide dar a ele um visual novo. Agora, se os assets não tivessem sido armazenados em cache, a gravação antiga simplesmente estaria quebrada, pois não conseguiria referenciar suas folhas de estilo e fontes anteriores. É por isso que o cache de assets é tão importante: ele garante que seu replay permaneça fiel à sua forma original, não importa quanto tempo tenha passado.

Em vez de gravar vídeo (o que consumiria muita largura de banda), essas ferramentas capturam dados de eventos que podem ser posteriormente reconstruídos em um replay visual.

Processamento de dados

Uma vez coletados, os dados passam por várias etapas de processamento:

• Compressão para reduzir o tamanho dos dados
• Remoção de informações sensíveis (com base nas suas configurações de privacidade)
• Indexação para permitir buscas
• Associação com outras métricas e eventos

Esse processamento garante que os dados sejam armazenados de forma eficiente e possam ser recuperados rapidamente quando necessário.

Reconstrução do replay

Quando você visualiza um replay de sessão, a ferramenta reconstrói a experiência do usuário:

• Reconstrói o DOM como ele aparecia para o usuário
• Reproduz as interações do usuário em sequência
• Anima os movimentos do cursor
• Mostra as entradas de formulário e suas alterações
• Exibe dados técnicos ao lado do replay visual

Essa reconstrução fornece uma representação altamente precisa do que o usuário vivenciou, permitindo que você veja sua aplicação pelos olhos dele.

Integração com outras ferramentas

A maioria das ferramentas de replay de sessão pode se integrar a outros sistemas da sua stack tecnológica:

• Ferramentas de rastreamento de erros como o Sentry
• Plataformas de análise como o Google Analytics
• Sistemas de suporte ao cliente como Intercom ou Zendesk
• Soluções de CRM como o Salesforce

Essas integrações ampliam o valor do replay de sessão ao conectar o comportamento dos usuários a outras métricas e fluxos de trabalho de negócio.

A maioria das ferramentas de replay de sessão permite que os desenvolvedores tenham controle sobre o que é gravado e o que é higienizado (sanitized). Os elementos higienizados não são enviados ao servidor. Na verdade, eles nunca saem do navegador do seu usuário. Em vez disso, são mascarados (ou seja, o texto é substituído por asteriscos e as imagens por placeholders) ou não rastreados (os dados são simplesmente ignorados).

Por exemplo, digamos que a página de perfil de usuário no seu site contenha informações pessoais que devem ser higienizadas, como endereço e número de telefone. A equipe de desenvolvimento poderia marcar esses campos como "mascarados" para o tracker. Com isso, sempre que um usuário visitasse a página de perfil, o tracker higienizaria esses campos substituindo seu conteúdo por asteriscos. Isso resulta em um replay devidamente higienizado que ainda captura plenamente a jornada do usuário sem revelar nenhuma Informação Pessoal Identificável (PII).

Conformidade

Se você possui dados de PII, há sempre políticas de privacidade internas a seguir e regulamentações externas a cumprir.

As políticas impostas internamente podem variar desde restrições de segurança em torno da infraestrutura até o software que você pode instalar. Quando se trata de regulamentação internacional, as três mais importantes são:

Quando se trata de conformidades externas, as três mais importantes são:

• GDPR Aplica-se ao coletar dados de cidadãos da UE. O GDPR também permite que os usuários peçam que você remova os dados deles dos seus bancos de dados. Isso, é claro, abrange os dados de replay de sessão.
• HIPPA Esta é específica para dados relacionados à saúde. Se você está coletando esse tipo de informação sobre seus usuários, muito provavelmente já está em conformidade com ela.
• CCPA Semelhante ao GDPR, mas para residentes da Califórnia, nos Estados Unidos.

Se você não faz parte do setor de saúde e seu site é acessível globalmente, é bem provável que você tenha de cumprir o GDPR e o CCPA. Adicionar uma ferramenta de replay de sessão à mistura pode parecer mais um obstáculo a transpor. No entanto, essas ferramentas resolvem as preocupações com a privacidade dos dados por meio da higienização e de outros controles refinados. Os desenvolvedores podem dizer ao tracker quais dados rastrear e quais ignorar. Dessa forma, as PII ficam seguras dentro do navegador do seu usuário e não são transmitidas ao servidor.

Portanto, é sempre importante revisar e entender como as ferramentas de replay de sessão podem lidar com dados pessoais para que você possa cumprir as regulamentações em vigor.

Propriedade e segurança dos dados

Mesmo que os dados sejam higienizados, a quem eles pertencem? E como você pode garantir que sejam processados e armazenados com segurança? Isso pode dar dor de cabeça a muitas equipes de conformidade e segurança.

Embora a maioria das ferramentas venha na forma de aplicações SaaS, algumas soluções de replay de sessão permitem que você hospede toda a plataforma delas em suas próprias instalações (self-hosted). Isso significa que você é o proprietário dos dados, que também residem nos seus servidores, cumprindo assim suas políticas internas de segurança e privacidade.

Esse é um ponto crucial. Certifique-se de estar plenamente ciente dos detalhes ao decidir qual plataforma de replay de sessão escolher.

Entender os modelos de preços do replay de sessão ajuda você a tomar decisões fundamentadas e evitar custos inesperados. Vamos explorar as estruturas de preços comuns e os pontos a considerar.

Modelos de preços comuns

As ferramentas de replay de sessão normalmente usam um destes modelos de preços:

Custos ocultos a considerar

Além do preço base, fique atento a estes possíveis custos adicionais:

• Duração de armazenamento: Períodos de retenção mais longos costumam custar mais
• Recursos avançados: Algumas ferramentas cobram a mais por recursos como mapas de calor ou rastreamento de erros
• Custos de integração: Conectar outras ferramentas da sua stack pode gerar taxas
• Suporte de implementação: A assistência técnica durante a configuração pode ser um custo adicional
• Retenção de dados personalizada: Requisitos especiais de conformidade podem afetar o preço

Sempre pergunte sobre esses possíveis custos durante o seu processo de avaliação.

Com tantas ferramentas de replay de sessão no mercado, escolher a certa para suas necessidades pode ser desafiador. Veja o que considerar durante o seu processo de avaliação.

Recursos essenciais

Facilidade de implementação

Um tracker de replay de sessão não deve exigir mais do que algumas linhas de código para começar, independentemente da sua stack tecnológica. Uma vez concluída a configuração básica, você deve observar o quão fácil é estender suas capacidades. Quanto mais flexibilidade a ferramenta oferecer, maior a probabilidade de ela se encaixar no seu caso de uso.

Um tracker ideal deve ser fácil de configurar com o mínimo de código, mas, ao mesmo tempo, deve lhe dar todas as opções de que você precisa para personalizá-lo como achar melhor. Isso inclui capturar eventos personalizados, higienizar dados, adicionar informações extras às sessões e mais. Tudo isso deve ser realizado minimizando o impacto no desempenho.

Ferramentas de desenvolvedor poderosas

Para aproveitar o poder do replay de sessão em prol dos seus desenvolvedores frontend, é importante fornecer um ambiente que se assemelhe muito ao que eles já conhecem e usam no dia a dia. De fato, todo navegador importante vem com alguma variação das Ferramentas de desenvolvedor, um conjunto de ferramentas técnicas que ajudam os desenvolvedores, em seu trabalho diário, a reproduzir e depurar todo tipo de problema.

Uma ferramenta de replay de sessão ideal deve ser capaz de capturar essas pistas técnicas e fornecer uma experiência de depuração familiar aos desenvolvedores. Afinal, uma das áreas em que o replay de sessão é especialmente eficaz é na redução do tempo necessário para identificar e corrigir bugs.

Self-hosting

Como discutido na seção de Privacidade de dados, as políticas de conformidade e segurança podem não lhe dar a opção de hospedar a plataforma de replay de sessão por conta própria ou usá-la como um serviço em nuvem.

Felizmente, certas soluções de replay de sessão oferecem uma opção de self-hosting que permite que você instale e opere toda a plataforma delas em seus próprios servidores. Isso proporciona dois grandes benefícios:

• Controle total sobre os dados gerados pelos seus usuários. Os dados de replay de sessão vão diretamente para seus servidores, onde são processados e armazenados.
• A conformidade com políticas e regulamentações internastorna-se muito mais fácil dessa forma. Não se perde mais tempo com longas verificações de conformidade e segurança.

No fim das contas, o self-hosting costuma ser a solução que as empresas de grande porte escolhem, pois proporciona controle completo sobre seus dados. Se a propriedade e a segurança dos dados são preocupações importantes para sua empresa, certifique-se de priorizar esse critério ao avaliar suas opções.

Extensibilidade

Os desenvolvedores gostam de ajustar, aprimorar e construir recursos personalizados sobre sua ferramenta de replay de sessão. Uma arquitetura open-core ou baseada em plugins torna uma solução extensível por design e preparada para o futuro no que diz respeito às necessidades dos usuários internos.

Se você prioriza extensibilidade e personalização, considere explorar soluções de replay de sessão open source ao avaliar as alternativas.

Recursos de busca

Capturar milhões de sessões por dia pode fazer com que encontrar o replay relevante pareça procurar uma agulha num palheiro. Uma ferramenta de replay de sessão ideal deve oferecer um mecanismo de busca poderoso e versátil. Isso exige a capacidade de filtrar por praticamente qualquer fragmento de dado capturado, como uma ação do usuário, um atributo específico de sessão ou um evento técnico.

Tais capacidades de filtragem tornam-se essenciais para escolher a ferramenta certa.

Análise

Não é nenhum absurdo pensar que, com todos os dados capturados pelas ferramentas de replay de sessão, seria possível criar diversas visualizações para acompanhar e entender diferentes aspectos da aplicação web.

Por exemplo, você pode criar um painel para monitorar o desempenho do seu site, incluindo tempos de carregamento, recursos mais lentos e outras métricas de web vitals. Você também pode receber alertas quando algo dá errado e usar o replay de sessão para identificar a causa raiz. Isso reduz o tempo para resolver problemas potencialmente críticos.

Portanto, ao escolher uma ferramenta de replay de sessão, priorize a capacidade de agregar dados e criar visualizações para as métricas que importam para você.

Escalabilidade de preços

Como mencionado em uma seção anterior, há dois modelos principais de preços para soluções de replay de sessão. Ao escolher um modelo, é importante considerar o quão escalável ele é com base no tráfego do seu site e no seu caso de uso.

Se o seu site gera milhões de sessões mensais, considere um modelo de preços baseado em valor. No entanto, se você tem pouco tráfego, a alternativa mais barata seria usar uma solução de replay de sessão que ofereça preços baseados em volume. Melhor ainda, procure alternativas open source que você possa hospedar por conta própria para reduzir custos.

Integrações

A capacidade de integrar com ferramentas de terceiros costuma ser a marca registrada das soluções de replay de sessão poderosas. De fato, o replay de sessão lhe mostra um lado da história: seu frontend. E se você precisar do contexto completo ao reproduzir um bug e, portanto, precisar de logs do backend? É aqui que integrar com outras ferramentas da sua stack pode ser muito útil.

Outro tipo interessante de integração é com sistemas de tickets, como o JIRA. Ao criar um ticket que inclua todos os detalhes necessários enquanto revisa um replay específico, você pode melhorar significativamente o fluxo de trabalho da sua equipe de QA.

Portanto, certifique-se de procurar as integrações disponíveis ao escolher sua ferramenta de replay de sessão.

Amplitude de recursos

Embora seja essencial garantir que a solução escolhida venha com o conjunto certo de recursos de que você precisa para seu principal caso de uso, na verdade é recomendável ficar de olho em todos os recursos que a ferramenta possa ter.

Como afirmado anteriormente, as ferramentas de replay de sessão podem beneficiar diversos papéis e equipes dentro de uma organização. Embora possam ter como alvo principal alguns casos de uso, considere a ferramenta que oferece recursos complementares dos quais outros membros da equipe poderiam se beneficiar no futuro.

Comunidade

Por fim, ao decidir qual solução de replay de sessão escolher, acreditamos ser importante considerar sua comunidade. Uma comunidade ativa, em que os usuários (ou desenvolvedores, no caso de produtos open source) estão engajados e contribuindo para a plataforma, é sinal de um produto bem-sucedido e saudável.

Conclusão

As ferramentas de replay de sessão tornaram-se essenciais para organizações focadas em oferecer experiências digitais excepcionais. Ao fornecer tanto o contexto visual quanto os dados técnicos, elas oferecem insights únicos que outras ferramentas de análise simplesmente não conseguem igualar.

Seja você um desenvolvedor tentando corrigir bugs esquivos, um gerente de produto buscando melhorar os fluxos dos usuários ou um membro da equipe de suporte ajudando clientes confusos, o replay de sessão pode transformar a forma como você entende e otimiza sua aplicação web.

Ao avaliar as opções para sua organização, lembre-se de equilibrar a funcionalidade com as considerações de privacidade e escolha uma solução que esteja alinhada com suas necessidades e recursos específicos.