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 rastreamento e análise da Web 
							
			
			
		
						
				- Rastreamento com a Varify
- Integração manual do rastreamento do Google Tag Manager
- Integração automática do rastreamento GA4
- Integração do Shopify Custom Pixel via Google Tag Manager
- Rastreamento da Shopify
- BigQuery
- Análises PostHog
- Matomo - Integração via Matomo Tag Manager
- Integração com o etracker
- Integração com o Piwik Pro
- Consentimento - Rastreamento via consentimento
- Configurações avançadas
- Rastreamento com a Varify
- Integração manual do rastreamento do Google Tag Manager
- Integração automática do rastreamento GA4
- Integração do Shopify Custom Pixel via Google Tag Manager
- Rastreamento da Shopify
- BigQuery
- Análises PostHog
- Matomo - Integração via Matomo Tag Manager
- Integração com o etracker
- Integração com o Piwik Pro
- Consentimento - Rastreamento via consentimento
- Configurações avançadas
					 Criar experimento 
							
			
			
		
						
				
					 Direcionamento 
							
			
			
		
						
				
					
					 Relatórios e avaliação 
							
			
			
		
						
				- Avaliação do GA4 no Varify.io
- BigQuery
- Segmentar e filtrar relatórios
- Compartilhar relatório
- Avaliação baseada no público no GA4
- Avaliação baseada em segmentos no GA 4
- PostRastreamento de porcos
- 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
- Avaliação do GA4 no Varify.io
- BigQuery
- Segmentar e filtrar relatórios
- Compartilhar relatório
- Avaliação baseada no público no GA4
- Avaliação baseada em segmentos no GA 4
- PostRastreamento de porcos
- 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