Pular para conteúdo

E-commerce Completo

Visão Geral

Este exemplo demonstra uma implementação completa do Complyr em uma loja virtual (e-commerce), incluindo integração com Google Tag Manager, Facebook Pixel, Google Analytics 4 e Enhanced E-commerce.

Ideal para lojas online que precisam rastrear conversões, vendas, comportamento de usuários e otimizar campanhas de marketing digital.

Características: - ✅ Google Tag Manager (GTM) configurado - ✅ Consent Mode v2 implementado - ✅ Facebook Pixel com Advanced Matching - ✅ Enhanced E-commerce tracking (GA4) - ✅ Rastreamento de produtos, carrinho, checkout e compras - ✅ Eventos customizados para remarketing - ✅ Identificação de usuários após login

Tecnologias: - HTML5/JavaScript - Google Tag Manager - Facebook Pixel - Google Analytics 4 - Enhanced E-commerce

Tempo estimado: 45 minutos

Nível: Intermediário 🟡

Pré-requisitos

1. Complyr

  • ✅ Workspace criado e ativo
  • ✅ Template de consentimento publicado
  • ✅ Workspace ID disponível
  • ✅ Finalidades configuradas: Essential, Analytics, Marketing

2. Google Tag Manager

  • ✅ Conta GTM criada em tagmanager.google.com
  • ✅ Container ID (formato: GTM-XXXXXX)
  • ✅ Container snippet adicionado ao site

3. Google Analytics 4

  • ✅ Propriedade GA4 criada
  • ✅ Measurement ID (formato: G-XXXXXXXXXX)
  • ✅ Enhanced E-commerce habilitado

4. Facebook Pixel

  • ✅ Pixel criado no Facebook Business Manager
  • ✅ Pixel ID (número de 15 dígitos)
  • ✅ Eventos padrão configurados

Arquitetura da Solução

flowchart LR
    A[Usuário] --> B[Complyr Banner]
    B -->|Aceita Cookies| C[Complyr API]
    C --> D[dataLayer]
    D --> E[Google Tag Manager]
    E --> F[Google Analytics 4]
    E --> G[Facebook Pixel]
    E --> H[Google Ads]

    C -->|consent-updated| I[Custom Events]
    I --> J[Product View]
    I --> K[Add to Cart]
    I --> L[Checkout]
    I --> M[Purchase]

Passo 1: Instalação Base

1.1. Google Tag Manager Container

Adicione o snippet do GTM no <head> e início do <body>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha Loja - E-commerce</title>

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
  <!-- End Google Tag Manager -->
</head>
<body>

  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- Conteúdo da loja -->

</body>
</html>

⚠️ Importante: Substitua GTM-XXXXXX pelo seu Container ID real.

1.2. Script Complyr

Adicione o script Complyr antes do fechamento do </body>:

  <!-- Complyr Script -->
  <script
    src="https://app.complyr.com.br/tag/js"
    data-workspace-id="SEU_WORKSPACE_ID"
    data-complyr-script
    async
    defer>
  </script>

</body>
</html>

No GTM, crie variável personalizada:

Tipo: Data Layer Variable Nome: consent_analytics Data Layer Variable Name: consent_analytics

Repita para: - consent_marketing - consent_personalization - consent_third_party

Tipo: Custom HTML Nome: Consent Mode - Default State Trigger: All Pages (com prioridade alta)

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Estado padrão (NEGADO até usuário aceitar)
gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied',
  'functionality_storage': 'granted',  // Essential sempre granted
  'personalization_storage': 'denied',
  'security_storage': 'granted',       // Essential sempre granted
  'wait_for_update': 500  // Aguardar 500ms por atualização
});
</script>

Tipo: Custom HTML Nome: Consent Mode - Update on Consent Trigger: Custom Event → consent-updated

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Atualizar baseado no consentimento do Complyr
gtag('consent', 'update', {
  'ad_storage': {{consent_marketing}} ? 'granted' : 'denied',
  'analytics_storage': {{consent_analytics}} ? 'granted' : 'denied',
  'ad_user_data': {{consent_marketing}} ? 'granted' : 'denied',
  'ad_personalization': {{consent_marketing}} ? 'granted' : 'denied',
  'personalization_storage': {{consent_personalization}} ? 'granted' : 'denied'
});

console.log('Consent Mode atualizado:', {
  analytics: {{consent_analytics}},
  marketing: {{consent_marketing}},
  personalization: {{consent_personalization}}
});
</script>

Passo 3: Configurar Google Analytics 4

3.1. Criar Tag GA4

Tipo: Google Analytics: GA4 Configuration Nome: GA4 - Configuration Measurement ID: G-XXXXXXXXXX Trigger: All Pages

Parâmetros adicionais (recomendado): - send_page_view: true - cookie_flags: SameSite=None;Secure

3.2. Habilitar Enhanced E-commerce

No GA4, vá em: 1. Admin → Data Streams → Web Stream 2. Clique em "Enhanced measurement" 3. Ative: - ✅ Page views - ✅ Scrolls - ✅ Outbound clicks - ✅ Site search - ✅ Video engagement - ✅ File downloads

Passo 4: Configurar Facebook Pixel

4.1. Criar Tag do Facebook Pixel (Base Code)

Tipo: Custom HTML Nome: Facebook Pixel - Base Code Trigger: Custom Event → consent-updated (quando consent_marketing = true)

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// Inicializar Pixel
fbq('init', 'SEU_PIXEL_ID');

// Conceder consentimento
fbq('consent', 'grant');

// PageView
fbq('track', 'PageView');

console.log('Facebook Pixel carregado e consentimento concedido');
</script>

⚠️ Importante: Substitua SEU_PIXEL_ID pelo seu Pixel ID real.

4.2. Criar Tag do Facebook Pixel (Revoke)

Tipo: Custom HTML Nome: Facebook Pixel - Revoke Consent Trigger: Custom Event → consent-updated (quando consent_marketing = false)

<script>
if (window.fbq) {
  fbq('consent', 'revoke');
  console.log('Facebook Pixel consentimento revogado');
}
</script>

Passo 5: Enhanced E-commerce - Rastreamento de Produtos

5.1. Visualização de Produto (Product Detail View)

Quando usuário visualiza produto individual:

<script>
// Dados do produto
const product = {
  item_id: 'PROD-123',
  item_name: 'Camiseta Premium',
  currency: 'BRL',
  price: 89.90,
  item_brand: 'Minha Marca',
  item_category: 'Roupas',
  item_category2: 'Camisetas',
  item_variant: 'Azul/M',
  quantity: 1
};

// Aguardar Complyr carregar
document.addEventListener('complyr:loaded', function() {
  // Quando Analytics for aceito, enviar evento
  document.addEventListener('consent-updated', function(event) {
    if (event.detail.analytics) {
      // GTM dataLayer
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'view_item',
        ecommerce: {
          items: [product]
        }
      });

      console.log('Product view tracked:', product);
    }
  });
});

// Facebook Pixel (se Marketing aceito)
document.addEventListener('consent-updated', function(event) {
  if (event.detail.marketing && window.fbq) {
    fbq('track', 'ViewContent', {
      content_ids: [product.item_id],
      content_name: product.item_name,
      content_type: 'product',
      value: product.price,
      currency: product.currency
    });
  }
});
</script>

5.2. Adicionar ao Carrinho (Add to Cart)

Quando usuário adiciona produto ao carrinho:

<script>
function trackAddToCart(product) {
  // GTM dataLayer (se Analytics aceito)
  const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

  if (consentData.purposes?.analytics?.granted) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'add_to_cart',
      ecommerce: {
        items: [{
          item_id: product.id,
          item_name: product.name,
          currency: 'BRL',
          price: product.price,
          quantity: product.quantity
        }]
      }
    });
  }

  // Facebook Pixel (se Marketing aceito)
  if (consentData.purposes?.marketing?.granted && window.fbq) {
    fbq('track', 'AddToCart', {
      content_ids: [product.id],
      content_name: product.name,
      content_type: 'product',
      value: product.price * product.quantity,
      currency: 'BRL'
    });
  }
}

// Exemplo de uso
document.getElementById('add-to-cart-btn').addEventListener('click', function() {
  const product = {
    id: 'PROD-123',
    name: 'Camiseta Premium',
    price: 89.90,
    quantity: parseInt(document.getElementById('quantity').value)
  };

  // Adicionar ao carrinho (lógica do e-commerce)
  addToCart(product);

  // Rastrear
  trackAddToCart(product);
});
</script>

5.3. Iniciar Checkout (Begin Checkout)

Quando usuário inicia processo de checkout:

<script>
function trackBeginCheckout(cartItems, total) {
  const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

  // GTM dataLayer (se Analytics aceito)
  if (consentData.purposes?.analytics?.granted) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'begin_checkout',
      ecommerce: {
        items: cartItems.map(item => ({
          item_id: item.id,
          item_name: item.name,
          currency: 'BRL',
          price: item.price,
          quantity: item.quantity
        })),
        value: total,
        currency: 'BRL'
      }
    });
  }

  // Facebook Pixel (se Marketing aceito)
  if (consentData.purposes?.marketing?.granted && window.fbq) {
    fbq('track', 'InitiateCheckout', {
      content_ids: cartItems.map(item => item.id),
      contents: cartItems.map(item => ({
        id: item.id,
        quantity: item.quantity
      })),
      content_type: 'product',
      value: total,
      currency: 'BRL',
      num_items: cartItems.length
    });
  }
}

// Exemplo: ao clicar em "Finalizar Compra"
document.getElementById('checkout-btn').addEventListener('click', function() {
  const cart = getCartItems(); // Função que retorna itens do carrinho
  const total = calculateTotal(cart);

  trackBeginCheckout(cart, total);

  // Redirecionar para checkout
  window.location.href = '/checkout';
});
</script>

5.4. Compra Concluída (Purchase)

Na página de confirmação de compra (obrigado):

<script>
// Dados da compra (geralmente vem do backend)
const purchase = {
  transaction_id: 'ORDER-2025-001',
  value: 179.80,
  currency: 'BRL',
  tax: 0,
  shipping: 15.00,
  items: [
    {
      item_id: 'PROD-123',
      item_name: 'Camiseta Premium',
      price: 89.90,
      quantity: 2
    }
  ]
};

// Aguardar Complyr carregar
document.addEventListener('complyr:loaded', function() {
  const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

  // GTM dataLayer (se Analytics aceito)
  if (consentData.purposes?.analytics?.granted) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'purchase',
      ecommerce: purchase
    });

    console.log('Purchase tracked (GA4):', purchase);
  }

  // Facebook Pixel (se Marketing aceito)
  if (consentData.purposes?.marketing?.granted && window.fbq) {
    fbq('track', 'Purchase', {
      content_ids: purchase.items.map(item => item.item_id),
      contents: purchase.items.map(item => ({
        id: item.item_id,
        quantity: item.quantity
      })),
      content_type: 'product',
      value: purchase.value,
      currency: purchase.currency,
      num_items: purchase.items.reduce((sum, item) => sum + item.quantity, 0)
    });

    console.log('Purchase tracked (FB Pixel):', purchase);
  }
});
</script>

Passo 6: Identificação de Usuários (Advanced Matching)

6.1. Após Login do Usuário

Quando usuário faz login, identifique-o no Complyr e FB Pixel:

<script>
// Função chamada após login bem-sucedido
function onUserLogin(userData) {
  // 1. Identificar no Complyr (hash SHA-256 automático)
  if (window.complyr) {
    window.complyr.identify('email', userData.email);
    console.log('Usuário identificado no Complyr');
  }

  // 2. Facebook Pixel Advanced Matching (se Marketing aceito)
  const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

  if (consentData.purposes?.marketing?.granted && window.fbq) {
    fbq('init', 'SEU_PIXEL_ID', {
      em: userData.email,                    // Email
      fn: userData.firstName,                // First name
      ln: userData.lastName,                 // Last name
      ph: userData.phone,                    // Phone
      ct: userData.city,                     // City
      st: userData.state,                    // State
      zp: userData.zipCode,                  // Zip code
      country: 'br'                          // Country
    });

    console.log('Advanced Matching configurado');
  }

  // 3. User ID no Google Analytics (se Analytics aceito)
  if (consentData.purposes?.analytics?.granted) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'login',
      user_id: userData.id,                  // ID interno do usuário
      user_properties: {
        customer_status: userData.isVip ? 'VIP' : 'Regular',
        total_orders: userData.totalOrders
      }
    });
  }
}

// Exemplo de uso após login
fetch('/api/auth/login', {
  method: 'POST',
  body: JSON.stringify({ email: 'user@example.com', password: 'xxx' })
})
.then(res => res.json())
.then(data => {
  if (data.success) {
    onUserLogin(data.user);
  }
});
</script>

Passo 7: Eventos Customizados

7.1. Busca no Site

Rastrear buscas de produtos:

<script>
function trackSearch(searchTerm, resultsCount) {
  const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

  // GTM
  if (consentData.purposes?.analytics?.granted) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'search',
      search_term: searchTerm,
      search_results: resultsCount
    });
  }

  // Facebook Pixel
  if (consentData.purposes?.marketing?.granted && window.fbq) {
    fbq('track', 'Search', {
      search_string: searchTerm,
      content_category: 'product'
    });
  }
}

// Exemplo
document.getElementById('search-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const term = document.getElementById('search-input').value;

  // Executar busca
  performSearch(term).then(results => {
    trackSearch(term, results.length);
  });
});
</script>

7.2. Lista de Desejos (Wishlist)

Rastrear adição à lista de desejos:

<script>
function trackAddToWishlist(product) {
  const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

  // Facebook Pixel (evento padrão)
  if (consentData.purposes?.marketing?.granted && window.fbq) {
    fbq('track', 'AddToWishlist', {
      content_ids: [product.id],
      content_name: product.name,
      value: product.price,
      currency: 'BRL'
    });
  }

  // GTM (evento customizado)
  if (consentData.purposes?.analytics?.granted) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'add_to_wishlist',
      ecommerce: {
        items: [{
          item_id: product.id,
          item_name: product.name,
          price: product.price
        }]
      }
    });
  }
}
</script>

7.3. Cupom Aplicado

Rastrear aplicação de cupom de desconto:

<script>
function trackCouponApplied(couponCode, discountValue) {
  const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

  if (consentData.purposes?.analytics?.granted) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'coupon_applied',
      coupon_code: couponCode,
      discount_value: discountValue,
      currency: 'BRL'
    });
  }
}

// Exemplo
document.getElementById('apply-coupon-btn').addEventListener('click', function() {
  const code = document.getElementById('coupon-input').value;

  applyCoupon(code).then(result => {
    if (result.success) {
      trackCouponApplied(code, result.discount);
    }
  });
});
</script>

Exemplo Completo de Página de Produto

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Camiseta Premium - Minha Loja</title>

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
  <!-- End Google Tag Manager -->
</head>
<body>

  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- Página de Produto -->
  <div class="product-page">
    <div class="product-image">
      <img src="/images/camiseta-premium.jpg" alt="Camiseta Premium">
    </div>

    <div class="product-info">
      <h1>Camiseta Premium</h1>
      <p class="price">R$ 89,90</p>
      <p class="description">Camiseta 100% algodão, confortável e durável.</p>

      <div class="options">
        <label>Tamanho:</label>
        <select id="size">
          <option value="P">P</option>
          <option value="M" selected>M</option>
          <option value="G">G</option>
          <option value="GG">GG</option>
        </select>

        <label>Quantidade:</label>
        <input type="number" id="quantity" value="1" min="1">
      </div>

      <button id="add-to-cart-btn" class="btn-primary">
        Adicionar ao Carrinho
      </button>

      <button id="add-to-wishlist-btn" class="btn-secondary">
        ♥ Adicionar à Lista de Desejos
      </button>
    </div>
  </div>

  <!-- Complyr Script -->
  <script
    src="https://app.complyr.com.br/tag/js"
    data-workspace-id="550e8400-e29b-41d4-a716-446655440000"
    data-complyr-script
    async
    defer>
  </script>

  <!-- Rastreamento de Produto -->
  <script>
    const product = {
      id: 'PROD-123',
      name: 'Camiseta Premium',
      price: 89.90,
      brand: 'Minha Marca',
      category: 'Roupas',
      variant: 'Azul'
    };

    // Rastrear visualização de produto
    document.addEventListener('complyr:loaded', function() {
      document.addEventListener('consent-updated', function(event) {
        // Google Analytics
        if (event.detail.analytics) {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            event: 'view_item',
            ecommerce: {
              items: [{
                item_id: product.id,
                item_name: product.name,
                currency: 'BRL',
                price: product.price,
                item_brand: product.brand,
                item_category: product.category,
                item_variant: product.variant
              }]
            }
          });
        }

        // Facebook Pixel
        if (event.detail.marketing && window.fbq) {
          fbq('track', 'ViewContent', {
            content_ids: [product.id],
            content_name: product.name,
            content_type: 'product',
            value: product.price,
            currency: 'BRL'
          });
        }
      });
    });

    // Adicionar ao carrinho
    document.getElementById('add-to-cart-btn').addEventListener('click', function() {
      const quantity = parseInt(document.getElementById('quantity').value);
      const size = document.getElementById('size').value;

      // Lógica de adicionar ao carrinho
      addToCartLogic(product, quantity, size);

      // Rastrear evento
      const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

      if (consentData.purposes?.analytics?.granted) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: 'add_to_cart',
          ecommerce: {
            items: [{
              item_id: product.id,
              item_name: product.name,
              currency: 'BRL',
              price: product.price,
              quantity: quantity,
              item_variant: size
            }]
          }
        });
      }

      if (consentData.purposes?.marketing?.granted && window.fbq) {
        fbq('track', 'AddToCart', {
          content_ids: [product.id],
          content_name: product.name,
          content_type: 'product',
          value: product.price * quantity,
          currency: 'BRL'
        });
      }

      alert('Produto adicionado ao carrinho!');
    });

    // Lista de desejos
    document.getElementById('add-to-wishlist-btn').addEventListener('click', function() {
      // Lógica de adicionar à wishlist
      addToWishlistLogic(product);

      const consentData = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

      if (consentData.purposes?.marketing?.granted && window.fbq) {
        fbq('track', 'AddToWishlist', {
          content_ids: [product.id],
          content_name: product.name,
          value: product.price,
          currency: 'BRL'
        });
      }

      alert('Produto adicionado à lista de desejos!');
    });
  </script>

</body>
</html>

Testes e Validação

GTM Preview Mode: 1. Acesse GTM → Preview 2. Digite URL do seu site 3. Verifique tags: - ✅ Tag "Consent Mode - Default State" dispara em All Pages - ✅ Tag "Consent Mode - Update" dispara em consent-updated - ✅ GA4 tag aguarda consentimento antes de enviar dados

Console do Navegador: 

// Verificar consent state
window.dataLayer.filter(item => item[0] === 'consent');

2. Testar Enhanced E-commerce

Google Analytics DebugView: 1. GA4 → Configure → DebugView 2. Navegue pelo site em modo debug 3. Verifique eventos: - view_item ao visualizar produto - add_to_cart ao adicionar ao carrinho - begin_checkout ao iniciar checkout - purchase ao concluir compra

3. Testar Facebook Pixel

Facebook Pixel Helper (Extensão Chrome): 1. Instale Facebook Pixel Helper 2. Navegue pelo site 3. Verifique eventos capturados: - ✅ PageView - ✅ ViewContent - ✅ AddToCart - ✅ InitiateCheckout - ✅ Purchase

Eventos Test (Facebook Events Manager): 1. Facebook Business Manager → Events Manager 2. Selecione seu Pixel 3. Aba "Test Events" 4. Insira código de teste do navegador 5. Navegue pelo site e veja eventos em tempo real

Problemas Comuns

Problema 1: Tags GTM não disparam após consentimento

Causa: Consent Mode bloqueando tags sem trigger adequado.

Solução: 1. Verifique se tag tem "Consent Settings" configurado 2. GA4 requer analytics_storage: granted 3. Google Ads requer ad_storage: granted

GTM Tag Settings: 

Consent Settings:
- Built-In Consent Types
  ✅ analytics_storage: Required
  ✅ ad_storage: Not Required (se não usar Ads)

Problema 2: Facebook Pixel rastreia antes do consentimento

Causa: Base Code carregando em All Pages em vez de aguardar consentimento.

Solução: - Trigger da tag FB Pixel deve ser consent-updated + consent_marketing = true - Nunca use "All Pages" como trigger para FB Pixel

Problema 3: Enhanced E-commerce não aparece no GA4

Causa: Parâmetros incorretos ou evento não sendo enviado.

Solução: 

// Verificar se dataLayer tem estrutura correta
window.dataLayer.push({
  event: 'purchase',        // Nome do evento correto
  ecommerce: {               // Objeto 'ecommerce' obrigatório
    transaction_id: 'xxx',   // transaction_id obrigatório
    value: 100,              // value obrigatório
    currency: 'BRL',         // currency obrigatório
    items: [...]             // items obrigatório
  }
});

Debugar: 

// Ver todos os eventos ecommerce enviados
window.dataLayer.filter(item => item.ecommerce);

Problema 4: Advanced Matching não funciona

Causa: Dados de usuário enviados em formato incorreto.

Solução: 

// ✅ CORRETO: Dados normalizados
fbq('init', 'PIXEL_ID', {
  em: 'user@example.com',        // Lowercase
  fn: 'joao',                    // Lowercase, sem acentos
  ln: 'silva',                   // Lowercase
  ph: '11987654321',             // Apenas números
  ct: 'sao paulo',               // Lowercase
  st: 'sp',                      // Lowercase
  zp: '01310100',                // Apenas números
  country: 'br'                  // Código ISO do país
});

// ❌ ERRADO: Dados não normalizados
fbq('init', 'PIXEL_ID', {
  em: 'User@Example.COM',        // Uppercase
  fn: 'João',                    // Com acento
  ph: '(11) 98765-4321'          // Com formatação
});

Checklist de Validação

  • GTM Container instalado corretamente
  • Script Complyr instalado antes do </body>
  • Consent Mode v2 configurado (default + update)
  • GA4 tag criada com Measurement ID correto
  • Facebook Pixel tag criada com Pixel ID correto
  • Trigger de consentimento funciona (consent-updated)
  • view_item rastreia visualizações de produto
  • add_to_cart rastreia adições ao carrinho
  • begin_checkout rastreia início de checkout
  • purchase rastreia compras concluídas
  • Advanced Matching configurado após login
  • Tags bloqueadas quando consent negado
  • Tags ativadas quando consent concedido
  • GTM Preview mode mostra tags disparando corretamente
  • GA4 DebugView mostra eventos em tempo real
  • Facebook Pixel Helper mostra eventos capturados
  • Sem erros no Console do navegador

Próximos Passos

Após implementar o e-commerce completo:

  1. Google Ads Conversion Tracking
  2. Configurar conversões no Google Ads
  3. Rastrear ROAS (Return on Ad Spend)

  4. Criar audiências de remarketing

  5. Dynamic Remarketing

  6. Criar catálogo de produtos no Facebook
  7. Configurar anúncios dinâmicos

  8. Criar audiências customizadas

  9. Server-Side Tracking (Avançado)

  10. Implementar Server-Side GTM
  11. Facebook Conversions API

  12. Melhorar precisão de dados

  13. A/B Testing

  14. Google Optimize
  15. Testes de conversão
  16. Otimização de checkout

Recursos Adicionais

Documentação Oficial

Ferramentas

Suporte

Conclusão

Parabéns! 🎉 Você implementou uma solução completa de rastreamento para e-commerce com:

  • ✅ Conformidade LGPD via Complyr
  • ✅ Google Tag Manager com Consent Mode v2
  • ✅ Google Analytics 4 com Enhanced E-commerce
  • ✅ Facebook Pixel com Advanced Matching
  • ✅ Rastreamento completo do funil de vendas

Agora você pode: - Medir ROI de campanhas com precisão - Criar audiências de remarketing segmentadas - Otimizar conversões com dados confiáveis - Respeitar a privacidade dos usuários

Próximo passo: Monitore os dados no GA4 e Facebook Events Manager, e otimize suas campanhas!

Precisa de ajuda? Entre em contato: contato@complyr.com.br