Como o VWO cria uma experiência de visitante sem atrito ao executar experimentos em um aplicativo de página única (SPA)

Um mergulho profundo em como o suporte nativo do VWO para sites dinâmicos facilita a experimentação para você enquanto cria experiências perfeitas para seus visitantes.

Muitos sites são criados como aplicativos de página única (SPAs), pois têm poucas vantagens importantes em relação aos sites estáticos tradicionais: Os sites dinâmicos são rápidos, compactos e responsivos. Esses sites permitem que você otimize o conteúdo que seu usuário vê para criar experiências envolventes e únicas. Se você ouvir de sua equipe de desenvolvimento que seu site é construído usando React, Vue, AngularJS, Ember ou Backbone, provavelmente você está trabalhando com um SPA e este artigo é relevante para você.

Neste artigo, falamos sobre como nós, na VWO, tornamos a experimentação em sites dinâmicos eficaz e fácil com suporte integrado para testes de SPA para que você se concentre apenas nos esforços de otimização da experiência do site e nada mais.

Mas primeiro, vamos falar sobre o problema que o trouxe aqui em primeiro lugar.

Desafios da execução de experimentos em sites dinâmicos

Você provavelmente está aqui porque, ao executar experimentos em um SPA, as alterações feitas em sua página de destino não ficam visíveis para os usuários finais. Como resultado, você não pode testar e validar suas ideias tão rapidamente quanto deseja e isso o deixa frustrado.

Primeiramente, vamos entender que os SPAs são diferentes dos sites tradicionais. A página inteira é carregada cada vez que alguém visita um site convencional. No SPA, no entanto, apenas algumas seções da página são atualizadas. Isso ocorre porque, em SPAs, recursos como HTML, CSS, Scripts, etc., que constroem a aparência da sua página, são carregados apenas uma vez.

Com base em como o usuário interage com diferentes partes da página da Web, o que você vê em uma seção específica da página muda dinamicamente em resposta à ação do usuário. Digamos que, se um usuário clicar em um botão, um pop-up será aberto. Este pop-up é a mudança dinâmica feita pelo framework de acordo com a interação do usuário sem afetar o desempenho. Mais alguns exemplos onde há mudança dinâmica em um SPA são os seguintes:

• Itens em uma lista de resultados de pesquisa que podem ser expandidos para exibir seus detalhes.
• Em um formulário, alguns campos aparecem na página apenas quando um visitante seleciona um valor predefinido em uma lista suspensa.
• O site usa alguns componentes como calendário, seletor de cores, etc. que são recarregados toda vez que o usuário precisa usá-los.

Embora isso seja bom para a experiência do usuário, executar uma campanha de teste com alterações feitas em qualquer um desses elementos dinâmicos (como listas de resultados de pesquisa, menus suspensos, widgets, pop-ups, banners etc.) em suas páginas da web se torna difícil. Isso ocorre porque as modificações feitas em um componente precisam ser aplicadas toda vez que algo muda dinamicamente no site.

Pense desta forma – você está executando um teste em uma página da web. Sempre que a página da Web é carregada (por um usuário que visita a página) ou a página cria um elemento dinâmico conforme descrito acima, a estrutura do SPA mostra o estado original (diferente da variação que você deseja mostrar como parte de seu teste).

O que você precisa é de uma plataforma de experimentação que garanta que sua variação de teste substitua a visualização original para que os usuários vejam a variação que você deseja que eles vejam. Portanto, ao configurar um teste em um SPA (digamos que você esteja testando o conteúdo em uma caixa pop-up), você espera que o controle e a variação do teste tenham a seguinte aparência:

Mas, na ausência de suporte ao SPA, as alterações feitas na variação reverterão para o controle, fazendo com que ambos pareçam idênticos. Bem assim:

Esta é apenas uma versão simplificada do que está acontecendo. Se você estiver interessado em entender tecnicamente o que acontece por trás da tela, continue lendo, senão você pode pular para a próxima seção do artigo.

Alguns frameworks de sites como GatsbyJS, Next.js, ReactJS, etc., usam renderização do lado do servidor e armazenam um instantâneo de sua página da Web original como deve ser carregado. Portanto, quando você modifica um elemento na página para fins de teste, a estrutura detecta a alteração como um 'problema' e reverte a página ao seu estado original conforme aparece no instantâneo armazenado. Isso, por sua vez, dificulta seu teste A/B.

Em segundo lugar, os frameworks mais recentes como React, Gatsby, Next.js, Vue.js, Angular, etc., usam o conceito de renderização baseada em estado. Por exemplo, no React, sempre que uma mudança é implementada em um dos estados devido à variação do teste A/B, a interface do site se recarrega automaticamente para sua forma original, para que os usuários nunca vejam a variação. Isso cria uma experiência abaixo do ideal para os visitantes do site.

Como o VWO facilita a experimentação em aplicativos de página única

Agora que discutimos o problema, vamos falar sobre a solução. O suporte avançado de SPA nativo da VWO em seu Editor Visual, que faz parte do VWO Testing, garante que as modificações feitas em um experimento sejam aplicadas nos SPAs para garantir a confiabilidade das campanhas e proporcionar uma experiência sem atritos aos seus visitantes.

1. Testando elementos dinâmicos em seu site

Embora os elementos dinâmicos tenham sido definidos na seção anterior, vamos analisá-los de perto com um exemplo específico. Considere que você tem um site de comércio eletrônico. Ao clicar no botão 'X' (Fechar) na 'Página do carrinho', um alerta aparece como um pop-up. Agora, você gostaria de testar as alterações de cópia na caixa de ação para ver se as mensagens acionáveis ​​e o Call to Action podem impedir que as pessoas fechem a página do carrinho. A caixa de alerta não está inicialmente presente no código do site, mas é adicionada pela estrutura do SPA quando o visitante clica no botão 'X' (Fechar). Aqui, o botão que abre o pop-up em que você está executando o teste é chamado de elemento de destino.

O VWO garante que a alteração que você deseja testar seja aplicada ao pop-up assim que ele for carregado. Tudo o que você precisa fazer é habilitar uma configuração com o clique de um botão. Você pode ler mais sobre essa configuração em nosso artigo da base de conhecimento.

Como o VWO garante que as alterações sejam aplicadas corretamente?

Fácil.

VWO observa os elementos da página (vídeos, imagens, tabelas, seções, etc.) para alterações feitas a qualquer momento. Portanto, quando o elemento de destino (o botão Fechar 'X' no exemplo acima) é carregado, o VWO o detecta e aplica a modificação que você fez na Variação. Isso acontece mesmo que a página da web não seja recarregada, mas o usuário apenas interaja com uma seção do site.

Vamos ser um pouco técnicos e explorá-lo ainda mais. Você pode pular isso confortavelmente e passar para o próximo ponto se os detalhes técnicos não forem para você.

Em um site dinâmico, com base no comportamento do usuário, os elementos são adicionados, removidos ou modificados. Uma árvore DOM é como um repositório de todos os componentes do site (botões, banners, pop-ups, widgets, etc.) e mantém um instantâneo do estado atual do site.

A biblioteca do VWO usa o Mutation Observer – uma interface do navegador que permite ao VWO observar mudanças na árvore DOM de um SPA. Isso ajuda a detectar qualquer novo elemento adicionado, removido ou modificado na página. Nesse caso, o VWO aplica as alterações nos elementos automaticamente. Assim, sempre que os elementos são carregados dinamicamente, as alterações são aplicadas antes de serem mostradas ao visitante. Isso melhora a confiabilidade das campanhas, garantindo que as alterações nas variações sejam aplicadas completamente.

Como o VWO gerencia as mudanças dificultadas pela renderização do framework ?

O VWO mantém o botão CTA oculto até que a renderização da estrutura seja concluída. O VWO verifica repetidamente se a renderização está concluída. Quando a renderização da estrutura estiver concluída, a campanha VWO começará a ser executada.

Você pode ler mais sobre essas configurações em nosso artigo da base de conhecimento.

2. Testando qualquer outro elemento de página em seu site

Quando uma página é carregada, as estruturas modernas do SPA revertem os elementos modificados para seu estado original sempre que o site for carregado. Portanto, se você estiver testando a página, todas as suas modificações serão revertidas para o original. Não apenas os elementos dinâmicos, mas para todos os elementos da página, o VWO acompanha as alterações que você fez para enfrentar o desafio de testar com a estrutura do SPA. Ao aplicar essas alterações à sua página da Web, o VWO detecta todas as alterações feitas na página (inserção, exclusão e modificação de nós DOM) pelo teste e as reaplica para garantir a regularidade na experiência do usuário.

Nenhuma ação explícita é necessária para habilitar essa melhoria no VWO. Este é um recurso integrado disponível para todas as campanhas VWO criadas com o Editor Visual, independentemente da estrutura na qual seu site foi criado.

Vejamos alguns exemplos de casos de uso de alterações que o Editor Visual VWO manipula.

1. Digamos que você removeu um botão de CTA secundário (digamos "Adicionar à lista de desejos") do seu site de comércio eletrônico para testar se essa alteração afeta o número de cliques no CTA principal (digamos "Adicionar ao carrinho"). Este é um caso de uso de teste em que você exclui um elemento no site. Mesmo que você tenha deletado o botão, ele persiste no DOM virtual criado por frameworks como React e irá gerar um erro quando o site for carregado.

2. Agora imagine que seu site de comércio eletrônico tenha um fluxo de registro que mostre uma caixa de entrada de texto para capturar os endereços de e-mail dos visitantes além do botão 'Enviar agora'. Quando você faz alterações na aparência da caixa de entrada de texto, os componentes de estilo do site associados a ela são alterados. O Editor Visual do VWO garante que as últimas alterações aplicadas são o que os usuários veem. Veja como você pode fazer alterações em um campo de formulário em um SPA e certifique-se de que os visitantes amostrados para a variação vejam essas alterações em vez de ver o controle.

Como usar o VWO para seu aplicativo de página única?

Para usar o VWO para o seu SPA, basta adicionar o VWO SmartCode na seção principal do seu site e aproveitar o suporte padrão para sites do SPA.

Com uma integração tão simples quanto essa, você pode começar imediatamente. Inscreva-se para uma avaliação gratuita, explore os recursos do VWO ou solicite uma demonstração com nossos especialistas em produtos. Você também pode saber mais sobre nossas atualizações de produtos mais recentes e interessantes.