Segmentação de páginas
Resumidamente
Com a ajuda da segmentação de páginas, podes determinar em quais páginas do teu site um experimento é exibido. Nas configurações do experimento, encontrarás várias opções em „Page targeting“ para controlar a exibição com base em regras. Uma segmentação de páginas configurada corretamente também é um pré-requisito para iniciar um experimento.
Opções de segmentação de páginas
Com a ajuda de regras em Page Targeting, você determina em quais páginas ou tipos de página os visitantes se tornam participantes do experimento. Vários métodos estão disponíveis para identificar páginas de forma única. Um experimento só é executado se as condições definidas forem atendidas.
Também é possível vincular várias regras entre si e usar condições AND e OR.
| Método | Quando faz sentido |
|---|---|
| URL rules | Se as páginas podem ser claramente distinguidas por domínio, caminho ou parâmetros ou se apenas uma URL específica deve ser segmentada. |
| Regex | Se várias URLs semelhantes devem ser cobertas com um padrão. |
| CSS selector | Se você deseja segmentar várias páginas que não podem ser claramente distinguidas por meio de URL rules, mas compartilham um elemento único. |
| JavaScript | Se você precisar de condições complexas que vão além de URL e DOM, por exemplo, lógica, estados ou entradas de DataLayer. |
Podes usar regras para definir as páginas ou tipos de página nos quais os teus visitantes se tornam participantes da experiência. Tens várias opções para identificar páginas.
O uso do CSS Selector é útil se quiseres direcionar várias páginas, mas estas não podem ser claramente identificadas através de regras de URL.
Podes usar JavaScript para definir regras de segmentação mais complexas. Por exemplo, também tens a opção de verificar entradas especiais do DataLayer.
Correspondência de URL
Com o URL Match, usas regras de URL para definir as páginas nas quais a tua experiência é exibida. Podes combinar várias regras de URL e definir quais devem aplicar-se e quais devem ser excluídas.
Vinculação de várias regras de URL
Podes criar várias regras de URL ao mesmo tempo e vinculá-las entre si. Usa o símbolo de mais para adicionar mais regras. Usa „corresponde“ ou „não corresponde“ para especificar se o experimento deve ser exibido nos URLs especificados ou excluído.
Se quiseres mapear regras mais complexas, podes combinar várias correspondências de URL. Por exemplo, podes especificar que um experimento é exibido em https://www.demo.de, exceto em https://www.demo.de/impressum.
tipo de correspondência
À direita do campo de entrada, você pode especificar o tipo de correspondência da sua condição de segmentação. Dependendo da seleção, a URL no campo de entrada ao lado é verificada quanto a várias condições. Você tem as seguintes condições para escolher:
- Simple Match
- Correspondência Exata
- Contém
- Regex
As condições de segmentação com exemplos de aplicação são explicadas em mais detalhes abaixo.
Correspondência Simples
Com o Simple Match, todos os URLs inseridos são segmentados, incluindo os parâmetros de URL associados.
No exemplo seguinte, podes ver quais variantes de URL são consideradas correspondências para o URL www.demo.de na segmentação de página «Simple Match»:
| URL | A segmentação aplica-se |
|---|---|
| www.demo.de | ✅ aplica-se |
| www.demo.de#about | ✅ aplica-se |
| www.demo.de?color=red | ✅ aplica-se |
| www.demo.de/category | ❌ não se aplica |
| www.demo.com | ❌ não se aplica |
| subdomain.demo.de | ❌ não se aplica |
Se quiseres segmentar várias páginas, tipos de página ou subdomínios ao mesmo tempo, podes usar regex para isso. Em alternativa, a segmentação também é possível através de um seletor CSS, por exemplo se um elemento específico estiver presente na página. Continua a ler.
Correspondência Exata
Usa a condição «Correspondência Exata» se a segmentação de página deve aplicar-se apenas a um URL específico, ou seja, sem parâmetros de URL.
No exemplo seguinte, podes ver quais variantes de URL são consideradas correspondências para o URL www.demo.de na segmentação de página «Correspondência Exata»:
| URL | A segmentação aplica-se |
|---|---|
| www.demo.de | ✅ aplica-se |
| www.demo.de#about | ❌ não se aplica |
| www.demo.de?color=red | ❌ não se aplica |
| www.demo.de/category | ❌ não se aplica |
| www.demo.com | ❌ não se aplica |
| subdomain.demo.de | ❌ não se aplica |
Contém
Usas a condição de segmentação de página „Contém“ se quiseres direcionar várias páginas de um grupo específico. O pré-requisito é que as páginas possam ser delimitadas usando uma estrutura de URL consistente. Por exemplo, se quiseres testar apenas páginas de produtos, podes usar „Contém“ com „/products/“ para direcionar exatamente essas páginas. A expressão especificada deve aparecer pelo menos uma vez, na íntegra, na URL.
Claro que “Contém” também pode ser usado para direcionar todo o site (como https://www.demo.com) — por exemplo, para um teste A/A. Para isso, basta introduzir o domínio do teu site.
No exemplo seguinte podes ver diferentes variantes de URL onde a segmentação de página „/products/“ se aplica.
| URL | Targeting applies |
|---|---|
| www.demo.com | ❌ não se aplica |
| www.demo.com/products | ❌ não se aplica |
| www.demo.com/products/t-shirts | ✅ aplica-se |
| www.demo.com/products/pants | ✅ aplica-se |
| www.demo.com/blog/products-reviews | ❌ não se aplica |
| www.demo.com/blog/products/tests | ✅ aplica-se |
Expressões Regulares (Regex)
As expressões regulares permitem direcionar os teus testes A/B para páginas individuais específicas ou grupos de páginas. Em muitos casos, isto é mais preciso do que as condições de targeting apresentadas acima.
Esta opção destina-se principalmente a utilizadores avançados que já têm experiência com regex ou que querem mapear regras muito precisas. Para facilitar o teu início, criámos este guia sobre targeting de páginas com regex. Em muitos casos, é suficiente copiar um dos nossos exemplos e simplesmente substituir o teu próprio URL.
Para validar as tuas expressões regulares podes usar editores de regex como regexr.com.
Exemplo de criação de uma regex
Na Plomo-o-Plata, em todas as páginas de detalhes do produto na categoria Outlet Sale, os preços de venda serão exibidos em vermelho. As páginas de detalhes do produto em outras categorias devem permanecer inalteradas.
Ao usar regex no URL targeting, você tem a possibilidade de mapear explicitamente essa condição de targeting.
Como exemplo, aqui você pode ver um URL que está localizado na categoria Outlet Sale.
A estrutura dos URLs é a mesma para todas as páginas de detalhes de produto que podem ser encontradas nesta categoria:
https://plomo-o-plata.de/collections/plomo-o-plata-outlet-sale/products/…
Na tabela Useful use cases encontrarás regexes predefinidas que podes aplicar à estrutura de URL do teu website usando este exemplo. No nosso caso, aplica-se o caso de uso 3.
-> Targeting de todas as páginas que são www.demo.de/category/ após o caminho.
-> ^.*www.demo.de/category/.+
Primeiro, vamos a https://regexr.com/ e transferimos o caso de uso semelhante.
Podemos agora usar este caso de uso como guia e aplicá-lo ao nosso exemplo da Plomo-o-Plata.
Na captura de ecrã podes ver como personalizámos o regex para o nosso caso de uso. Como o URL da Plomo-o-Plata tinha mais dois diretórios do que o caso de uso, estes foram adicionados de forma análoga ao exemplo do caso de uso. Outra ferramenta muito útil para definir regex é: https://www.autoregex.xyz/ Aqui podes definir em inglês quais os tipos de página que devem ser alvo. A ferramenta converte esta especificação num regex.
Casos de uso úteis
| Caso de uso | Página de exemplo | Expressão Regular |
|---|---|---|
| Targeting de exatamente uma página | www.demo.de/product-list | ^.*www\.demo\.de\/product-list$ |
| Targeting de exatamente uma página incl. anchor links, parâmetros e „/“ opcional | www.demo.de/?utm_source=google_cpc | ^.*www\.demo\.de(#.*|\/#.*|$|\/$|\/\?.*) |
| Targeting de todas as páginas dependentes do caminho www.demo.de/category/ | www.demo.de/category/product | ^.*www\.demo\.de\/category\/.+ |
| Targeting global de uma página sem „www.“ | demo.de/ | ^.*demo.de\/.* |
| Targeting global em todo o domínio www.demo.de/ | www.demo.de/ | ^.*www\.demo.de\/.* |
| Targeting num subdomínio blog.demo.de/ | blog.demo.de/category/article | ^.*blog\.demo.de\/. |
| Targeting em todo um domínio incl. subdomínios demo.de/ | blog.demo.de/category/article www.demo.de/category/product | ^.*demo.de\/.* |
| Targeting em duas categorias de produtos específicas | www.demo.de/shirts/product www.demo.de/pants/product | ^.*www\.demo.de\/(shirts|pants)\/.* |
Seletor CSS
Faz apenas o targeting de páginas ou tipos de página nas quais está presente um elemento específico com um seletor CSS único. Isto é particularmente útil se as páginas não puderem ser distinguidas de forma fiável através de regras de URL. Exemplo: Queres fazer targeting de todas as páginas de detalhe de produto da tua loja, mas a estrutura do URL não contém uma referência clara como „/products/“. Neste caso, podes usar um elemento que só aparece nas páginas de detalhe de produto, por exemplo o botão „Adicionar ao carrinho“. De seguida, guardas o seletor CSS para este elemento no Page Targeting.
A forma mais fácil de encontrar um seletor CSS adequado é diretamente no editor visual da Varify: abre uma página adequada, clica no elemento que aparece apenas neste tipo de página e copia o seletor CSS apresentado. Podes depois inserir isto em Page Targeting em «CSS Selector».
JavaScript
Para page targeting mais complexo, podes usar JavaScript. Desta forma, também podes procurar por quaisquer tags ou atributos no DOM do teu site. O JavaScript também permite verificar dados de variáveis da data layer.
Exemplo de aplicação - Entrada no data layer
Para direcionar apenas utilizadores que têm um determinado parâmetro ou um determinado valor no data layer, podes navegar através do data layer. No exemplo seguinte, apenas os utilizadores que visualizaram anteriormente um produto específico com ID 1111 ou ID 2222 são direcionados.
Exemplo de código - Data Layer Targeting
return dataLayer?.some(item => item?.ecommerce?.checkout?.products?.[0]?.id==='1111' || item?.ecommerce?.checkout?.products?.[0]?.id==='2222');
Configurações Avançadas
Limpeza do experimento na alteração de URL
Websites que recarregam conteúdo dinamicamente - como single page applications (SPAs) ou lojas online que oferecem várias variantes de produto na página de detalhes do produto - comportam-se de forma diferente das páginas estáticas tradicionais. Com páginas estáticas, todo o conteúdo é completamente recarregado sempre que o URL é alterado. Com SPAs e websites dinâmicos semelhantes, por outro lado, apenas o conteúdo que muda é atualizado.
Comportamento com alterações de URL
Por padrão, o Varify realiza uma reinicialização da reprodução da variante sempre que o URL é alterado, ou seja, todas as variações na página são reiniciadas, o URL é verificado novamente e todas as variações aplicáveis para o novo URL são reaplicadas.
Desativação da função padrão
Desativar a função "Cleanup Experiment on URL change" pode ser particularmente útil em páginas de produto em lojas online onde podes selecionar diferentes variantes de produto, como cores. Com essa seleção, o URL pode mudar para refletir a cor selecionada. No entanto, se houver uma variação relacionada a conteúdo que não muda (por exemplo, o botão "Add to cart"), não seria desejável eliminar e reaplicar essa variação. Isto poderia levar a efeitos indesejáveis, como o tremor da tela.
Reaplicar Experimento em Alteração do DOM
Quando a configuração está ativada, o DOM do site é monitorado permanentemente para garantir que a otimização da variante permaneça ativa. Se a otimização for sobrescrita por scripts ou elementos de página do site, o sistema detecta isso e reaplica a otimização. Isso pode acontecer, por exemplo, ao filtrar por determinadas variantes de produto.
Se a configuração estiver desativada, a otimização é aplicada apenas uma vez - não ocorre monitoramento contínuo.