AI Web Push e Google Tag Manager

Este post mostra, de forma direta e prática, como usar os eventos do AI Web Push no Google Tag Manager (GTM), como ativar o debug e como criar métricas e conversões com base nesses eventos. Não precisa de SDK extra: tudo chega ao GTM via dataLayer.push.

Visão geral

Os eventos de push são enviados ao GTM via dataLayer com prefixo ai_web_push_... e provider ai_web_push.

O campo push_source indica a origem:

• custom_modal: fluxo via modal personalizado.
• native_prompt: fluxo direto no prompt do navegador.

A partir da versão 1.7.5, o plugin detecta automaticamente se o navegador suporta notificações push. Caso não suporte (WebViews do Instagram, Facebook, TikTok, iOS Safari fora de PWA, contextos sem HTTPS), o evento ai_web_push_browser_not_supported é disparado e o fluxo encerra sem erros.

Debug opcional: localStorage['ai-web-push-debug'] = 'true' para ver todos os eventos no console.

Eventos disponíveis

Formato do push no GTM

Cada evento gera um dataLayer.push neste formato:

{
  "event": "ai_web_push_<nome_do_evento>",
  "push_provider": "ai_web_push",
  "push_source": "custom_modal | native_prompt"
}

Como ativar o debug (sem recarregar)

No console do navegador:

localStorage.setItem('ai-web-push-debug', 'true');
// para desativar:
// localStorage.removeItem('ai-web-push-debug');

Com o debug ativo, cada evento mostra no console:

• Nome do evento (ai_web_push_*)
• push_source e detalhes
• Preview do objeto enviado ao dataLayer
• Timestamp

Como testar os cenários

Navegador sem suporte (WebView, iOS Safari): Esperado: browser_not_supported. O fluxo encerra imediatamente, sem erros no console.

Modal personalizado, usuário aceita: Esperado: modal_shown → modal_accepted → prompt_shown → permission_granted → subscription_success.

Modal personalizado, usuário cancela: Esperado: modal_shown → modal_dismissed.

Modal personalizado, usuário aceita o modal mas nega o prompt: Esperado: modal_shown → modal_accepted → prompt_shown → permission_denied.

Prompt nativo direto (Chrome), usuário aceita: Esperado: prompt_shown → permission_granted → subscription_success.

Prompt nativo direto (Chrome), usuário nega: Esperado: prompt_shown → permission_denied.

Como criar tags no GTM

Trigger: Evento personalizado = ai_web_push_subscription_success

Variáveis úteis:

• push_source para segmentar modal vs prompt.
• push_provider (sempre ai_web_push — bom se houver outros provedores).

Tags recomendadas:

• GA4: conversão de inscrição push.
• Google Ads: conversão de lead/inscrição.
• Facebook Pixel: evento customizado de inscrição.
• Hotjar/Clarity: eventos de funil.

Tag adicional recomendada: Crie um trigger para ai_web_push_browser_not_supported e envie como evento ao GA4. Isso permite monitorar quantos visitantes acessam o site em navegadores sem suporte a push, ajudando a dimensionar o impacto real e ajustar a estratégia.

Captura manual (sem GTM)

Você pode ouvir os eventos no navegador:

aiWebPushFront.on('subscription_success', (detail) => {
  console.log('Nova inscrição via', detail.source);
});

// Detectar navegadores sem suporte:
aiWebPushFront.on('browser_not_supported', (detail) => {
  console.log('Navegador não suporta push notifications');
  // Exemplo: esconder botão de push, exibir mensagem alternativa
});

Eventos disponíveis: browser_not_supported, modal_shown, modal_accepted, modal_dismissed, prompt_shown, permission_granted, permission_denied, subscription_success, subscription_error.

Melhores práticas

• Use push_source para comparar modal vs prompt nativo e otimizar a jornada.
• Monitore subscription_error como alerta no GTM (quedas de conversão).
• Monitore browser_not_supported para entender qual porcentagem de visitantes usa navegadores incompatíveis e ajustar a estratégia de engajamento.
• Deixe o debug desligado em produção; ative apenas para troubleshooting.

Referências rápidas

• Prefixo de evento: ai_web_push_...
• Provider: ai_web_push
• Debug: localStorage['ai-web-push-debug']='true'
• Total de eventos: 9 (veja a tabela em “Eventos disponíveis”)