Testes de Redirecionamento e Split URL

Última atualização em 22 de abr. de 20264 min de leitura

Índice

• Resumindo
• Método 1: Criar teste de redirecionamento no editor
• Método 2: Definir redirecionamento via JavaScript
• Configurar o direcionamento de página
• A variante de redirecionamento cria um loop infinito
• Avaliação do teste de URL dividido
• Avaliação no GA4

Resumindo

Com a funcionalidade de redirecionamento, podes redirecionar utilizadores que chegam de uma ou mais páginas para outra página. Se usares esta funcionalidade num teste A/B, podes realizar um «teste de redirecionamento». Isto permite-te, por exemplo, testar a tua página atual contra uma nova versão da página que está acessível através de uma URL diferente.

Em princípio, tens dois métodos disponíveis para realizar um teste de redirecionamento.

Método 1: Criar teste de redirecionamento no editor

Step-by-Step TutorialCreate a split URL test with Varify.ioStart tutorial

Este método só é adequado se quiseres encaminhar exatamente um site para outro site.

Cria uma nova variante e clica no ícone “Redirect URL”. Depois insere o URL para o qual os utilizadores recebidos devem ser redirecionados no campo de entrada de URL. Ao redirecionar para o novo URL de destino, os parâmetros de URL existentes do URL original chamado são mantidos, como parâmetros UTM, e são anexados ao novo URL de redirecionamento.

important

Aviso importante: Ao inserir a URL, certifica-te de que inseres a URL completa e absoluta.
-> „https://www.demoshop.com/new-home“ e não „demoshop.com/new-home“
Contacta-nos se tiveres alguma dúvida: https://varify.io/contact/

Método 2: Definir redirecionamento via JavaScript

Podes usar JavaScript para redirecionamentos mais complexos. No entanto, é importante que também adiciones o parâmetro va-red, incluindo o ID de experimento e o ID de variação corretos, ao URL, para que o tracking também seja acionado na página de destino e possas medir os resultados corretos. Aqui estão dois casos de uso para experimentos mais complexos, incluindo um exemplo de tracking:

Encaminhamento de cada URL para si mesmo - com parâmetro de URL adicional

Altera as constantes no seguinte código experimentId e variationId de acordo com os valores do teu experimento e da tua variação. Ajusta também o valor da constante needsViewParam inserindo aí o parâmetro de URL desejado.

Exemplo:

Página original:

https://www.test.com/products/product1

https://www.test.com/products/product2

Variação:

https://www.test.com/products/product1?view=2

https://www.test.com/products/product2?view=2

(function () {
  const experimentId = 21952;
  const variationId = 32490;
  const needsViewParam = 'view'; // <-- definiere hier den gewünschten Parameter-Namen

  function isInEditor() {
    const p = new URLSearchParams(location.search);
    return p.has('varify-variation-name') || p.has('varify-variation-id');
  }
  if (isInEditor()) return;

  const params = new URLSearchParams(window.location.search);
  const paramAsBase64 = btoa(`${experimentId}:${variationId}`).replace(/=/g, '');
  const needsView = params.get(needsViewParam) !== '2';
  const needsVa = params.get('va-red') !== paramAsBase64;

  if (needsView || needsVa) {
    params.set(needsViewParam, '2');
    params.set('va-red', paramAsBase64);

    const newUrl = `${window.location.origin}${window.location.pathname}?${params.toString()}${window.location.hash || ''}`;
    window.location.href = newUrl;
  }
})();

important

Importante: Para evitar que a variante entre num loop infinito, o targeting da página ainda precisa de ser ajustado. Podes descobrir como fazer isto aqui: Evitar loops infinitos em testes de divisão de URL

Reencaminhamento de todos os URLs para o mesmo URL com sub-path adicional

Altere as constantes experimentId e variationId no código a seguir de acordo com os valores do seu experimento e da sua variação. Ajuste também o valor da constante newPathSuffic, inserindo aí o subdiretório desejado.

Exemplo:

Página original:

https://www.test.com/products/product1

https://www.test.com/products/product2

Variação:

https://www.test.com/products/product1/new

https://www.test.com/products/product2/new

…

(function () {
  const experimentId = 21952;
  const variationId = 32490;
  const newPathSuffix = '/new'; // <-- ändere diesen Wert, um das neue Pfad-Suffix festzulegen

  function isInEditor() {
    const p = new URLSearchParams(location.search);
    return p.has('varify-variation-name') || p.has('varify-variation-id');
  }
  if (isInEditor()) return;

  const params = new URLSearchParams(location.search);
  const basePath = location.pathname.replace(/\/+$/, '');
  const endsWithNew = basePath.endsWith(newPathSuffix);

  const vaValue = btoa(`${experimentId}:${variationId}`).replace(/=/g, '');
  const hasVa = params.get('va-red') === vaValue;

  if (endsWithNew && hasVa) return;

  params.set('va-red', vaValue);

  const newPath = endsWithNew ? basePath : basePath + newPathSuffix;
  const newUrl = `${location.origin}${newPath}?${params.toString()}${location.hash || ''}`;

  location.href = newUrl;
})();

Encaminhamento de todos os URLs para o mesmo URL com um subdomínio diferente

Altera as constantes no código seguinte experimentId e variationId de acordo com os valores da tua experiência e da tua variação.
Ajusta também o valor da constante targetSubdomain introduzindo aí o subdomínio pretendido.

Exemplo:

Página original:

https://www.test.com/products/product1

https://www.test.com/products/product2

Variação:

https://subdomain.test.com/products/product1

https://subdomain.test.com/products/product2

…

(function () {
  const experimentId = 21952;
  const variationId = 32490;
  const targetSubdomain = 'subdomain'; // <-- configure your subdomain here

  function isInEditor() {
    const p = new URLSearchParams(location.search);
    return p.has('varify-variation-name') || p.has('varify-variation-id');
  }
  if (isInEditor()) return;

  const params = new URLSearchParams(window.location.search);
  const paramAsBase64 = btoa(experimentId + ':' + variationId).replace(/=/g, '');
  const needsVa = params.get('va-red') !== paramAsBase64;

  const hostNoWww = location.hostname.replace(/^www\./, '');
  const parts = hostNoWww.split('.');
  const registrable = parts.length >= 2 ? parts.slice(-2).join('.') : hostNoWww;
  const targetHost = targetSubdomain + '.' + registrable;
  const needsHost = location.hostname !== targetHost;

  if (needsVa || needsHost) {
    params.set('va-red', paramAsBase64);
    params.delete('view');
    const port = location.port ? ':' + location.port : '';
    const newUrl =
      location.protocol + '//' + (needsHost ? targetHost : location.hostname) + port +
      location.pathname +
      (params.toString() ? ('?' + params.toString()) : '') +
      (location.hash || '');
    if (needsHost) {
      window.location.href = newUrl;
    } else {
      history.replaceState(null, '', newUrl);
    }
  }
})();

Configurar o direcionamento de página

Depois de criar e salvar o URL de redirecionamento no editor visual, você pode definir as configurações do split test no painel do Varify.io.

1. Em Page Targeting, insira o URL no qual seu experimento deve ocorrer. Este é o URL a partir do qual você deseja redirecionar para o URL de redirecionamento. -> NÃO insira o URL de redirecionamento!
2. Defina o tipo de correspondência como «Simple Match»
3. Defina a distribuição de tráfego desejada para sua variante
4. Inicie o experimento de redirecionamento

Exemplo: A captura de tela mostra a configuração em que 50% dos usuários que acessam https://www.demoshop.com/ agora são redirecionados para a URL que foi previamente inserida na variante criada em Redirect URL.

important

Antes de iniciar o experimento, verifique se o redirecionamento funciona corretamente e não cria loops infinitos.

A variante de redirecionamento cria um loop infinito

Em determinadas circunstâncias, a segmentação de página pode criar um loop infinito para utilizadores redirecionados. No entanto, isto não acontece se a página recém-criada tiver o seu próprio URL.

Por exemplo, se o seu URL de redirecionamento contiver apenas um parâmetro adicional em relação ao URL original:
Original: https://www.demoshop.com
Redirecionamento: https://www.demoshop.com?page=newlp

Podes descobrir como resolver facilmente o problema aqui: Avoid endless loops in url split tests

Avaliação do teste de URL dividido

Avaliação no Varify.io

Com a ligação do Varify.io ao Google Analytics 4, podes exibir facilmente os teus resultados diretamente no teu painel do Varify.io. Podes descobrir como fazer isto aqui: Para a avaliação de resultados no Varify.io

Avaliação no GA4

Podes analisar os dados das variações do teu teste A/B no GA4 com a Análise Exploratória de Dados. Podes encontrar mais informações aqui: Para avaliar os resultados no GA4

Aviso: A Varify não assume qualquer responsabilidade pela funcionalidade do código e das informações.
É da responsabilidade do utilizador testar o código exaustivamente e implementá-lo corretamente.