Palavras-chave populares
Categorias
Total Resultados
Nenhum registro encontrado
Shopify - Teste os preços com o Varify.io
Tabela de conteúdo
Curto e agradável
Para descobrir a que preço seus produtos alcançam a melhor margem de contribuição, você pode realizar testes de preço. Para fazer isso, um filtro de variante adicional é adicionado para o produto correspondente a ser testado. Você usa esse filtro para definir o preço alternativo.
O experimento é invisível para o usuário, pois o filtro de preço não está visível para o usuário. Um código JavaScript no teste A/B garante que o preço original ou o preço a ser testado seja exibido na página de detalhes do produto (PDP), dependendo da variante.
Para garantir que o novo preço também seja exibido nas páginas de categoria (páginas de coleção) e que o filtro de preço não esteja visível, insira os URLs dos produtos a serem testados no código JavaScript fornecido.
Por que testar os preços da Shopify?
Os testes de preços na Shopify ajudam você a descobrir qual preço funciona melhor para um produto, ou seja, qual preço leva a mais vendas ou maior volume de negócios. Os testes A/B direcionados permitem que você teste diferentes variantes de preço simultaneamente sem interromper a experiência de compra. Isso permite que você tome decisões baseadas em dados e otimize sua loja para obter mais sucesso.
Etapa 1: Crie filtros e ajuste os preços
- Abra o produto no backend da Shopify para o qual você deseja testar o preço.
- Crie uma nova variante com o "Nome da opção" "varify-pricing-test".
- Crie dois "Valores de opção" para isso: "Controle" e "Variação".
- Se o produto tiver outras variantes, como um filtro de cor, arraste e solte o filtro de variante na parte superior para que ele fique posicionado acima dos outros filtros. Isso é importante para que o teste funcione corretamente.
Defina o novo preço a ser testado para cada variante de produto na variante de preço "varify-pricing-test".
Dica: ative a opção "Group by varify-pricing-test" para gerenciar melhor as variantes.
Se você tiver variantes ou cores diferentes, também deverá ajustar o preço da variante aqui
Lembre-se também de ajustar a quantidade disponível para que o produto esteja disponível na loja.
Por exemplo, se você tiver 1.000 unidades do produto em estoque, poderá definir 500 unidades para o preço original e 500 unidades para o preço da nova variante.
Etapa 2: Identificar os seletores CSS relevantes
Agora, encontre os seletores CSS para os elementos:
- Filtro de preço
- Cartão de produto na página Coleção
- Preço na página da Coleção.
Filtro de preço
Abra uma página de detalhes do produto (PDP) na qual você configurou o filtro de preço e o experimento deve ser realizado
Abra as ferramentas do desenvolvedor (F12 ou clique com o botão direito do mouse > "Inspecionar").
Use a ferramenta de inspeção para selecionar o elemento de filtro varify-pricing-test recém-criado, de modo que ele fique completamente destacado - isso garante que você identificou o seletor correto.
Neste exemplo, o primeiro <div>-no elemento <variant-selects>-é selecionado. Dependendo do modelo, a estrutura e as tags e classes HTML podem ter nomes diferentes.
- Clique com o botão direito do mouse na posição destacada no código e selecione : Copiar → Seletor de cópia
Isso copia o seletor CSS exato para o filtro de preço.
É melhor salvar o seletor copiado em um documento ou em uma nota - você precisará dele novamente em breve.
Cartão de produto na página Coleção
Abra uma página de coleção.
Examine a página (F12 ou clique com o botão direito do mouse > "Examinar") e selecione um elemento do cartão do produto.
Encontre o elemento pai do cartão - geralmente o elemento externo do cartão do produto é um elemento de lista.
Copie a classe novamente usando "Copiar seletor" e salve-a no mesmo documento em que você salvou o seletor para o filtro de preço
Preço na página da Coleção
Abra o bloco do produto na página de coleção novamente nas ferramentas do desenvolvedor.
Aprofunde-se na estrutura do mapa e procure o elemento "Preço"
Certifique-se de que você realmente seleciona o elemento que deve ser alterado durante o teste, ou seja, o texto específico ou o bloco HTML que mostra o preço.
Nesse caso, a classe do elemento de preço preço__regular. Para o seu lado, o nome pode ser diferente.
Copie esse nome de classe usando o "Copy selector" e salve-o com os outros dois nomes de classe determinados até o momento
Etapa 3: Personalizar o código para o experimento
Crie um novo experimento por meio do Varify Dashboard. Para fazer isso, insira a página inicial da loja no campo de entrada e clique em "Create new Experiment" (Criar novo experimento). Abaixo, você encontrará o código JavaScript para o teste de preço. Adicione-o à variante de seu experimento usando a função "Add JS".
Para garantir que o teste de preço também funcione tecnicamente em sua loja, é necessário fazer alguns ajustes no código JavaScript fornecido. Altere o JavaScript em sua variante da seguinte forma:
Linha 1: Cole o seletor CSS copiado para o filtro de preço entre aspas.
Linha 2: Insira a classe do preço, ou seja, o elemento que será alterado posteriormente.
Linha 3: Especifique a classe do bloco do produto para que o código saiba onde o preço está na página da coleção.
A partir da linha 7: Adicione aqui todos os URLs de produtos nos quais o teste de preço deve ser realizado. (Se você estiver realizando um teste de preço para apenas um produto, só precisará adicionar um URL aqui e poderá excluir os outros URLs). Certifique-se de manter o formato correspondente dos URLs ("URL"). Adicione uma vírgula após cada "URL" se houver mais URLs.
💡 Observação: O preço nas páginas da coleção é completamente substituído pelo código. Se símbolos de moeda ou palavras adicionais, como "ab", forem anexados ao preço, você poderá ajustá-los diretamente no código (linha 81)
Sem texto adicional:
Por exemplo, novo preço -> 25,99
priceElement.textContent = `${newPrice}`;
Com texto adicional:
Por exemplo, novo preço -> A partir de 25,99 EUR
priceElement.textContent = `From ${newPrice} EUR`;
Código JavaScript para o teste de preço
const varifyPriceFilterSelector = '#variant-selects-template--25418368778580__main > div:nth-child(1)';
const priceClass = 'price__regular';
const cardClass = 'grid__item';
const desiredVariantOption = 'Variation'; // Variation or Control
// Only URLs – variant IDs no longer required
const productURLs = [
'https://demo-shop.com/products/article1',
'https://demo-shop.com/products/article2',
'https://demo-shop.com/products/article3'
];
const updatedHandles = new Set();
function hidePriceFilterOnMatchingProductPages() {
const currentURL = window.location.href;
const matchesProductPage = productURLs.some(url => currentURL.includes(url));
if (matchesProductPage && varifyPriceFilterSelector) {
const style = document.createElement('style');
style.textContent = `
${varifyPriceFilterSelector} {
display: none !important;
}
`;
document.head.appendChild(style);
console.log('Hiding price filter on matching product page:', varifyPriceFilterSelector);
}
}
hidePriceFilterOnMatchingProductPages();
function formatPrice(priceInCents) {
return (priceInCents / 100).toFixed(2);
}
function extractHandleFromHref(href) {
const match = href.match(/\/products\/([^/?#]+)/);
return match ? match[1] : null;
}
function extractHandlesFromURLs(urls) {
return urls.map(extractHandleFromHref).filter(Boolean);
}
function updateProducts(retryCount = 0) {
const productCards = document.querySelectorAll(`.${cardClass}`);
const allowedHandles = extractHandlesFromURLs(productURLs);
if (productCards.length === 0 && retryCount < 5) {
console.warn(`No product cards found – retrying (${retryCount + 1}/5)`);
setTimeout(() => updateProducts(retryCount + 1), 300);
return;
}
allowedHandles.forEach((handle) => {
if (updatedHandles.has(handle)) return;
fetch(`/products/${handle}.js`)
.then(response => response.json())
.then(product => {
const targetVariant = product.variants.find(v => v.option1 === desiredVariantOption);
if (!targetVariant) {
console.warn(`No variant found with option1 === '${desiredVariantOption}' for "${handle}"`);
return;
}
let updated = false;
productCards.forEach(card => {
const link = card.querySelector('a[href*="/products/"]');
if (!link) return;
const href = link.getAttribute('href');
const linkHandle = extractHandleFromHref(href);
if (linkHandle === handle) {
const priceElement = card.querySelector(`.${priceClass}`);
if (priceElement) {
const oldPrice = priceElement.textContent.trim();
const newPrice = formatPrice(targetVariant.price);
priceElement.textContent = `${newPrice}`;
console.log(`"${product.title}" – Price updated: ${oldPrice} → €${newPrice}`);
}
const imageElement = card.querySelector('.product-card-image img');
if (imageElement && targetVariant.featured_image) {
imageElement.src = targetVariant.featured_image.src;
console.log(`Image updated for "${product.title}".`);
}
// Update link with ?variant=...
const url = new URL(link.href, window.location.origin);
url.searchParams.set('variant', targetVariant.id);
link.href = url.toString();
updated = true;
}
});
if (updated) {
updatedHandles.add(handle);
}
})
.catch(error => {
console.error(`Error loading product "${handle}":`, error);
});
});
}
// Optional: Set filter selection on the PDP
function setPriceFilter() {
const selectElement = document.querySelector(`${varifyPriceFilterSelector} select`);
if (selectElement) {
selectElement.value = desiredVariantOption;
selectElement.dispatchEvent(new Event('input', { bubbles: true }));
selectElement.dispatchEvent(new Event('change', { bubbles: true }));
}
}
// Initial call after DOM ready
window.varify.helpers.onDomLoaded(() => {
setPriceFilter();
updateProducts();
});
// Optional: Repeat on DOM changes
window.varify.helpers.onDomChanged(() => {
updateProducts();
});
Etapa 4: Salve o novo experimento
Salve o experimento e dê um nome a ele
Duplique a variante criada no experimento recém-criado e renomeie-a para "New Original".
Clique em "Edit" (Editar) para editar o "New Original" (Novo Original).
Abra a janela JavaScript e altere a variável na linha 4 de 'Variation' para 'Controll
Salve as alterações.
Defina a divisão do teste como 50:50 entre "Variação 1" e "Novo controle". O "Original" recebe 0 %.
Personalize a segmentação da página e defina-a como "Contém" com o URL da sua loja.
Inicie o experimento.
Primeiros passos
Integrações de análise da Web
Criar experimento
Direcionamento
Rastreamento e avaliação
- Rastreamento com o Varify.io
- Avaliação do GA4 no Varify.io
- Segmentar e filtrar relatórios
- Avaliação baseada no público no GA4
- Avaliação baseada em segmentos no GA 4
- Matomo - Análise de resultados
- Avaliação do etracker
- Calcular a significância
- Eventos de clique personalizados
- Avaliar eventos personalizados em relatórios exploratórios
- GA4 - Rastreamento entre domínios
- Rastreamento com o Varify.io
- Avaliação do GA4 no Varify.io
- Segmentar e filtrar relatórios
- Avaliação baseada no público no GA4
- Avaliação baseada em segmentos no GA 4
- Matomo - Análise de resultados
- Avaliação do etracker
- Calcular a significância
- Eventos de clique personalizados
- Avaliar eventos personalizados em relatórios exploratórios
- GA4 - Rastreamento entre domínios
Editor visual
- Intensificador de campanha: Seta para cima
- Intensificador de campanha: Camada de intenção de saída
- Reforço de campanha: barra de informações
- Reforço de campanha: Notificação
- Impulsionador de campanha: Barra USP
- Adicionar destino do link
- Modo de navegação
- Seletor personalizado
- Editar conteúdo
- Editar texto
- Mover elementos
- Ocultar elemento
- Inserção de palavras-chave
- Teste de redirecionamento e divisão de URL
- Remover elemento
- Substituir imagem
- Alternador de dispositivos responsivo
- Alterações de estilo e layout
- Intensificador de campanha: Seta para cima
- Intensificador de campanha: Camada de intenção de saída
- Reforço de campanha: barra de informações
- Reforço de campanha: Notificação
- Impulsionador de campanha: Barra USP
- Adicionar destino do link
- Modo de navegação
- Seletor personalizado
- Editar conteúdo
- Editar texto
- Mover elementos
- Ocultar elemento
- Inserção de palavras-chave
- Teste de redirecionamento e divisão de URL
- Remover elemento
- Substituir imagem
- Alternador de dispositivos responsivo
- Alterações de estilo e layout