Pular para o conteúdo principal

Teste temas do Shopify com o Varify.io

Última atualização em 22 de abr. de 20265 min de leitura
Índice

Resumindo​

Usa a funcionalidade «Shopify Theme Preview» para testar facilmente, em A/B, um novo tema do Shopify contra o teu tema antigo com o Varify.io. Para isso, cria uma nova experiência e usa o código JavaScript fornecido. Personaliza-o com o ID do teu novo tema e testa o novo tema antes de mudar a tua loja.

Só utilize testes de tema se realmente quiseres testar um novo tema. Geralmente recomendamos fazer alterações com o editor visual da Varify ou com alterações de JSS e/ou CSS. Não garantimos a funcionalidade do código fornecido nem as funcionalidades da Shopify. Um QA minucioso é absolutamente necessário para um teste de tema.

Porquê testar temas Shopify​

Um novo tema Shopify deve ser testado com A/B testing antes da mudança para garantir que não degrada o desempenho da loja. Alterações no design podem afetar o comportamento do cliente e KPIs como a taxa de conversão. O A/B testing permite uma verificação apoiada em dados sobre se o novo tema entrega resultados melhores ou piores.

Passo 1: Insere o snippet do Varify.io no ficheiro theme.liquid​

💡Nota: Recomendamos integrar o snippet Varify através do ficheiro theme.liquid para testar temas. O passo 1 só precisa de ser realizado se o snippet Varify ainda não estiver instalado no teu site.

Copie o snippet do Varify.io do painel e cole-o o mais no topo possível do arquivo theme.liquid da sua loja. Para isso, vá para "Online Store"-> "Themes" no backend do Shopify e clique em "edit code"

Shopify „Themes“ com o menu de contexto do tema atual aberto e a opção „Edit code“ destacada Você pode então inserir o snippet do Varify.io como no exemplo a seguir. Por favor, não altere nada no snippet, mesmo que o Shopify sugira alterações - mudanças causarão efeitos de flicker ou o teste A/B deixará de funcionar.

Editor de código do Shopify com theme.liquid aberto; o snippet do Varify fica diretamente abaixo da tag de abertura „<head>“ Teste se a implementação foi bem-sucedida. Crie um novo experimento em uma página de produto da sua loja através do painel do Varify.io como teste. Se o editor abrir, a implementação foi bem-sucedida.

Painel do Varify com o URL da loja Shopify inserido junto ao botão „Create new Experiment“

Passo 2: Encontra o ID do tema do novo tema que queres testar​

Precisamos do ID do tema para dizer à Shopify qual o tema que os participantes do teste devem ver. Aqui está um guia passo a passo sobre como encontrar o ID do tema a partir do link de pré-visualização:

  1. vai a: Sales Channels > Online Store > Themes > Theme Library.

  2. procura o tema que queres testar.

  3. clica nos três pontos (Ações)

  4. Clica em «Preview» e copia o link.

O teu link de pré-visualização terá um aspeto parecido com este: https://deinshop.myshopify.com/?preview_theme_id=1234567890

O número no final do link (1234567890) é o ID do tema que precisas.

Agora faz o mesmo para o teu tema atual e copia o ID do tema aqui também.

Passo 3: Criar experimento​

Crie um novo experimento. Basta inserir a homepage da tua loja como a URL do editor no dashboard da Varify. Depois clica em "Add JS" e adiciona o seguinte JavaScript ao experimento.

Diálogo do editor Varify „Add JS“ com o script que troca o tema; a linha „preview_theme_id“ recebe o ID do novo tema

💡Nota: Insere o ID do tema atualmente utilizado na linha 6 e o ID do tema a ser testado na linha 17.

// Add the experimentId and variationId of your Experiment in order to track your Experiment correctly
const experimentId = 21952;
const variationId = 32490;
// Add your original theme id here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="148175061290"]',
  (themeElement) => {
    // …then run your redirect logic.
    (function () {
      const url = new URL(window.location.href);
      const params = url.searchParams;
      const shadow = document.querySelector('div#varify-shadow-root');

      // only redirect when the variation-param is missing AND the shadow-root isn't present
      if (!params.has('pb') && !shadow) {
      // Add your preview theme id here
        params.set('preview_theme_id', '177143382392');
        params.set('pb', '0');   // hide the preview bar
        const paramAsBase64 = window
          .btoa(`${experimentId}:${variationId}`)
          .replace(/=/g, '');
        params.append(
          'va-red',
          paramAsBase64,
        );
        // replace so you don't add a new history entry
        window.location.replace(url.toString());
      } else {
        console.log('Redirect skipped:', {
          hasVarifyVariation: params.has('varify-variation-id'),
          varifyShadowRootExists: !!shadow
        });
      }
    })();
  }
);

Depois de atualizares o snippet de código com os novos IDs de tema, clica em „Finished“ e dá ao experimento um nome adequado. Depois, abre „Page Targeting“ no experimento e muda o „Match Type“ de „Simple Match“ para „Contains.“ Depois clica em „Save Page Targeting.“.

Segmentação de página do «Shopify Theme Test»: a condição de URL «Contains» corresponde ao domínio da loja

Assim que você ou um visitante tiver visto a versão de teste, eles continuarão a ver a versão de pré-visualização mesmo depois que o experimento tiver sido concluído. Para que você também possa ver o tema original novamente na variante original, crie uma nova variante com o nome "New Original". Em seguida, clique em "Add JS" no editor visual e insira o seguinte código JavaScript, substituindo o data-theme-instance-id pelo ID do tema de pré-visualização do tema Shopify que você deseja testar.

«Shopify Theme Test» em execução com três linhas: Original com 0 % de tráfego, «Variation 1» e «New Original» com 50 % cada 
// Add your correct preview theme ID here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="167804502324"]',
  (themeElement) => {
    let currentUrl = window.location.href;

    if (!currentUrl.includes('varify-variation-id')) {
        if (currentUrl.includes('?')) {
            currentUrl += '&exitPreview=1';
        } else {
            currentUrl += '?exitPreview=1';
        }

        window.location.href = currentUrl;
    }
  }
);

Passo 4: Segmentação e garantia de qualidade​

Assim que você tiver implementado o JavaScript e salvado o experimento, você pode salvar a URL da sua loja na segmentação de página do experimento. Você também pode usar os links "Preview" para verificar se o redirecionamento funciona e se todas as configurações foram feitas corretamente. Para isso, basta procurar o ID do tema correspondente no código da loja. Tanto o ID do tema original quanto o ID do tema de pré-visualização devem ser encontrados na versão de teste.

Passo 5: Iniciar a experiência​

Agora inicia a experiência com "Start Experiment". A partir de agora, 50% dos teus visitantes serão direcionados para o novo tema e 50% continuarão a ver o tema antigo. Os visitantes permanecem sempre atribuídos à mesma variante durante a duração da experiência. Isto significa que o tema que já viram uma vez, voltarão a ver durante a experiência. Após algum tempo, vais reconhecer qual o tema com melhor desempenho.

Passo 6: Repor o modo de pré-visualização após terminar a experiência​

Assim que os teus utilizadores tiverem visto a variante de pré-visualização do tema, continuarão a vê-la mesmo depois de a experiência ter terminado. Podes iniciar uma experiência de "Clean Up" para que os utilizadores voltem a ver o teu tema original. Basta criar uma nova experiência e inserir o código JavaScript da variante "New Original" (ver acima) em "Add JS". Guarda a experiência com um nome à tua escolha. Define a alocação de tráfego para 100% na variante e inicia a experiência.

O modo de pré-visualização é agora terminado para todos os participantes de teste anteriores que viram a variante. Por favor, verifica a funcionalidade do código antes de iniciares a experiência, tal como nos passos anteriores.

Nesta página