Experimentação
Editor visual sem código
Selecione um elemento no seu próprio site no ar e mude-o no inspetor, ou insira uma seção pronta. A variante é salva; a página fica intocada.
Editor com IA
Descreva a mudança e veja tudo ganhar forma
Diga ao editor, com as suas palavras, o que você quer, ou aponte para um elemento e pergunte. A IA lê a página, propõe as mudanças e mostra uma prévia delas no seu site no ar. Nada é salvo até você aplicar.
- Uma palavra ou uma seção inteiraCorrija um título, ou refaça por inteiro um hero, um menu ou uma tabela de preços com um único prompt. Cada mudança aparece listada separadamente, então você fica só com as que quiser.
- JavaScript só quando precisaA maioria dos testes mexe em textos, estilos e markup, e é isso que a IA escreve. Quando um teste precisa reagir a alguma coisa, como um clique ou a rolagem da página, ela escreve o código também, e esse código passa por uma aprovação à parte.
- Ela lê a página por vocêA IA trabalha a partir de um resumo da página em que você está: a estrutura e os textos dela. Você descreve o resultado, e ela encontra os elementos que precisam mudar. Sem seletores, sem desenvolvedor.
- Uma prévia antes de salvar qualquer coisaAs mudanças propostas aparecem na sua página no ar, cada uma com a própria caixa de seleção. Ao aplicar, elas viram mudanças comuns na variante, que você pode desfazer até salvar.
- Experimentos de peso, sem códigoQuem consegue descrever uma página melhor consegue transformá-la em variante. A IA responde no idioma em que você escreve e mantém os textos da página no idioma original.
- Você vê o custo antesCada solicitação consome créditos de IA, e o painel mostra uma estimativa antes do envio. Valores de formulários e dados pessoais da página são mascarados antes de qualquer coisa ser enviada.
O editor abre no painel lateral do Chrome e carrega o seu site real dentro de um frame, então você aponta para o que quer mudar em vez de descrever isso em um ticket. Selecionar um elemento abre o inspetor: tipografia, espaçamento em um box model que você pode arrastar, tamanho, layout, fundo e borda, e uma busca em qualquer propriedade CSS que o navegador conhece. Cada mudança é registrada na variante que você está editando, nunca na página.
Uma chave Normal, Hover, Focus e Active estiliza os estados interativos de um elemento sem CSS, então um botão pode mudar de cor no hover na variante do jeito que mudaria na sua folha de estilos. O texto é editado onde está, com um duplo clique, e links, imagens (incluindo as imagens responsivas que a maioria das lojas Shopify usa), texto alternativo e rótulos de acessibilidade têm campos próprios.
As mudanças não se limitam ao que já está na página. A aba Add é uma biblioteca de blocos, layouts e mídia, de um hero ou um FAQ a uma barra de compra fixa no celular, e cada um assume as fontes e as cores do próprio site onde é colocado. Qualquer texto em uma mudança pode carregar os dados da própria página, então uma única mudança pode mostrar o preço de cada produto.
Uma lista de mudanças mostra tudo que a variante faz em palavras simples (Moved, Added button, Heading text), com desfazer e refazer confiáveis, e as edições feitas enquanto um salvamento está em andamento são mantidas. Essa lista é a variante. É o que é aplicado na página do visitante, e o que o repasse de implementação depois lê para dizer a um desenvolvedor o que fixar no código.
O editor em resumo
Uma tela para tudo o que um teste muda
Layers e componentes à esquerda, a sua página no ar no meio, o inspetor à direita. Cada seção abaixo é uma parte dele, mostrada em funcionamento.
Painel lateral do Chrome
Abra o editor direto da página que você está vendo
A extensão se encaixa no painel lateral do Chrome, ao lado do site, e acompanha a aba em que você está. Ela identifica o site, lista os experimentos dele e abre o editor nesta página, e não na página em que o teste começou.
- Ocupa a altura toda, é redimensionável e continua aberta quando você clica na página
- Filtre por status, ou busque por nome ou número do experimento
- Pede acesso a um site uma vez só, na primeira vez que você abre o editor nele
Biblioteca de componentes
Adicione uma seção inteira, não só uma cor nova
Arraste um bloco da aba Add para a página, e uma linha azul mostra onde ele vai ficar antes de você soltá-lo. Ele chega com a fonte e os tamanhos de título do próprio site, com a cor de destaque tirada de onde você o soltou.
- Doze blocos, de um hero e um FAQ a uma barra fixa e um pop-up
- Seções, contêineres e colunas que se empilham no celular
- Vídeo, um slider de imagens e uma galeria, com o YouTube tocando pelo player sem cookies
Conteúdo dinâmico
Crie uma vez e cada página preenche os próprios dados
Insira dados da página em qualquer texto, link ou imagem, escolhidos em uma lista com os valores reais da página. Um banner criado uma vez recebe cada visitante citando a campanha de onde ele veio; em uma loja, uma barra fixa mostra o nome e o preço de cada produto.
- Dados de campanha, visitante e data em qualquer site, sem configuração
- Dados de produto, preço e carrinho em lojas, na moeda da própria página
- Dados ausentes escondem o elemento, ou mostram uma alternativa que você escolhe
Feeds de dados
Dados dos seus próprios sistemas, dentro do teste
Conecte um feed que o site já publica, como avaliações, datas de eventos, textos de campanha ou um feed de produtos do Google Merchant, escolha qual item cada visitante vê, e marque os campos que uma página pode mostrar. Os servidores do Pertento buscam o feed periodicamente, então os visitantes nunca esperam pelo seu servidor.
- Faça o item corresponder ao endereço da página, a um parâmetro de URL, à campanha ou ao produto
- Ou mostre o item programado para agora, para promoções com prazo
- Só os campos que você marca chegam ao visitante
Inspetor e estados
Estilize hover, focus e active sem escrever CSS
O inspetor edita o que você selecionar: tipografia, espaçamento em um box model, tamanho, layout, fundo e borda. Uma chave Normal, Hover, Focus e Active estiliza os estados interativos, então a cor de hover de um botão também faz parte da variante.
- Busque qualquer propriedade CSS que o navegador conhece, com Reset em cada campo
- Links, imagens responsivas, texto alternativo e rótulos de acessibilidade
- Cada edição de estado é uma mudança comum, com desfazer e salvar
Texto direto na página
Reescreva um título onde ele está
Dê um duplo clique em qualquer texto da página e digite. Negrito, itálico e sublinhado funcionam como em um documento, e quando você clica fora a edição vira uma mudança comum que o desfazer restaura com exatidão.
- Negrito, itálico e sublinhado pelo teclado, Shift+Enter para quebra de linha, Escape para cancelar
- Funciona no texto e no markup inline dentro dele
- Listada nas mudanças em palavras simples, como Heading text
Todas as correspondências
Mude todos os elementos correspondentes de uma vez, incluindo os que carregam depois
Use um seletor CSS como alvo e adicione estilo ou HTML a tudo o que ele encontra. Elementos que chegam depois por rolagem infinita, carrosséis ou navegação dentro do app também recebem a mudança, uma vez cada.
- Anexar, inserir, antes, depois ou substituir
- Uma contagem ao vivo de quantos elementos correspondem
- Select similar faz o mesmo só apontando, para todo elemento parecido com o que você escolheu
Mudanças e salvamento
Cada mudança listada, em palavras que você entende
Cada edição é listada em palavras simples, como Moved, Added button ou Heading text, com desfazer e refazer confiáveis. As edições feitas enquanto um salvamento está em andamento são mantidas, um salvamento que falhou pode ser tentado de novo, e fechar pede confirmação antes.
- Reverta qualquer mudança individual direto na lista
- CSS e JavaScript globais no topo, com o número de linhas de cada um
- Uma mudança cujo elemento não está na página é marcada, não escondida
Pré-visualize em qualquer lugar
Veja a variante em um celular de verdade
As pré-visualizações por aparelho mostram os tamanhos de desktop, tablet e celular dentro do editor. Para ver de verdade, Preview on another device gera um link que abre a variante salva em qualquer celular ou navegador, e um segundo link que devolve esse navegador ao normal.
- Os tokens de login são removidos do link, então ele é seguro para compartilhar
- Mostra as mudanças salvas enquanto o experimento está rodando nessa página
- Abre em qualquer navegador, não só no Chrome
Código quando você quiser
HTML, CSS e JavaScript, com os mesmos dados da página
Tudo o que as ferramentas visuais não conseguem expressar é escrito como código na variante. Edite ou adicione HTML em volta de um elemento, ou escreva o CSS e o JavaScript globais da variante, e leia os dados da página com pertento.data().
- Insert page data adiciona um token ao HTML
- Read page data adiciona uma chamada pertento.data() ao JavaScript
- O CSS e o JavaScript globais podem ser apagados por completo
Atalhos de teclado
Atalhos de teclado para as ações que você repete
Os atalhos funcionam assim que você clica em um elemento da página, e a lista completa abre pelo ícone de teclado na barra de ferramentas do editor.
- Salvar
- ⌘SCtrl+S
- Desfazer
- ⌘ZCtrl+Z
- Refazer
- ⇧⌘ZCtrl+Y
- Editar HTML
- E
- Duplicar
- D
- Ocultar, mantendo o espaço
- H
- Adicionar elemento
- A
- Remover elemento
- ⌫
- Selecionar elemento pai
- ⇧↵
- Mover para cima ou para baixo
- ⌥↑⌥↓
- Abrir o menu do elemento
- ⇧F10
- Editar texto direto na página