Testando a Integração¶

Guia completo para testar e validar a integração Complyr + Google Tag Manager antes de publicar em produção.

✅ Checklist de Validação¶

Use este checklist para garantir que a integração está funcionando corretamente:

🔍 Método 1: GTM Preview Mode¶

O modo de visualização do GTM é a forma mais confiável de testar a integração.

Passo 1: Ativar Preview Mode¶

Acesse seu contêiner do GTM em tagmanager.google.com
Clique no botão "Visualizar" (Preview) no canto superior direito
Digite a URL do seu site de testes
Clique em "Connect"

Uma nova janela se abrirá com o Tag Assistant.

Passo 2: Validar Consentimento Padrão¶

No carregamento inicial da página:

Na janela do Tag Assistant, selecione a aba "Consent"
Verifique o estado "Default"
Confirme que as chaves estão como denied:
analytics_storage: denied
ad_storage: denied
ad_user_data: denied
ad_personalization: denied

Esperado

Todas as chaves não essenciais devem estar como denied no carregamento inicial, ANTES do usuário interagir com o banner.

No site (não na janela Tag Assistant):

Observe o banner Complyr aparecer
Clique em "Aceitar Todos" (ou personalize)

No Tag Assistant:

Você verá um novo evento Consent com estado "Update"
Verifique que as chaves mudaram para granted:
analytics_storage: granted
ad_storage: granted (se aceitou marketing)
etc.

Passo 4: Validar Disparo de Tags¶

Vá para a aba "Tags" no Tag Assistant
Verifique que suas tags NÃO dispararam antes do consentimento
Após aceitar, confirme que as tags dispararam corretamente

Exemplo:

❌ Google Analytics 4 - Not Fired (antes do consentimento)
✅ Google Analytics 4 - Fired (após consentimento)
   analytics_storage: granted ✓

Tags Bloqueadas

Se uma tag disparar ANTES do consentimento, ela não está configurada corretamente. Revise as configurações de consentimento.

Passo 5: Verificar Eventos Customizados¶

Na aba "Summary" do Tag Assistant:

Procure pelo evento "complyr_accept_all" (ou outro evento de consentimento)
Clique no evento
Verifique que as variáveis estão presentes:
complyr_workspace_id
complyr_consent_status
complyr_purposes_granted
etc.

🌐 Método 2: Inspeção do dataLayer (Console)¶

Use o console do navegador para inspecionar o dataLayer diretamente.

Passo 1: Abrir Console¶

Abra seu site
Pressione F12 (ou Cmd+Option+I no Mac)
Vá para a aba "Console"

Passo 2: Inspecionar dataLayer¶

Digite no console:

dataLayer

Você verá um array com todos os eventos enviados. Procure por:

Consentimento Padrão:

{
  event: "consent",
  "gtm.uniqueEventId": 1,
  consent: "default",
  analytics_storage: "denied",
  ad_storage: "denied",
  ad_user_data: "denied",
  ad_personalization: "denied"
}

Evento Complyr:

{
  event: "complyr_accept_all",
  complyr_workspace_id: "a1b2c3d4-...",
  complyr_consent_status: "granted",
  complyr_purposes_granted: ["analytics", "marketing"],
  ...
}

Passo 3: Monitorar em Tempo Real¶

Para ver eventos conforme disparam, use:

window.dataLayer.push = new Proxy(window.dataLayer.push, {
  apply(target, thisArg, argumentsList) {
    console.log('dataLayer.push:', argumentsList[0]);
    return target.apply(thisArg, argumentsList);
  }
});

Cole este código ANTES do script Complyr carregar (no console) para interceptar todos os pushes.

🔧 Método 3: Google Tag Assistant (Extensão)¶

A extensão Tag Assistant Legacy ajuda a debugar tags.

Instalação¶

Instale a extensão Tag Assistant Legacy
Abra seu site
Clique no ícone da extensão
Clique em "Enable" e recarregue a página

Validação¶

Tags Verdes (✓): - Tag configurada corretamente - Disparou sem erros

Tags Azuis (i): - Tag com avisos (geralmente não é problema)

Tags Vermelhas (✗): - Tag com erro - Precisa de correção

📊 Método 4: Google Analytics DebugView¶

Para validar eventos do GA4 em tempo real.

Passo 1: Ativar DebugView¶

Opção 1: Extensão do Chrome Instale Google Analytics Debugger

Opção 2: Parâmetro de URL Adicione ?debug_mode=true na URL do seu site

Passo 2: Ver Eventos em Tempo Real¶

Acesse Google Analytics
Vá em Reports → Realtime → DebugView
Interaja com o banner Complyr no seu site
Veja os eventos aparecerem em tempo real

Eventos Esperados: - consent_banner_shown - accept_all_consents - page_view (com consent)

🧪 Cenários de Teste¶

Execute estes cenários completos para validar todos os fluxos.

Cenário 1: Primeira Visita - Aceitar Todos¶

Abra site em janela anônima
Aguarde banner aparecer
Clique em "Aceitar Todos"
Validar:
✅ Evento complyr_banner_shown disparado
✅ Evento complyr_accept_all disparado
✅ dataLayer recebeu consent: 'update' com granted
✅ Tags do GA4 e Google Ads dispararam
✅ Consentimento salvo em localStorage

Cenário 2: Primeira Visita - Apenas Essenciais¶

Abra site em janela anônima
Aguarde banner aparecer
Clique em "Apenas Essenciais"
Validar:
✅ Evento complyr_essential_only disparado
✅ dataLayer recebeu consent: 'update' com denied
✅ Tags de analytics NÃO dispararam
✅ Consentimento salvo como denied

Cenário 3: Personalizar Consentimento¶

Abra site em janela anônima
Clique em "Personalizar" no banner
Habilite apenas "Analytics"
Desabilite "Marketing"
Clique em "Salvar Preferências"
Validar:
✅ Evento complyr_preferences_opened disparado
✅ Evento complyr_preferences_saved disparado
✅ analytics_storage: granted
✅ ad_storage: denied
✅ Tag GA4 disparou
✅ Tag Google Ads NÃO disparou

Cenário 4: Visita Subsequente¶

Aceite consentimento (cenário 1)
Feche navegador
Reabra mesmo site (mesma janela anônima se ainda aberta, ou navegador normal)
Validar:
✅ Banner NÃO apareceu
✅ Consentimento carregado do localStorage
✅ dataLayer atualizado automaticamente
✅ Tags dispararam imediatamente

Cenário 5: Revogar Consentimento¶

Aceite consentimento
Abra o painel de preferências (link no footer)
Clique em "Revogar Consentimento"
Validar:
✅ Evento complyr_consent_revoked disparado
✅ localStorage limpo
✅ dataLayer atualizado para denied
✅ Banner aparece novamente na próxima visita

🔍 Validações Técnicas¶

Validar Ordem de Carregamento¶

Scripts devem carregar nesta ordem:

1. <script data-complyr-script>  ← PRIMEIRO
2. <script> GTM </script>         ← DEPOIS
3. Outras tags via GTM            ← POR ÚLTIMO

Como validar:

Abra DevTools → Network
Recarregue página
Ordene por "Time"
Verifique que Complyr carrega antes do GTM

Validar localStorage¶

No console:

// Ver consentimento salvo
JSON.parse(localStorage.getItem('complyr_consent'))

// Deve retornar algo como:
{
  status: "granted",
  purposes: {
    analytics: true,
    marketing: true,
    personalization: false
  },
  timestamp: "2025-10-22T14:30:00Z"
}

Validar Persistência de Sessão¶

Aceite consentimento
Navegue para outra página do site
Verifique que:
Banner não apareceu novamente
dataLayer foi atualizado automaticamente
Tags dispararam normalmente

❌ Problemas Comuns¶

Possíveis causas: - workspace-id incorreto no script - Script não carregou (erro 404) - Banner já foi aceito (checar localStorage)

Solução: Ver Solução de Problemas

Tags Disparam Sem Consentimento¶

Possíveis causas: - Tags não configuradas com consentimento obrigatório - Consent Mode não habilitado no GTM

Solução: Ver Configuração de Tags

Eventos Complyr Não Disparam¶

Possíveis causas: - GTM não detectado (window.dataLayer não existe) - Erros JavaScript bloqueando script

Solução: Checar console para erros. Ver Troubleshooting

📝 Checklist Final Antes de Publicar¶

Antes de publicar sua versão do GTM para produção:

Testei em Preview Mode sem erros
Validei todos os 5 cenários de teste
Confirmei que tags respeitam consentimento
Verifiquei eventos customizados no GA4 DebugView
Testei em navegadores diferentes (Chrome, Firefox, Safari)
Testei em mobile (responsivo)
Validei persistência entre sessões
Documentei configurações customizadas (se houver)

🚀 Próximos Passos¶

Solução de Problemas - Resolva problemas comuns
Eventos Customizados - Entenda os eventos
Consent Mode v2 - Detalhes técnicos
Configuração - Revise a configuração