Google Tag Manager

Como criar relatórios de Web Push no GA4 via GTM

9 de março de 2026 No comments yet

Este é o guia mais completo para integrar o plugin AI Web Push com o Google Tag Manager (GTM) e Google Analytics 4 (GA4).

Ao final deste tutorial, você não apenas saberá quantas pessoas se inscreveram, mas entenderá onde você está perdendo usuários no funil de permissão, qual a taxa de rejeição do prompt nativo e como monitorar erros técnicos em tempo real.

⚠️ Importante: Para ter acesso a todos os eventos descritos neste guia, certifique-se de que seu plugin AI Web Push esteja atualizado para a versão 1.7.6 ou superior. Verifique a versão instalada na página de plugins do seu WordPress.

Por que monitorar eventos de Push?

A inscrição em Web Push é um funil de conversão crítico para qualquer site que busca reter audiência.

  1. Funil de Permissão: O usuário vê o modal? Ele clica em aceitar? Ele confirma no navegador?
  2. Origem da Conversão: O modal personalizado converte melhor que o prompt nativo direto?
  3. Monitoramento de Erros: Falhas na comunicação com o Firebase ou bloqueios de navegador.

O plugin AI Web Push expõe 9 eventos detalhados na camada de dados (dataLayer) para permitir essa análise profunda.

Mapeamento Completo de Eventos

Todos os eventos são enviados com o prefixo ai_web_push_.

EventoDescriçãoMomento do Disparo
ai_web_push_browser_not_supportedNavegador incompatívelQuando o script detecta que o browser não suporta Push API (ex: WebViews, iOS antigo).
ai_web_push_modal_shownModal ExibidoO modal HTML personalizado apareceu na tela.
ai_web_push_modal_acceptedModal AceitoUsuário clicou no botão “Aceitar” do modal personalizado.
ai_web_push_modal_dismissedModal CanceladoUsuário clicou em “Cancelar” ou fechou o modal.
ai_web_push_prompt_shownPrompt Nativo ExibidoO navegador exibiu a caixa de permissão nativa (Notification.requestPermission).
ai_web_push_permission_grantedPermissão ConcedidaUsuário clicou em “Permitir” no prompt nativo.
ai_web_push_permission_deniedPermissão NegadaUsuário clicou em “Bloquear” ou fechou o prompt nativo.
ai_web_push_subscription_successSucesso (Conversão)O token FCM foi gerado com sucesso. O usuário está inscrito.
ai_web_push_subscription_errorErro TécnicoFalha ao obter o token (erro de rede, configuração inválida, etc).

Parâmetros Enviados

Junto com cada evento, enviamos dados extras para segmentação:

  • push_provider: Sempre ai_web_push (útil para filtrar se você tiver outros scripts).
  • push_source:
    • custom_modal: O fluxo começou pelo modal personalizado do plugin.
    • native_prompt: O fluxo foi direto pelo prompt nativo do navegador.
  • error: (Apenas no evento de erro) A mensagem técnica do erro.

Parte 1: Configuração no Google Tag Manager (GTM)

Vamos configurar o GTM para “ler” esses dados e enviá-los ao GA4.

Passo 1: Criar Variáveis de Camada de Dados

Precisamos capturar os parâmetros que o plugin envia.

  1. Vá em Variáveis > Nova (Variáveis definidas pelo usuário).
  2. Configuração: Variável de camada de dados.
  3. Crie as seguintes variáveis:
Nome da Variável no GTMNome da Variável de Camada de DadosDescrição
dlv - push_sourcepush_sourceOrigem (modal ou nativo)
dlv - push_providerpush_providerProvedor (ai_web_push)
dlv - push_errorerrorMensagem de erro (opcional)

Passo 2: Criar um Acionador Inteligente (Regex)

Em vez de criar 9 acionadores diferentes, vamos usar uma Expressão Regular (Regex) para capturar todos os eventos do plugin de uma só vez. Isso mantém seu GTM limpo.

  1. Vá em Acionadores > Novo.
  2. Tipo: Evento Personalizado.
  3. Nome do evento: ^ai_web_push_.*
    • Explicação: O ^ significa “começa com”, e .* significa “qualquer coisa depois”. Isso captura todos os 9 eventos.
  4. Configuração: Marque a opção “Usar correspondência de regex” ao lado do nome do evento.
  5. Nome do Acionador: Event - AI Web Push (All).
  6. Salve.

Passo 3: Criar a Tag Genérica do GA4

Agora, uma única tag vai enviar todos os eventos para o GA4, mantendo o nome original ou limpando-o.

  1. Vá em Tags > Nova.
  2. Tipo: Google Analytics: evento do GA4.
  3. ID da métrica: Sua tag de configuração do GA4.
  4. Nome do evento: {{Event}}
    • Dica Pro: Usando a variável automática {{Event}}, o GA4 receberá o nome exato do evento (ex: ai_web_push_subscription_success). Se quiser limpar o nome (ex: remover o prefixo), você pode criar uma Variável de Tabela de Regex no GTM, mas enviar o nome original é mais simples e funciona perfeitamente.
  5. Parâmetros do evento: Adicione os parâmetros para análise:
    • source: {{dlv - push_source}}
    • provider: {{dlv - push_provider}}
    • error_message: {{dlv - push_error}}
  6. Acionamento: Selecione o acionador Event - AI Web Push (All) que criamos.
  7. Salve e Publique o container.

Parte 2: Configuração no Google Analytics 4 (GA4)

Agora os dados estão chegando no GA4. Vamos organizá-los.

1. Marcar a Conversão Principal

O evento mais importante é o ai_web_push_subscription_success.

  1. No GA4, vá em Administrador > Exibição de Dados > Eventos principais (antigo Conversões).
  2. Clique em Novo evento principal.
  3. Nome do evento: ai_web_push_subscription_success.
  4. Salve.

Agora, toda inscrição contará como uma conversão nos seus relatórios de aquisição e engajamento.

2. Criar Dimensões Personalizadas (Opcional mas Recomendado)

Para usar os parâmetros source e error_message nos relatórios, você deve registrá-los.

  1. Vá em Administrador > Exibição de Dados > Definições personalizadas.
  2. Criar dimensão personalizada:
    • Nome da dimensão: Push Source
    • Parâmetro do evento: source
  3. Criar dimensão personalizada:
    • Nome da dimensão: Push Error Message
    • Parâmetro do evento: error_message

Parte 3: Relatórios Avançados (Explorar)

Aqui é onde a mágica acontece. Vamos criar visualizações que o relatório padrão não mostra.

Relatório 1: O Funil de Permissão Real

Descubra onde os usuários desistem.

  1. No GA4, vá em Explorar > Em branco.
  2. Selecione a técnica Exploração de funil.
  3. Configure as etapas:
    • Etapa 1 (Visualizou): Evento ai_web_push_modal_shown OU ai_web_push_prompt_shown.
    • Etapa 2 (Interagiu): Evento ai_web_push_modal_accepted.
    • Etapa 3 (Permitiu): Evento ai_web_push_permission_granted.
    • Etapa 4 (Inscreveu): Evento ai_web_push_subscription_success.
  4. Resultado: Você verá visualmente a taxa de queda (drop-off) em cada etapa.

Relatório 2: Comparativo de Origem (Modal vs Nativo)

Qual método converte mais?

  1. Crie uma Exploração de formato livre.
  2. Nas Linhas, arraste a dimensão Push Source.
  3. Nas Colunas, arraste o evento ai_web_push_subscription_success.
  4. Resultado: Uma tabela comparando quantos inscritos vieram via custom_modal vs native_prompt.

Relatório 3: Monitoramento de Erros

Seus usuários estão tendo problemas técnicos?

  1. Crie uma Exploração de formato livre.
  2. Filtre pelo evento ai_web_push_subscription_error.
  3. Nas Linhas, coloque a dimensão Push Error Message.
  4. Nas Valores, coloque Contagem de eventos.
  5. Resultado: Uma lista dos erros mais comuns (ex: “Notifications blocked”, “Network error”).

Captura Manual via JavaScript (Para Desenvolvedores)

Se você não usa GTM e quer enviar os dados diretamente para seu CRM, banco de dados ou outra ferramenta de analytics, você pode usar o sistema de eventos do plugin.

O objeto global aiWebPushFront expõe um método on() para escutar eventos.

// Exemplo: Enviar inscrição para seu backend/CRM
if (window.aiWebPushFront) {
    window.aiWebPushFront.on('subscription_success', function(detail) {
        console.log('Usuário inscrito!', detail);
        
        // Exemplo: fetch para sua API
        fetch('/minha-api/registrar-push', {
            method: 'POST',
            body: JSON.stringify({
                token: detail.token, // O plugin pode expor o token no detail dependendo da versão
                source: detail.source
            })
        });
    });

    // Exemplo: Monitorar erros
    window.aiWebPushFront.on('subscription_error', function(detail) {
        console.error('Erro no push:', detail.error);
    });
}

Como Debugar e Testar

Não publique sem testar!

  1. Ative o Modo Debug do Plugin:
    • Abra o console do navegador (F12).
    • Digite: localStorage.setItem('ai-web-push-debug', 'true')
    • Recarregue a página.
    • Agora o plugin mostrará logs coloridos no console para cada etapa.
  2. Use o GTM Preview:
    • Clique em “Visualizar” no GTM.
    • Conecte ao seu site.
    • Realize o fluxo de inscrição.
    • Na aba do Tag Assistant, verifique se os eventos ai_web_push_* aparecem na barra lateral esquerda e se a tag do GA4 disparou.
  3. DebugView do GA4:
    • No GA4, vá em Admin > DebugView.
    • Você deve ver os eventos chegando em tempo real na linha do tempo.

Resumo dos Arquivos Envolvidos

  • Plugin: Emite os eventos no dataLayer.
  • GTM: Captura os eventos via Trigger Regex e envia ao GA4.
  • GA4: Processa os dados, marca conversões e gera relatórios.

Com essa configuração, você tem um observatório completo da saúde e performance das suas notificações Web Push.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *