Rastreamento de E-commerce com GA4 e GTM: Guia Completo para VTEX

O que é rastreamento de e-commerce?

Rastreamento de e-commerce é o conjunto de técnicas e implementações que capturam o comportamento dos usuários em uma loja virtual e enviam esses dados para ferramentas de análise — como o Google Analytics 4 — para que você possa entender o funil de vendas, identificar gargalos e tomar decisões baseadas em dados.

Em um e-commerce moderno, o rastreamento cobre desde a primeira visualização de um produto até a confirmação do pedido — e, no caso do rastreamento server-side, vai além: captura dados de cancelamento, fraude e retorno diretamente da plataforma.

Em uma frase: sem rastreamento de e-commerce, você está gerenciando uma loja no escuro.

O modelo de rastreamento: GA4 + GTM

A combinação GA4 + GTM é o padrão de mercado para rastreamento de e-commerce por uma razão simples: ela separa responsabilidades.

• GA4 é a ferramenta de análise — onde os dados chegam, são processados e podem ser explorados
• GTM (Google Tag Manager) é o orquestrador — captura eventos do site via dataLayer e decide quando e como enviá-los para o GA4

Os eventos do funil de e-commerce

O GA4 tem um conjunto de eventos recomendados para e-commerce que formam o funil padrão. Cada evento tem parâmetros específicos que precisam ser enviados corretamente.

Eventos do funil (em ordem)

Estrutura do objeto item

Cada produto nos arrays items[] deve ter no mínimo:

{
  item_id: "SKU-123",        // ID do SKU no VTEX
  item_name: "Camiseta Azul",
  item_category: "Vestuário",
  item_brand: "Marca X",
  price: 89.90,
  quantity: 1,
  index: 0                   // posição na lista (para view_item_list)
}

Como implementar o dataLayer no VTEX IO

No VTEX IO, o dataLayer pode ser alimentado de três formas:

Opção 1: Pixel App nativo da VTEX (mais simples)

A VTEX tem um Pixel App oficial que publica eventos no dataLayer automaticamente. Porém, os nomes dos eventos são do formato UA (Universal Analytics), não GA4. Você precisará de mapeamento no GTM para converter.

// Evento que o Pixel App da VTEX publica (formato UA legado)
dataLayer.push({
  event: "productDetail",
  ecommerce: {
    detail: {
      products: [{ id: "123", name: "Produto", price: "89.90" }]
    }
  }
});

Opção 2: Pixel App customizado (recomendado para GA4)

Crie um Pixel App próprio que escuta os eventos da VTEX via usePixel() hook e os republica no formato GA4:

// vtex.my-pixel/react/index.tsx
import { usePixel } from "vtex.pixel-manager";

function MyPixel() {
  usePixel(({ event, data }) => {
    if (event === "vtex:productView") {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: "view_item",
        ecommerce: {
          currency: "BRL",
          value: data.product.priceRange?.sellingPrice?.highPrice,
          items: [{
            item_id: data.product.productId,
            item_name: data.product.productName,
            price: data.product.priceRange?.sellingPrice?.highPrice,
            item_category: data.product.categoryTree?.[0]?.name,
          }]
        }
      });
    }
  });
  return null;
}

Opção 3: Script no theme (mais controle)

Para quem usa o Store Theme, scripts podem ser adicionados diretamente ao checkout-ui-custom ou aos componentes React.

Configurando o GTM para e-commerce GA4

Com o dataLayer alimentado, configure o GTM para capturar e enviar os eventos ao GA4.

1. Crie a variável dataLayer para ecommerce

No GTM, crie uma Variável do tipo Camada de dados:

• Nome da variável: ecommerce
• Versão: V2

2. Crie o trigger para cada evento

Para cada evento do funil, crie um Acionador do tipo Evento personalizado:

• Nome do evento: view_item (ou o evento específico)
• Marque "Usar correspondência de expressão regular" se quiser capturar múltiplos eventos com um único trigger

3. Crie a tag GA4 Event

Para cada evento ou usando uma tag genérica:

• Tipo de tag: Evento do Google Analytics: GA4
• Nome do evento: {{Event}} (variável automática)
• Parâmetros de evento: adicione ecommerce → {{ecommerce}}

Atenção: O GA4 aceita o objeto ecommerce inteiro como parâmetro, mas certifique-se de limpar o dataLayer entre eventos com dataLayer.push({ ecommerce: null }).

Rastreamento server-side: por que é essencial

O rastreamento client-side (via GTM no browser) tem um problema fundamental: adblockers, extensões de privacidade e falhas de JavaScript podem impedir que os eventos cheguem ao GA4.

Para o evento de compra, isso é crítico: você pode perder entre 10% e 35% dos pedidos no seu relatório de conversões.

O que é rastreamento server-side de e-commerce

No rastreamento server-side, os eventos são enviados diretamente do servidor da sua aplicação para o GA4 via Measurement Protocol — a API HTTP do Google Analytics. Isso significa:

• Zero perda por adblockers
• Dados 100% consistentes com o banco de dados de pedidos
• Funciona mesmo se o cliente fechar o browser após finalizar o pedido
• Você controla exatamente quais pedidos são enviados (pode filtrar cancelamentos, fraudes etc.)

Arquitetura server-side com VTEX

Pedido confirmado no VTEX
         ↓
   Order Hook dispara
         ↓
  Seu endpoint recebe o webhook
         ↓
  Envia evento purchase via
  Measurement Protocol → GA4

Para detalhes de implementação do Order Hook com GA4, veja o artigo Evento de compra VTEX + GA4 via Order Hook.

GTM Server-Side: uma camada extra

Além do Measurement Protocol direto, existe outra opção de rastreamento server-side: o GTM Server-Side.

No GTM Server-Side, você executa um container GTM em um servidor próprio (Google Cloud Run é o mais comum). O browser envia eventos para o SEU servidor em vez de direto ao Google — e o servidor decide quais dados enviar e para onde.

Vantagens do GTM Server-Side para e-commerce

Custo do GTM Server-Side

Um container GTM Server-Side no Google Cloud Run custa em média R$ 80-200/mês dependendo do volume de tráfego — um investimento pequeno considerando que pode recuperar 15-30% dos dados de conversão perdidos.

Validação do rastreamento de e-commerce

Após a implementação, valide cada ponto do funil sistematicamente.

Checklist de validação

□ view_item dispara na PDP com item_id, item_name, price corretos
□ add_to_cart dispara com valor correto (preço × quantidade)
□ begin_checkout dispara na primeira tela do checkout
□ purchase dispara UMA VEZ por pedido (não duplicado)
□ transaction_id é o número do pedido VTEX
□ value é a receita líquida (sem frete, com desconto)
□ currency é "BRL"
□ Receita GA4 diverge menos de 5% da receita VTEX Admin
□ Não há eventos purchase sem transaction_id
□ Não há transaction_id duplicados no GA4

Ferramentas de validação

1. GTM Preview Mode — visualiza eventos disparando em tempo real
2. GA4 DebugView — confirma que os eventos chegam ao GA4 com os parâmetros corretos
3. GA4 Realtime — verifica conversões em tempo real
4. Comparação de relatórios — compare receita diária GA4 vs. relatório de pedidos VTEX

Como acessar o DebugView

No GA4: Administrador → DebugView. Para ativar o debug mode, use o parâmetro ?gtm_debug=x na URL ou ative o "Preview mode" do GTM.

Erros mais comuns no rastreamento de e-commerce

Erro 1: Evento purchase duplicado

Sintoma: A receita no GA4 é o dobro do esperado.

Causa: Dois sistemas disparando o mesmo evento — por exemplo, o Pixel App nativo VTEX E um Pixel App customizado.

Solução: Desative o Pixel App nativo da VTEX ou remova a tag GA4 do GTM que escuta o evento de compra. Use apenas uma fonte de dados para o purchase.

Erro 2: transaction_id inconsistente

Sintoma: Você vê pedidos duplicados ou sem ID no GA4.

Causa: Usar timestamp, número aleatório ou ID de carrinho em vez do número real do pedido VTEX.

Solução: Use sempre o orderId da VTEX como transaction_id. No Order Hook, esse dado vem diretamente no payload.

Erro 3: Receita com frete incluído

Sintoma: Receita GA4 maior que receita líquida no relatório VTEX.

Causa: O campo value está somando o valor do frete junto com os produtos.

Solução: value deve ser subtotal dos produtos com desconto. Envie frete separado no parâmetro shipping.

Erro 4: Eventos client-side disparando no servidor

Sintoma: Você implementou rastreamento server-side mas os eventos aparecem duplicados.

Causa: O GTM client-side ainda está escutando o evento de compra E o server-side também está enviando.

Solução: No GTM, crie uma exceção para o trigger do evento purchase no client-side quando o rastreamento server-side estiver ativo.

Checklist de implementação completa

Antes de ir ao ar, confirme:

□ Pixel App ou script customizado publicando eventos no dataLayer (formato GA4)
□ GTM instalado corretamente no VTEX IO (via Pixel App GTM ou script)
□ Tags GA4 configuradas para cada evento do funil
□ Parâmetros de item completos em todos os eventos
□ dataLayer.push({ ecommerce: null }) antes de cada novo evento ecommerce
□ Order Hook configurado para eventos de compra server-side
□ DebugView validado para cada evento
□ Comparação de receita GA4 vs. VTEX Admin (≤ 5% de divergência)
□ Nenhum evento purchase duplicado
□ Conversão de compra configurada no GA4 e Google Ads

Próximos passos

Com o rastreamento implementado e validado, você pode:

• Criar Explorations de funil no GA4 para identificar onde os usuários abandonam
• Configurar públicos de remarketing (visitantes que adicionaram ao carrinho mas não compraram)
• Ativar a exportação BigQuery para análises avançadas com SQL
• Usar os dados de conversão do GA4 para treinar campanhas de Smart Bidding no Google Ads
• Implementar testes A/B usando os eventos do GA4 como métricas

Para implementar o rastreamento de e-commerce completo na sua loja VTEX, fale com um especialista GA4 ou especialista GTM.