Práticas recomendadas para execução de testes A/B em aplicativos de página única (SPAs)

Este artigo é a parte 2 da série Testes A/B em aplicativos de página única .

Na parte 1, apresentamos o conceito de aplicativo de página única (SPA), mostramos por que ele está crescendo em popularidade e analisamos 10 das melhores plataformas de teste A/B que você pode usar em aplicativos de página única .

Mas executar testes A/B em SPAs pode ser um pouco complicado devido à maneira como eles funcionam. Neste artigo, forneceremos conselhos práticos sobre como executar um experimento em um SPA e algumas práticas recomendadas a serem seguidas.

A evolução das estruturas de SPA

SPAs não são um conceito novo.

Uma patente de 2002 descreve uma tecnologia semelhante à versão contemporânea do SPA.

No entanto, a técnica AJAX, que vem sendo utilizada como padrão de rede desde 2006, facilitou sua implementação. É um conjunto de estratégias para criar aplicativos web assíncronos usando uma variedade de tecnologias do lado do cliente. O software pode enviar e receber dados do servidor em segundo plano graças ao AJAX, sem alterar o estado atual da página ou o modo de exibição do conteúdo e, portanto, sem interferir na experiência do usuário.

A introdução do AJAX, por outro lado, não foi um divisor de águas na adoção do SPA.

O aumento da popularidade dos SPAs faz parte de uma tendência maior que foi alimentada pelo rápido crescimento do front end e pela crescente relevância do UX nos últimos anos.

Os SPAs foram criados usando applets Java ou programas Flash, bem como as bibliotecas “puras” de JavaScript ou jQuery.

No entanto, frameworks de front-end como Angular.js, React.js e Vue.js – todos os quais são frameworks JavaScript relativamente novos – ajudaram em seu desenvolvimento.

Quais são as tecnologias por trás de uma arquitetura de SPA?

Um SPA é essencialmente uma estrutura JavaScript com suporte a HTML5 e CSS3.

No entanto, usando esses componentes, algumas bibliotecas e estruturas distintas surgiram e foram adotadas no mundo do desenvolvimento:

1. Angular

Desenvolvido pelo Google, o Angular é o mais maduro e o mais antigo dos 3 frameworks com documentação detalhada para usar, mas uma curva de aprendizado íngreme.

Ele é incorporado com uma arquitetura original do Model View Controller (MVC), mas usa principalmente um MVVM (Model-View-ViewModel) que permite que vários desenvolvedores trabalhem separadamente na mesma seção do aplicativo. Pode haver alguns problemas de migração com a atualização para novas versões, mas o Angular tem mais confiabilidade ao dimensionar e é ótimo para projetos grandes e complexos.

Por causa do TypeScript, o Angular é uma escolha fantástica para grandes equipes de desenvolvedores, e algumas empresas já empregam essa tecnologia em seus outros produtos.

No GitHub, é um framework maduro e estabelecido, com um grande número de colaboradores.

O Google e seus produtos como Google Drive e Gmail, além do Wix, estão entre os usuários do Angular for SPAs.

2. React.js

O React foi desenvolvido pelo Facebook e tornado open source. Foi usado principalmente para criar interfaces de usuário (Facebook, WhatsApp e Instagram).

É altamente popular devido ao seu tamanho de código leve e sua capacidade de integração perfeita com outras estruturas. Ele também possui um método simples para migrar entre versões. (Geralmente uma migração com um clique).

É frequentemente usado em conjunto com o Redux para gerenciar o estado dos componentes do aplicativo. A Uber também faz uso da tecnologia React.js em seus produtos.

O React é uma boa opção para aqueles que estão apenas começando com frameworks front-end JavaScript, bem como start-ups e desenvolvedores ágeis. Além disso, esta biblioteca JavaScript oferece opções valiosas de integração com uma variedade de outros frameworks e tecnologias, o que é muito útil ao trabalhar em um projeto com um ambiente grande. De todos os frameworks SPA, o React tem mais contribuições no GitHub, que ajuda os desenvolvedores a solucionar problemas potenciais.

Ele tem a curva de aprendizado mais fácil dos 3 frameworks e é melhor usado para projetos com prazos curtos que exigem muita escalabilidade.

3. Vue.js

O Vue.js não pertence a uma grande empresa como Facebook ou Google, mas ainda está ganhando ritmo com novos usuários, especialmente na Ásia. É o mais novo dos frameworks SPA acima, tendo sido fundado em 2014 por Evan You, um ex-funcionário do Google. Muita documentação geralmente está em chinês, mas ainda existem fontes de treinamento.

A estrutura é muito leve e pode ser usada para simplesmente criar aplicativos de alto desempenho.

Para a maioria dos desenvolvedores, não há grandes problemas com a criação em nenhum desses frameworks, a decisão realmente se resume aos principais recursos de cada um.

O Vue.js agora é usado por empresas como Baidu, GitLab e Alibaba para suas necessidades.

Como funcionam os aplicativos de página única

Os SPAs têm um design simples. As tecnologias de renderização do lado do cliente e do lado do servidor são usadas.

Em um site não SPA, quando você insere uma URL em seu navegador, o navegador envia a solicitação para um servidor e recebe uma página HTML em resposta.

Em um site SPA, o servidor entrega apenas o documento HTML na solicitação inicial e os dados JSON nas solicitações subsequentes. Isso indica que um SPA reescreverá o conteúdo da página atual em vez de recarregar todo o site.

Em poucas palavras, um SPA funciona assim:

1. O cliente primeiro estabelece uma conexão com o servidor e obtém o conteúdo da página, que consiste principalmente em código HTML, CSS e um pacote JavaScript que inclui todos os scripts necessários para executar a lógica do aplicativo.
2. A ação de um usuário ativa a execução de JavaScript(s) relevante(s), que então fazem solicitações AJAX ao servidor. Os dados geralmente estão em um formato JSON e não exigem uma atualização completa da página da Web.

Em vez da técnica normal de um navegador iniciar uma página completamente nova, um aplicativo de página única interage com os usuários modificando à força páginas da web existentes com novos dados do servidor da web. O navegador recupera o código HTML, JavaScript e CSS necessário ou outros recursos apropriados e os adiciona às páginas conforme necessário.

Embora a API de histórico do HTML5 ou o hash de localização possam ser usados ​​para fornecer a navegabilidade e percepção de diferentes páginas lógicas no aplicativo da web, a página não recarrega a qualquer momento durante o procedimento e não transfere o controle para outra página.

Se você quiser ver um exemplo de aplicação de página única em ação, acesse este link e clique na página principal, na lista de cursos mais recentes e no menu superior. Ao fazer isso, você notará que a página não recarrega completamente, apenas novos dados são enviados pela rede à medida que o usuário se move pelo aplicativo.

Este é um exemplo de um SPA.

Para quem são os SPAs mais indicados?

Devido aos benefícios dos SPAs, eles agora são a solução preferida em muitas circunstâncias.

Eles se destacam em projetos que envolvem uma variedade de tecnologias da web, onde o desempenho e uma experiência de usuário agradável são mais importantes do que o conteúdo.

Existem muitos grandes players que usam SPAs. Facebook, Gmail, Google Maps, Netflix e Paypal são alguns dos exemplos mais proeminentes desse tipo de tecnologia (veja abaixo).

Por que o teste A/B é difícil em SPAs?

Todas as três estruturas – React.js, Angular.js e Vue.js – são muito populares entre os desenvolvedores de JavaScript porque permitem o desenvolvimento de interfaces de usuário sofisticadas que criam melhores experiências de usuário e taxas de conversão mais altas.

Eles são muito desejáveis ​​para desenvolvedores porque

• Não é necessário atualizar a página
• As velocidades de carregamento da página são mais rápidas
• As interações são ricas e fluidas
• As transferências de dados são reduzidas
• Peças reutilizáveis ​​permitem um desenvolvimento mais rápido
• A comunidade de desenvolvedores está bem estabelecida

Eles também são o recurso obrigatório para quem está iniciando um novo SPA.

No entanto, há uma grande desvantagem: devido à forma como essas estruturas funcionam, as ferramentas de teste A/B do lado do cliente lutam para funcionar corretamente .

Quando alguém navega em uma página da Web em um SPA, a página, incluindo a URL, não é atualizada . O status da página varia com cada interação do usuário (por exemplo, os diferentes elementos visíveis na tela).

Como as ferramentas de teste A/B normalmente fazem ajustes apenas uma vez durante o carregamento inicial da página, essas interações subsequentes não são levadas em consideração.

Aqui estão dois cenários comuns:

1. Se você tiver exibições de página habilitadas em seu SPA, receberá uma exibição de página quando alguém visitar uma URL, mas não uma segunda se navegar em uma página diferente em que as exibições de página estejam habilitadas. Isso ocorre porque o material está sendo carregado na página atual em vez de em uma nova página.
2. Se você tentar limitar um evento a um URL específico , terá o mesmo problema. A ferramenta de teste A/B “acreditará” que permanece na mesma página em que foi carregada pela primeira vez, mesmo que o usuário pense que está em uma página diferente. Como as peças são movidas para dentro e para fora do site, pode haver dificuldade em monitorar cliques ou outros eventos.

Para renderizar experiências, o software de teste A/B do lado do cliente e as plataformas de personalização dependem de carregamentos de página completos.

Como esse conceito está ausente ao usar estruturas SPA como React, Angular ou Vue, determinar se um novo conteúdo foi adicionado à página ou o status do conteúdo existente mudou – e, mais significativamente, quando injetar conteúdo personalizado – torna-se mais difícil.

Portanto, as ferramentas de teste A/B devem ser capazes de reconhecer o contexto do visitante, como se ele chegou a uma lista de produtos, detalhes ou página do carrinho e em que ponto o material novo deve ser fornecido.

Isso significa que a equipe de tecnologia precisa estar constantemente atualizada sobre a alteração dos componentes modulares React SPA ou Angular SPA, bem como atualizar as experiências que influenciam esses componentes em tempo real.

Cada interação do usuário no React.js, por exemplo, faz com que um ou mais elementos da interface do usuário sejam atualizados, excluindo quaisquer alterações feitas pela solução de teste A/B.

Teste do lado do cliente versus teste do lado do servidor em SPAs

Quando se trata de testes A/B em um SPA, existem duas opções:

1. Isolando os vários “estados” da aplicação que você deseja testar, então configurando-os para que quando cada “estado” for exibido, uma API seja chamada para fazer as devidas alterações. Isso é chamado de ativação condicional e é feito no lado do cliente .

Alguns exemplos de “estados” incluem mostrar um formulário de inscrição, carregar uma lista de resultados de pesquisa e assim por diante.

2. Codificar as modificações, no lado do servidor , ou uma implantação personalizada para cada nova experiência.

Ambas as opções são influenciadas pela estrutura SPA que está sendo usada. Então, como você deve ter adivinhado, eles exigem muita cooperação entre a equipe técnica e os profissionais de marketing para continuar funcionando bem.

Agora, vamos examinar essas duas opções e ver o que as equipes devem fazer para ter sucesso.

Ativação condicional no lado do cliente

Se você ainda precisar realizar testes do lado do cliente em um aplicativo SPA, há uma solução alternativa.

Para garantir que os scripts de teste sejam executados apenas quando o aplicativo atingir o estado desejado, os desenvolvedores da Web podem usar um recurso chamado modo de ativação condicional .

Se você não estiver familiarizado com a ativação condicional, é um conceito simples de entender.

A ativação condicional, em essência, oferece a capacidade de definir quando uma experiência deve ser ativada, exceto pelo método padrão de fazer isso em uma atualização de página.

Isso pode ser feito escrevendo um pouco de JavaScript. Existem duas maneiras de fazê-lo.

1. A Função de Pesquisa

A função de pesquisa é a maneira mais básica de usar a ativação condicional. A função varre a página a cada 50ms até que um elemento especificado apareça - isso pode ser um modal, div ou até mesmo a página inteira.

O experimento começa quando o elemento aparece.

A plataforma de teste A/B gera algumas linhas de JavaScript para você modificar dependendo de qual elemento você deseja que a função de pesquisa procure.

O experimento é ativado assim que a função for avaliada como TRUE .

2. A função de retorno de chamada

A execução da função de retorno de chamada é semelhante à da função de pesquisa, mas adiciona alguma flexibilidade.

Essa função permite que você insira qualquer condição JavaScript desejada e, se ela for avaliada como TRUE , para iniciar o experimento.

Enquanto a função de pesquisa constantemente faz ping na página para ver se um elemento especificado está presente, a função de retorno de chamada é mais passiva e depende de um manipulador de eventos.

Teste do lado do servidor

Quando você executa o teste do lado do servidor, nenhuma alteração é feita no nível do navegador. Em vez disso, os parâmetros de variação do experimento ("Usuário 1 vê a Variação A") são determinados no nível do servidor e conectados diretamente ao aplicativo JavaScript por meio de um provedor de serviços, facilitando o teste de conteúdo dinâmico e mais complicado que se estende além dos limites de um código estático. interface do usuário do site.

Veja, por exemplo, aplicativos de mídia social que são principalmente SPAs. Embora o teste do lado do cliente de front-end possa ser usado para experimentá-los, é muito mais complicado devido ao conteúdo dinâmico envolvido, portanto, mudar para o teste do lado do servidor torna o processo muito mais fácil.

Exemplos de testes A/B em SPAs

Quais são algumas instâncias do mundo real de testes A/B em aplicativos de página única que você pode encontrar?

Alterando uma imagem em uma página de destino

Digamos que você precise definir um experimento em um SPA para mostrar uma imagem dinâmica para 50% do público que acessou uma página específica. A estrutura SPA usada neste exemplo é React.js, o que significa que a página está mudando e as imagens estão sendo substituídas regularmente.

Se você exibir a imagem variante, podem ocorrer problemas de cintilação, o que significa que uma sequência de imagem original da variante da imagem original será observada.

Esse problema pode ser totalmente evitado acionando a pesquisa quando a página de destino específica for carregada.

Testando a cópia adicional abaixo do CTA

Outro experimento em um site SPA construído com Angular.js pode envolver a exibição de uma linha adicional de cópia abaixo do CTA principal para 30% do público-alvo.

Neste exemplo, a Versão A mostrará a linha adicional de cópia abaixo do CTA principal, enquanto a Versão B não. Enviaremos 30% do nosso tráfego para a Versão A e 70% para a Versão B e, em seguida, compararemos os resultados para ver se há uma diferença significativa nas taxas de conversão.

Como o site é construído com Angular.js, os elementos são alterados regularmente. O evento de retorno de chamada aqui pode nos ajudar a exibir as alterações na variante.

Exibindo um vale-presente

Neste exemplo, vamos supor que quando um usuário adiciona um produto de uma marca premium à sua cesta, queremos que um vale-presente exclusivo seja exibido. Com a condição de que quando o usuário retirar o produto premium da cesta, o voucher seja retirado da página.

1. O que precisa acontecer aqui é que quando um usuário executa a ação necessária, um evento de ativação manual deve ser enviado. A experiência será ativada como resultado deste evento.
2. Um evento de ativação deve ser acionado quando o usuário remove o produto premium da cesta, desativando o experimento.
3. O experimento precisa ser reativado para mostrar o produto premium caso o consumidor o adicione novamente.

Mostrando o slogan abaixo do CTA 'Compre agora'

Se você deseja exibir um slogan exclusivo abaixo de um botão de CTA 'Compre agora', você pode ativar o experimento se você enviar um evento de ativação na alteração do histórico.

Isso ocorre porque a página que contém o botão CTA 'Comprar agora' não será carregada inicialmente.

Como o Convert ignorou o problema de teste em SPAs

Experimentos em SPAs precisam ser tratados de forma diferente de outros experimentos. Como o script Convert não pode ler o URL que um visitante do site está navegando, ele não pode acionar experimentos com métodos padrão.

Então aqui está como é feito em vez disso.

Comece instalando o código de acompanhamento do Convert conforme descrito neste artigo.

Em seguida, aplique um dos 3 métodos abaixo:

1. Acionando a sondagem

Como mencionado, o polling é o processo pelo qual as condições da experiência são testadas para determinar se essa experiência deve ser acionada.

Isso inclui monitorar a URL do visitante, as condições do público-alvo ou as condições do JavaScript para executar o teste.

A pesquisa geralmente é acionada pelo Convert quando uma nova página é carregada. Em SPAs, geralmente, nenhuma nova página é carregada no aplicativo Web.

Nesse caso, você precisaria do seguinte código para iniciar a sondagem:

 window._conv_q = _conv_q || [];
window._conv_q.push(["executar","true"]);

Você deve determinar qual seria o melhor evento em seu SPA para acionar o código acima. Código de exemplo que deve ser adicionado na seção Configurações do projeto > JavaScript do projeto global.

 console.log('SPA/Converter Código no Javascript do Projeto Global executado');
if (!window.globalExecutedTs) {
window.globalExecutedTs = true;
var oldPushState = window.history.pushState;
window.history.pushState = function(data) {
tentar {
setTimeout(function(){
return oldPushState.apply(this, arguments);
console.log('converter ativado do pushstate');
window._conv_q = _conv_q || [];
window._conv_q.push(["executar", "true"]);
}, 0);
} pegar (e) {
console.log(e);
}
};
window.onpopstate = function(evento) {
setTimeout(function(){
console.log('converter ativado do popstate');
window._conv_q = _conv_q || [];
window._conv_q.push(["executar", "true"]);
}, 0);
};
}

2. Use as Condições JavaScript na Área do Site

Como o script Converter não pode ler alterações de URL em um SPA, você deve usar uma condição JavaScript em vez de uma condição de correspondência de URL para acionar um experimento.

Encontre uma explicação detalhada de como fazer isso no artigo a seguir.

3. Ative manualmente um experimento

Você pode acionar experimentos manualmente depois de determinar que um determinado fluxo ocorreu. Usando esse método, a Área do Site e as Condições do Público ainda serão testadas após o acionamento da sondagem com código. Consulte este artigo para obter informações mais detalhadas sobre como ativar manualmente uma experiência.

Com os 3 métodos acima, você poderá acionar experimentos no momento certo em um aplicativo SPA.

O Convert aumenta o risco de oscilação em SPAs?

Resposta curta, não.

Todos os frameworks SPA são compatíveis com a tecnologia anti-cintilação da Convert. O Convert aproveita a tecnologia SmartInsert ^TM nos bastidores para garantir que as modificações do experimento sejam aplicadas ou reaplicadas no momento apropriado em seu SPA, mesmo durante recargas dinâmicas de página.

Recomendamos a leitura de nosso whitepaper sobre o efeito de cintilação para saber mais sobre isso e por que você deve evitá-lo a todo custo.

Problemas comuns ao testar A/B em sites de aplicativos de página única

Como você pode ver, há algumas coisas a serem lembradas ao executar testes em sites SPA. Depois de abordar a estrutura usada, o método de teste da ferramenta e o evento de disparo, o principal problema geralmente é com o elemento de teste não recarregando quando uma nova página ou exibição é exibida no navegador.

Isso pode ser causado por algumas coisas:

1. Teste as alterações que aparecem na exibição da primeira página, mas não nas subsequentes

Às vezes, a alteração que você deseja exibir é exibida apenas na primeira página que você carrega no navegador, mas não nas visualizações subsequentes. Isso ocorre porque a parte do script Convert que avalia os experimentos e os ativa não é executada ao acessar uma nova visualização ou “página” do site.

2. As alterações que aparecem no Editor Visual não aparecem ao visualizá-las fora dele

Às vezes, pode acontecer que as alterações feitas com o Editor Visual não apareçam fora da visualização do editor.

A maioria das estruturas SPA não usa a API DOM e, em vez disso, usa seus próprios métodos para implantar as alterações na página. Isso faz com que o DOM fique fora de sincronia quando atualizado pelo SPA. Isso é comum em React e Angular, fazendo com que os seletores CSS encontrados no código Jquery não funcionem.

3. As alterações continuam aparecendo em 'Visualizações' subsequentes

Nesse cenário, uma alteração do experimento é exibida na visualização (página) correta. Mas, ao visitar novas visualizações (páginas), a alteração não desaparece. Isso acontece porque em um site SPA, as alterações não são removidas ao recarregar uma nova página.

O script Converter remove o código adicionado quando as condições do experimento não correspondem à visualização subsequente em que as alterações foram implantadas quando a pesquisa é chamada. No entanto, isso não é suficiente, pois as alterações do jquery não desaparecerão mesmo ao remover o código da experiência da página.

Você precisará executar um código que reverta as alterações trazidas pelo experimento.

Sua vez: evite esses erros ao otimizar seu SPA

Devido aos avanços na forma como as informações são processadas e fornecidas, os SPAs podem se tornar mais comumente aceitos, mas é crucial observar que essa nova tecnologia apresenta problemas ao se integrar a plataformas de otimização e experimentação, que normalmente funcionam com configurações mais clássicas.

Esperamos que este artigo tenha abordado os vários componentes dos SPAs, bem como algumas soluções para superar esses obstáculos em sua busca por proporcionar aos visitantes experiências digitais mais rápidas, intuitivas e personalizadas.

No entanto, será melhor trabalhar com um provedor de soluções que possa fornecer suporte contínuo para SPAs, como a capacidade de detectar alterações em componentes de interface do usuário e tipos de página para personalização dinâmica sem modificar o código-fonte. Como o da caixa abaixo.