Plataforma · Experimentação

Três tipos de teste, um único editor visual

Testes visuais multivariantes, redireccionamentos de URL e testes do lado do servidor, lançados directamente a partir de uma extensão do Chrome no seu site ao vivo. Aponte a um elemento, altere-o, guarde a variante.

Como um teste corre

De uma hipótese a uma alteração publicada

Quem a vê, o que correr a seguir, e o que a engenharia recebe quando termina.

  • Edição sem código de texto, estilo, disposição e posição, mais CSS e JS personalizados para utilizadores avançados
  • Segmentação por URL, dispositivo e cookie, com atribuição persistente para que os visitantes que regressam vejam uma experiência consistente
  • Renderização anti-flicker com quatro salvaguardas independentes, para que os visitantes nunca vejam a página original a piscar antes do teste
  • Cada visitante elegível entra em cada teste elegível, pelo que correr dez testes ao mesmo tempo não custa dimensão de amostra alguma
  • Publicação do vencedor num clique para 100% do tráfego, e uma entrega de implementação para fixar vencedores no código
  • Registo de hipóteses com pontuação de priorização PXL para ordenar o seu backlog
MultivarianteRedireccionamento de URLDo lado do servidor
A biblioteca de testes: cinco testes nos três tipos, com a sua divisão de tráfego e a janela de segmentação, um a correr, um à espera de uma decisão e um já publicado.

Segmentação

Mostre-o exactamente a quem pretendia

Três dimensões, combinadas por teste: o endereço, o dispositivo, e um cookie que o seu próprio site já define. A atribuição é persistente, pelo que um visitante que regressa mantém a variante que lhe foi dada.

  • Regras de URL em sete condições, incluindo regex e duas negativas
  • Computador, telemóvel ou tablet, detectado antes de o visitante entrar
  • Segmentação por cookie para tráfego autenticado ou segmentado, comparado com uma lista de valores
  • Atribuição persistente, guardada no armazenamento do navegador em vez de num cookie
  • Force qualquer variante por URL para a rever, sem conta de teste
As regras de segmentação de um teste: páginas de produto no telemóvel, excluindo a secção de outlet, para visitantes cujo cookie de fidelização os marca como membros, com atribuição persistente, admitindo 61% do tráfego.

A publicar o vencedor

Um clique para 100%, ou uma entrega à engenharia

Publique a variante vencedora para todo o tráfego a partir da página de resultados. Quando deve antes viver na base de código, o Pertento escreve a entrega com a alteração exacta.

  • Publicação num clique, com registo de quem a publicou
  • Entrega de implementação com o selector e a alteração
  • Reverta para o original a qualquer momento
O ecrã de publicação: a variante B publicada para todo o tráfego, com o nome de quem a publicou, a data e a hora e reversão disponível, ao lado da entrega que indica o selector, o texto e a cor a fixar no código.

Priorização

Um backlog ordenado pela pontuação PXL, não pela opinião

Registe cada hipótese, pontue-a no modelo PXL, e deixe a ordenação decidir o que corre a seguir. As três pontuações resolvem-se num único número, porque um backlog precisa de ser ordenável e três números são uma discussão.

  • Potencial, exposição e nível de esforço, pontuados de um a cinco cada
  • Resolvidos numa única importância de zero a dez, pela qual a lista se ordena
  • Hipóteses ligadas ao teste que as testou
  • O rascunho com pontuação mais alta é destacado quando mais nada precisa de si
O backlog de hipóteses ordenado pela pontuação PXL, de um botão fixo de adicionar ao carrinho com 9,4 até um vídeo no hero com 3,2.

Implementação

Entregue o vencedor à engenharia, com a alteração

Um vencedor pode continuar a ser servido pelo Pertento indefinidamente, mas a maioria das equipas acaba por o querer na base de código. O painel de implementação regista quais os vencedores que ainda correm na plataforma e quais já foram fixados no código.

  • O selector e a alteração exacta, pronta a colar
  • Estado por vencedor: a aguardar, em curso, fixado no código
  • O teste continua a servir até o código ir ao ar
O painel de implementação: cinco vencedores com o seu estado, e a entrega de um deles a indicar o selector, a alteração, se o Pertento continua a servi-la, e o ticket.

Pipelines · beta

Decida a ordem, depois deixe de agendar à mão

Uma pipeline é uma sequência ordenada de etapas, e uma etapa é um conjunto de testes que corre em conjunto. Testes que colidiriam entram em etapas diferentes e cada etapa corre a tráfego completo por sua vez, o que é o oposto de os tornar mutuamente exclusivos e dividir a audiência.

  • As etapas armam-se por ordem, pelo que nada fica à espera de alguém se lembrar
  • Avance quando todos os testes concluem, no primeiro resultado significativo, ou por decisão de uma pessoa
  • Uma etapa arma-se toda ou nenhuma, pelo que uma etapa a meio nunca fica presa em execução
  • Automatização e publicação automática são interruptores separados, ambos desligados até os ligar
  • Com a automatização desligada o motor continua a registar o que teria feito, usando o mesmo código
Um quadro de pipeline com quatro etapas: a etapa do checkout concluída, dois testes de página de produto a correr em conjunto na etapa actual, e duas etapas seguintes pendentes, com a automatização ligada e a publicação automática desligada.

Editor visual

Aponte, altere, guarde a variante

O editor abre sobre o seu site ao vivo a partir de uma extensão do Chrome. Seleccione um elemento, edite o seu conteúdo e o seu estilo no painel de propriedades, e a alteração fica guardada na variante. Sem publicação, sem ticket, sem uma cópia da página em staging.

TextoEstiloDisposiçãoPosiçãoCSS/JS personalizado
PDP Mobile — Sticky CTA + selector /V-1Save
FREE DELIVERY OVER €504.7 ★★★★★  ·  27,726 reviewsFind a store
NORTHWINDHi, what are you looking for?Sign in
WOMENMENKIDSFOOTWEAREQUIPMENTHOMEHUNTINGNEWSSALE
Storefront hero · 1200×472
AUTUMN ARRIVALS ARE HERE
Shop the new seasonShop autumn arrivalsa.cta
Product
NEW
Art 4176Trail trouser, men€39
Product
NEW
Art 5038Fleece shirt, men€29
Product
COLOUR
Art 1520Bamboo tee, menFrom €10
Product
NEW
Art 4177Trail trouser, women€39
Properties
bodydivmaindivsectiona
a.cta
Typography
Text content
Shop autumn arrivals
Font family
sans-serif
Font size
13px
Text colour
#111827#c81e28
Text align
center
Spacing
Size
Background
Border
Position
Content
Changes3 changes

Uma árvore de hierarquia e um campo de selectorpara as vezes em que apontar não é suficientemente preciso, com um caminho que mostra exactamente que nó está seleccionado.

Um interruptor de interactividadealterna entre seleccionar elementos e usar a página, para que possa abrir um menu ou um modal e depois editar o que está lá dentro.

Um selector de dispositivoreenquadra a vista nas larguras que o seu tráfego usa. Uma variante que só funciona à largura de um computador não está terminada.

Uma lista de alteraçõesé a variante: um registo ordenado de tudo o que ela faz, com cada entrada removível por si só, e é a mesma lista que a entrega depois lê.

Mais sobre o editor visual · Como a extensão o abre

A construir o teste

As partes que tornam um segundo teste mais barato do que o primeiro

A maior parte do tempo de um programa não é gasta no primeiro teste. É a reconstruir uma configuração, a verificar uma variante antes de ir ao ar, e a manter um registo que alguém consiga ler no próximo ano.

Cinco colocações de HTML

Substituir um elemento, inserir dentro dele numa das extremidades, ou colocar markup antes ou depois dele. As alterações estruturais continuam a poder ser descritas numa linha, e é isso que as torna revisíveis mais tarde.

CSS e JavaScript personalizados

Por variante, para tudo o que o painel de propriedades não consegue expressar. Vai dentro do bundle construído para o seu site e corre antes de a página ser revelada, pelo que uma alteração feita por script nunca é lida como um salto.

Capturas das variantes

Capture e recorte o aspecto que a variante tinha, de dentro do editor. Um resultado lido seis meses depois é uma lista de selectores sem uma.

Duplicar um teste

Copia as variantes, cada alteração nelas, as capturas e os três tipos de segmentação. Voltar a montar uma configuração à mão é onde a regra de segmentação errada acaba publicada.

Ensaios antes do lançamento

Ensaie toda a cadeia contra o runtime real como um teste marcado, e depois apague-o. Nada do que um ensaio recolheu tem alguma vez de ser justificado num relatório.

Forçar uma variante por URL

Acrescente um parâmetro a qualquer endereço para se fixar a uma variante específica, ou para ver uma variante com tudo o resto no original. A revisão a olho não precisa de conta de teste.

Enquanto corre

O que o runtime está a fazer nas páginas dos seus visitantes

Tudo o que se segue é decidido no navegador, a partir de um ficheiro compilado só para o seu site. Não há chamada ao Pertento antes de a página desenhar, nem nada à espera de uma resposta para decidir o que um visitante vê.

A concorrência não lhe custa nada

Cada visitante elegível entra em cada teste elegível, pelo que dez testes no ar recebem cada um a audiência completa em vez de um décimo dela. A razão por que a maioria dos programas corre um teste de cada vez não se aplica aqui.

Pesos que somam sempre

As divisões são guardadas em pontos base sobre dez mil e validadas para somarem exactamente, pelo que um teste a três é genuinamente três terços iguais e não três arredondamentos e uma falha.

Reequilíbrio automático

A divisão que cada variante recebeu de facto é medida e corrigida periodicamente, pelo que a alocação acumulada converge para a que configurou em vez de se afastar dela.

Atribuição persistente, sem cookies

Um visitante mantém a variante que lhe foi dada, guardada no armazenamento do navegador e não num cookie. A consistência é um requisito de correcção antes de ser uma cortesia.

Anti-flicker com quatro salvaguardas

A página fica oculta enquanto as alterações se aplicam e é revelada a partir de quatro caminhos de código independentes. A falha contra a qual isto está desenhado é um site de cliente deixado em branco para os seus próprios visitantes.

Nenhuma ida e volta antes de desenhar

A configuração de cada site é compilada no seu próprio ficheiro estático, pelo que o runtime já sabe o que correr quando carrega. Nada espera por uma chamada à API para decidir o que o visitante vê.

Perguntas

O que as equipas perguntam antes de mudarem

Quanto tempo até podermos ter um teste a correr?

Uma etiqueta de script no head é toda a instalação, e é a única alteração ao seu site. A partir daí uma variante constrói-se apontando elementos nas suas páginas em produção, pelo que o primeiro teste é limitado pelo tempo que levarem a decidir o que testar e não por algo que tenha de ser adquirido, construído ou agendado. Nada vai ao ar por acidente enquanto estão a aprender: um teste novo é um rascunho até o iniciarem.

Vai tornar o site mais lento ou prejudicar os nossos Core Web Vitals?

Cada site recebe o seu próprio ficheiro compilado com os seus testes já incorporados, pelo que o runtime já sabe o que correr quando carrega e nada espera por uma chamada a nós antes de a página desenhar. A página é retida por um instante enquanto as alterações se aplicam, que é o que impede os visitantes de verem o original a surgir antes do teste, e é revelada a partir de quatro caminhos de código independentes, pelo que uma falha mostra a página não modificada em vez de uma página em branco. O tracking carrega em último lugar, depois de a página estar visível, pelo que a medição nunca atrasa o desenho.

O que consegue o editor realmente alterar, e onde é que pára?

Texto, estilo, disposição e posição editam-se apontando, e as alterações estruturais estão cobertas por cinco colocações de HTML sobre um elemento que escolhe. Passado isso, pára com honestidade em vez de parar mal: tudo o que o painel não consegue expressar escreve-se como CSS ou JavaScript personalizado na variante, o que significa que um teste nunca fica bloqueado pela ferramenta. O limite genuíno é uma alteração que acontece antes de a página existir: ordenação, lógica de preços, um modelo de recomendação. Esses são testes do lado do servidor, e exigem os seus programadores.

Quantos testes podemos correr ao mesmo tempo?

Tantos quantas ideias tiverem, e esta é a resposta que vale a pena confrontar com o que usam hoje. Cada teste distribui de forma independente, pelo que um visitante elegível entra em todos os testes para que se qualifica e cada um deles mede face à audiência elegível completa. Aqui a concorrência não divide a sua amostra, e é por isso que a plataforma verifica se dois testes interferem entre si em vez de racionar quantos podem correr. O ritmo é normalmente a diferença entre um programa que se paga a si próprio e um que não.

O que acontece ao trabalho se deixarmos de usar o Pertento?

Os vencedores que fixaram no código já estão na sua própria base de código e não são afectados, e é para isso que a fila de implementação existe, para os empurrar nessa direcção: lista cada vencedor que continua a ser servido por nós e continua a sinalizá-lo até os seus programadores terem espaço. Os vencedores ainda servidos pela plataforma param quando ela para, do mesmo modo que qualquer variante para. Os testes, as hipóteses e o histórico escrito ficam na conta e não em ferramentas nossas.

Tudo o que vem incluído

O conjunto completo de funcionalidades

O Pertento é uma plataforma de optimização da taxa de conversão para sites e lojas online, feita tanto para equipas internas como para agências de CRO que conduzem programas de experimentação numa carteira de clientes.

Integrações

Funciona com a stack que já tem

Um snippet entra em qualquer site, ou vá totalmente para o servidor. Nada para rearquitectar.

Um snippet de uma linha

Cole uma única etiqueta de 0,9 KB no seu head e está ao vivo. Sem passo de compilação, sem dependências.

Google Tag Manager

Publique e gere os testes directamente através do GTM. Sem necessidade de tempo de programador.

API do lado do servidor

Corra testes para além do navegador: preços, pesquisa e encaminhamento, sem piscar.

  • Shopify
  • BigCommerce
  • Shopware
  • Centra
  • Geins
  • Saleor
  • WordPress
  • Optimizely CMS
  • Storyblok
  • Next.js
  • Vue
  • Astro
  • Matomo
  • Amplitude
  • RudderStack
  • Slack
  • WooCommerce
  • Salesforce
  • Wix
  • Litium
  • commercetools
  • Medusa
  • Drupal
  • Contentful
  • Webflow
  • Nuxt
  • Angular
  • Remix
  • Piwik PRO
  • Mixpanel
  • Tag Manager
  • Webhooks
  • Adobe Commerce
  • PrestaShop
  • Squarespace
  • Norce
  • Shopify Hydrogen
  • Vendure
  • Umbraco
  • Sanity
  • Framer
  • React
  • SvelteKit
  • GA4
  • Adobe Analytics
  • Segment
  • Klaviyo

Não está na lista? Se gera HTML, o Pertento consegue testá-lo:leia como cada uma se liga.

Melhores testes, melhores conversões

Test on all visitors with the world’s lightest script and make confident decisions powered by real-time reporting.