Session Replay

Recurso Pro

Veja exatamente como os usuários interagem com seu site. Session Replay grava movimentos do mouse, cliques, rolagens e interações de página para que você possa entender o comportamento do usuário em nível individual.

---

Visão Geral

Session Replay captura uma gravação tipo vídeo de sessões de usuário sem realmente gravar vídeo. Usando snapshots DOM e mudanças incrementais, as reproduções são leves (~50-100KB por sessão), mas oferecem fidelidade completa da experiência do usuário.

Principais Benefícios

• Depurar Problemas Mais Rápido: Veja exatamente o que os usuários experimentaram antes de relatar um bug
• Identificar Problemas de UX: Observe usuários tendo dificuldades com interfaces confusas
• Melhorar Conversões: Entenda por que os usuários abandonam fluxos de checkout ou inscrição
• Validar Mudanças: Confirme que novos recursos funcionam como esperado em produção
• Privacidade em Primeiro Lugar: Mascara automaticamente dados sensíveis como senhas e cartões de crédito

---

Habilitando Session Replay

Etapa 1: Ativar no Painel

1. Abra Domains, clique no seu site e vá para a seção Configure e selecione Feature flags
2. Ative Session Replay
3. Configure seu modo de gravação (veja Trigger Modes)
4. Salve as alterações

Etapa 2: Verificar Instalação

O script de rastreamento inicia automaticamente a gravação uma vez habilitado. Verifique se está funcionando:

1. Visite seu site
2. Realize algumas interações (cliques, rolagens, digitação)
3. Abra Domains → seu site → aba Sessions no seu painel Zenovay
4. Sua sessão deve aparecer em 30 segundos

---

Modos de Trigger

Controle quando as sessões são gravadas e carregadas para otimizar o armazenamento e focar no que mais importa.

Todas as Sessões (all)

Grava e carrega cada sessão.

Melhor para:

• Produtos em estágio inicial que precisam de visibilidade máxima
• Sites com baixo tráfego
• Ambientes de teste e QA

Configuração:

{
  "session_replay_trigger": "all"
}

Apenas Erros (errors_only)

Sempre grava em background, mas carrega apenas sessões onde ocorrem erros de JavaScript. Usa captura retroativa para incluir eventos que levaram ao erro.

Melhor para:

• Ambientes de produção com alto tráfego
• Equipes focadas em depuração
• Uso consciente de custos

Configuração:

{
  "session_replay_trigger": "errors_only"
}

Como funciona:

1. A gravação começa imediatamente no buffer de memória
2. Quando um erro ocorre, o buffer é descarregado e carregado
3. Você obtém contexto completo do que aconteceu antes do erro

Modo Inteligente (smart)

Carrega sessões inteligentemente com base em múltiplos sinais:

• Erros de JavaScript: Qualquer exceção não tratada
• Sinais de Frustração: Rage clicks, dead clicks, abandono de formulário
• Visitantes de Alto Valor: Visitantes mostrando intenção de compra ou engajamento

Melhor para:

• Cobertura equilibrada sem sobrecarregar com dados
• Equipes de produto focadas em otimização de UX
• Otimização de conversão de e-commerce

Configuração:

{
  "session_replay_trigger": "smart"
}

Detecção de frustração inclui:

• Rage clicks: 3+ cliques na mesma área em 500ms
• Dead clicks: Cliques em elementos não interativos
• Frustração de formulário: Múltiplas tentativas de envio de formulário falhadas
• Scroll thrashing: Rolagem rápida para cima e para baixo

---

Controles de Privacidade

Session Replay é projetado com privacidade como um princípio central. Informações sensíveis são automaticamente protegidas.

Mascaramento Automático

Por padrão, Zenovay mascara:

• Entradas de senha (<input type="password">)
• Campos de cartão de crédito (<input type="cc-number">, etc.)
• Números de seguro social
• Campos de email (configurável)
• Qualquer elemento com data-private

Mascaramento Manual

Adicione o atributo mask a qualquer elemento:

<!-- Mascara conteúdo sensível -->
<div data-private>
  Este conteúdo será oculto nas reproduções
</div>

<!-- Mascara campo de formulário -->
<input type="text" name="ssn" data-private />

Bloquear Gravação Completamente

Exclua elementos ou seções específicas da gravação:

<!-- Não grave esta seção -->
<div data-private>
  <video><!-- Conteúdo de vídeo não gravado --></video>
</div>

Conformidade GDPR

• Sem cookies necessários: Session Replay funciona apenas com dados de primeira parte
• Minimização de dados: Apenas alterações DOM são gravadas, não valores reais
• Direito ao esquecimento: Sessões podem ser deletadas sob solicitação
• Integração de consentimento: Respeita preferências de consentimento do visitante

Veja Conformidade GDPR para configuração detalhada.

---

Visualizando Sessões

Lista de Sessões

Abra Domains → seu site → aba Sessions para ver todas as sessões gravadas.

Filtrar por:

• Intervalo de data
• Tipo de dispositivo
• País
• Tem erros
• Tem sinais de frustração
• Duração da sessão

Ordenar por:

• Mais recente
• Duração mais longa
• Mais erros
• Pontuação de frustração mais alta

Player de Sessão

Clique em qualquer sessão para abrir o player de reprodução.

Recursos do Player:

• Play/Pause: Controles de reprodução padrão
• Velocidade: Reprodução com velocidade 1x, 2x, 4x
• Timeline: Vá para qualquer ponto na sessão
• Marcadores de Evento: Veja cliques, erros e eventos de frustração na timeline
• Console: Visualize erros de JavaScript que ocorreram
• Network: Veja requisições de API falhadas (Enterprise)

Atalhos de Teclado:

• Space: Play/Pause
• ← / →: Pular 5 segundos
• 1 / 2 / 4: Definir velocidade de reprodução
• F: Alternar tela cheia

---

Metadados da Sessão

Cada sessão captura informações contextuais:

---

Integração com Rastreamento de Erros

Quando Rastreamento de Erros está ativado, as reproduções de sessão são automaticamente vinculadas aos erros.

Contexto de Erro

De qualquer erro no seu painel de erros:

1. Clique em View Session
2. A reprodução abre no momento em que o erro ocorreu
3. Vá para trás para ver o que levou ao erro

Correlação de Stack Trace

Stack traces de erro são exibidos junto à timeline de reprodução, mostrando exatamente quando e onde o código falhou.

---

Armazenamento e Retenção

Armazenamento de Dados

Os dados de session replay são armazenados no Cloudflare R2 (armazenamento compatível com S3) com:

• Criptografia em repouso: AES-256
• Redundância geográfica: Replicação multi-região
• Armazenamento em cache de edge: Reprodução rápida do local mais próximo

Períodos de Retenção

As sessões são automaticamente limpas após o período de retenção.

---

Impacto de Desempenho

Session Replay é projetado para impacto mínimo:

Dicas de Otimização

1. Use o modo de trigger apropriado: errors_only ou smart para sites com alto tráfego
2. Bloqueie elementos pesados: Exclua vídeos, animações complexas, iframes
3. Amostragem de gravação: Use taxa de amostragem para tráfego muito alto

---

Referência de Configuração

Configure session replay através das configurações do site:

{
  "feature_flags": {
    "enable_session_replay": true,
    "session_replay_trigger": "smart",
    "replay_sampling_rate": 0.02
  }
}

Opções

---

Solução de Problemas

Sessões Não Aparecem

1. Verificar se o recurso está ativado: Domains → seu site → Configure → Feature flags → Session Replay
2. Verificar modo de trigger: errors_only não carregará até que um erro ocorra
3. Verificar console do navegador: Procure por mensagens de inicialização do Zenovay
4. Aguarde o upload: As sessões são carregadas quando o usuário sai da página ou após 2 minutos

Reprodução Não Funciona

1. Verificar integridade dos dados: A sessão pode ter dados incompletos
2. Tentar navegador diferente: Alguns navegadores antigos têm problemas de reprodução
3. Recarregar a página: Limpe o cache do navegador e tente novamente

Mascaramento de Privacidade Não Funciona

1. Verificar sintaxe do atributo: Use data-private (não data-mask)
2. Verificar elementos pai: Mascaramento não herda de pais
3. Inspecionar DOM: Garanta que o atributo está presente no HTML renderizado

---

Acesso à API

Acesse dados de sessão programaticamente via Sessions API.

Listar Sessões

GET /api/websites/:websiteId/sessions
Authorization: Bearer YOUR_API_KEY

Obter Eventos da Sessão

GET /api/replay/:sessionId
Authorization: Bearer YOUR_API_KEY

---

Práticas Recomendadas

1. Comece com modo smart - Obtenha as sessões mais valiosas sem sobrecarregar o armazenamento
2. Mascara agressivamente - Em caso de dúvida, mascare conteúdo sensível
3. Revise regularmente - Agende revisão semanal de sessões para insights de UX
4. Compartilhe com a equipe - Use links de sessão para comunicar problemas
5. Combine com análises - Use dados quantitativos para encontrar sessões para assistir

---

Próximos Passos

• Rastreamento de Erros - Capture automaticamente erros de JavaScript
• Heatmaps - Veja padrões agregados de clique e rolagem
• Conformidade GDPR - Configure configurações de privacidade