Quando eu era adolescente, eu tinha uma rota de entrega de um jornal como o meu primeiro “emprego de verdade”, e eu era pago com amendoins para andar pelas ruas e entregar as notícias locais para as famílias da minha vizinhança. Eu tive algumas frustrações com o trabalho, e realmente não me importava com o baixo salário no dia do pagamento (que, refletindo, parecia ridículo para o esforço envolvido). A coisa mais frustrante para mim foi ter que lidar com caixas de correio mal conservadas em muitas das casas na minha rota.

Eu cresci na Inglaterra, se você não sabia disso, e lá quase todas as caixas de correio estão localizadas na porta da frente da casa, em vez de uma caixa de correio perto da guia da calçada, e caixas de correio completamente quebradas eram muito comuns. Isso me fez quer evitar essas casas de propósito, e o proprietário permanecia alheio a minha situação em entregar o seu tabloide semanal.

Por que essas pessoas nunca pensaram em consertar suas caixas de correio?

Eu não esperava que os proprietários ficassem acordados à noite, pensando em maneiras de aperfeiçoar a eficiência de suas caixas de correio, mas me ocorreu que se eu não falasse nada seria errado, já que nenhum deles usava as caixas por eles mesmos. Quando foi a última vez que você colocou algo na sua própria caixa de correio? Agora que eu trabalho em desenvolvimento web, eu sempre uso essa analogia para explicar o fato de que nós realmente não utilizamos os sites que construímos da mesma forma que nossos usuários. Nós nunca chegamos a experimentar as coisas com a perspectiva deles, e os usuários vêm e vão sem que você realmente saiba se eles tiveram uma boa experiência (ou eles dizerem que encontraram problemas). Em vez disso, eles apenas evitam usar você no futuro.

Sabemos como navegar em nossas próprias páginas, sabemos quais as características temos e onde estão localizadas, e nós simplesmente não podemos apagar nossas memórias e agir como um novo visitante chegando ao nosso site pela primeira vez. Assim, como você pode garantir que os usuários estão tendo uma boa experiência com a sua aplicação e garantir que eles não o evitarão devido a problemas que não são sequer conscientes? Aqui eu vou mostrar como conseguir configurar com um produto da popular empresa de ferramentas de desenvolvimento Raygun chamado de Pulse e, em poucos minutos, desbloquear uma riqueza de introspecções que você pode tomar para melhorar seu software e garantir que os usuários estão tendo um experiência de software perfeita.

O que é monitoramento real do usuário?

Se você ainda não ouviu o termo antes, produtos de monitoramento real de usuários (Real User Monitoring – RUM) medem a experiência que os usuários têm quando visitam o seu site. Monitoramento do navegador é outro termo que é amplamente utilizado na comunidade dev. Alguns leitores estão familiarizados com New Relic Browser e Pingdom, que oferecem ferramentas para medir as experiências dos visitantes do site. Entretanto, o Pulse da Raygun leva o monitoramento real de usuário a um nível totalmente novo, ao combinar esses dados com informações de diagnóstico profundo sobre os erros e falhas que ocorrem dentro de uma sessão de usuário. Pulse é um produto de monitoramento real de usuário construído para desenvolvedores como você.

Muitas equipes que implementam alguma forma de monitoramento se sentem felizes quando conseguem um painel em tempo real dos dados em suas telas de TV do escritório, mas encontrar e corrigir ativamente problemas que estão afetando seus usuários torna-se secundário.

Em vez de ver as tendências bonitas dos dados sem conhecimento real sobre como corrigir os problemas ou porque eles aconteceram, Raygun pode fornecer informações que podem identificar um problema até o nível de linha de código que é a causa raiz, importante, juntamente com o usuário específico que encontrou o problema (o que é ótimo para seus esforços de suporte!). Vamos dar uma olhada em como tudo isso funciona em mais detalhes.

Conhecimentos práticos utilizáveis direto da caixa

A coisa boa sobre Raygun Pulse é que você pode começar com apenas algumas linhas de código. O trecho de código JavaScript está disponível nas instruções de configuração, logo depois que você se inscrever para uma conta. Copie e cole esse código juntamente com sua chave de API em seu código do aplicativo, e isso é tudo de que você precisa.

Confira este vídeo para uma rápida visão geral da configuração de inicialização monitoramento real do usuário do Pulse, o que não toma tempo nenhum. Este exemplo usa um site WordPress para a demo, mas você pode usar Pulse com qualquer aplicação web, uma vez que é apenas um curto fragmento de código JavaScript que você precisa incluir. A maioria dos desenvolvedores vai descobrir que eles podem instalar e deixar funcionando em poucos minutos, você provavelmente pode integrar no seu tempo do cafezinho!

Quick Setup Guide – Pulse from Raygun on Vimeo.

Veja como definir as coisas.

Instalando a biblioteca cliente

Usando o Raygun CDN

Adicione este trecho à sua marcação, antes da tag de fechamento </head>:

<script type="text/javascript">
  !function(a,b,c,d,e,f,g){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g)}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

Ou manualmente

Baixe o script de produção (minificado), o script de desenvolvimento (fonte) ou veja aqui como instalar com Bower, NPM ou NuGet.

Adicione as seguintes linhas de código JS pouco antes da tag de fechamento do corpo do seu site ou aplicativo.

<script type="text/javascript">
  rg4js('apiKey', 'XXXXXXXXXXXXXX');
  rg4js('enablePulse', true);
  rg4js('enableCrashReporting', false);
</script>

É fácil assim!

Uma vez que você enviar os dados para Raygun, você será capaz de navegar para a guia Live e ver o mapa do mundo piscar como uma árvore de Natal.

Olhe para todos os usuários, felizes com a sua aplicação. Embora essa visualização seja muito legal, especialmente para sites de alto tráfego, queremos ver alguns insights sobre a experiência que esses usuários estão tendo ao usar nosso software.

Pulse grava cada sessão de seus usuários e, em seguida, oferece a informação de diagnóstico sobre essas sessões e todos os problemas que o usuário teve, então você pode olhar para como arrumar essas questões e tornar a sua aplicação melhor, mais rápida, mais forte e mais confiável.

A guia Sessions no Pulse permite detalhar as páginas que o usuário visitou quando em sua sessão. Uma sessão começa quando eles visitam seu aplicativo e termina quando eles saem do seu aplicativo.

Cada página foi registrada quando o usuário navegava na sua aplicação, com o sistema operacional e dispositivo claramente visíveis. As páginas são classificadas de acordo com o seu desempenho, por isso se, por exemplo, você teve uma experiência de um checkout de cinco etapas, mas a página quatro desse fluxo estava sendo carregada muito lentamente para os usuários de um dispositivo específico, você pode imaginar o impacto que uma simples solução seria para esse baixo desempenho. Eu tenho certeza de que você tem seus próprios casos de uso nos quais você sente que medir essas partes da sua aplicação poderia ser útil.

Ao utilizar uma ferramenta como o Pulse, o efeito sobre toda a sua organização é duplo. Em primeiro lugar, faz com que a probabilidade de os usuários abandonarem seu serviço devido a problemas se torne menos provável (mais conversões), ao mesmo tempo em que se tem economias de custos, permitindo que os desenvolvedores possam identificar problemas de forma extremamente rápida.

Quando foi a última vez que você ou um membro de sua equipe perdeu metade de um dia tentando reproduzir um bug ou cavando arquivos de log procurando pela causa? Tempo é dinheiro, e com Raygun esse processo de encontrar a causa raiz dos problemas leva alguns minutos, já que você será alertado para seus problemas, em vez de depender de seus usuários relatá-los, com raiva, enviando screenshots com imagens vagas em um arquivo do Word enquanto você tenta diagnosticar o problema. Há um caminho melhor.

Aqui podemos ver uma quebra dos nossos tempos de página e o que estava contribuindo para termos uma velocidade mais lenta no tempo de carregamento. Essa visualização é uma maneira poderosa para perceber onde um carregamento de página lento deriva e quais otimizações de ativos irão entregar os maiores ganhos em desempenho.

Agora chegamos à melhor parte do Pulse – usuários autenticados…

Monitoramento real de usuário = pessoas importam

Uma das características mais poderosas que o Pulse fornece não é apenas dizer o que, quando e por que algo aconteceu, mas também com quem isso aconteceu. O seu maior cliente está tendo problemas com seu aplicativo? Você saberia sobre isso agora? Bem, usando a função usuários do Pulse, os usuários autenticados podem ser identificados, você pode configurar por meio da criação de biblioteca para transmitir dados do usuário conectado no momento. Veja como isso se parece:

Adicionar dados do usuário:

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id@domain.com',
  isAnonymous: false,
  email: 'users_email_address@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});

Agora os usuários irão obter perfis de usuário individuais com detalhes de seu desempenho na sessão e quaisquer erros que encontraram historicamente. Você pode entrar em contato com os usuários que tiveram uma experiência ruim via e-mail ou redes sociais ou corresponder as suas histórias de sessão com os pedidos de suporte. Seu fluxo de trabalho de repente se torna muito mais leve e menos estressante!

Resumo

O seu site carrega lentamente em um navegador específico? Uma determinada página no seu fluxo de checkout está tendo problemas e causando carrinhos abandonados? Os usuários estão deixando o seu site devido a um recurso com carregamento lento? Como está a comparação de tempo de carregamento entre mobile e desktop? Esse tipo de pergunta pode ser respondido com o monitoramento real de usuário, e melhorias no desempenho do site podem aumentar drasticamente suas conversões e experiência do usuário. Mostre para o seu chefe que você arrumou várias questões que estavam prejudicando a empresa e você vai estar na fila para um aumento de salário.

Um grande número de leitores pode estar pensando que eles sabem tudo sobre o seu software, eles sabem os seus problemas e se os usuários não estão reclamando tudo está bem. No entanto, dado que cerca de 1% dos usuários relatam ativamente problemas de software, a complacência em torno do desempenho do software pode se voltar contra você. Eu desafio qualquer desenvolvedor a plugar o Raygun e ver quantos de problemas eles não estavam cientes.

Oferta especial – envie dados, ganhe uma camiseta estilosa

Raygun dá aos desenvolvedores a capacidade de criar experiências de software perfeitas e de se tornarem uma equipe de tecnologia incrível. Como um incentivo, você vai ganhar uma camiseta Raygun se integrar o Raygun com o seu aplicativo e começar a enviar dados. Para aproveitar essa oferta, vá até esta página para se inscrever.

Da próxima vez que você tiver um pedido de suporte e estiver lutando para encontrar a causa raiz do problema, ter o Raygun como uma das ferramentas poderá economizar um monte de tempo. Eu realmente espero que você experimente o Pulse, e isso o ajude com o seu desenvolvimento de software.

***

Nick Harley faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://davidwalsh.name/raygun-pulse