AI Web Push y Google Tag Manager

Esta publicación muestra, de forma directa y práctica, cómo usar los eventos de AI Web Push en Google Tag Manager (GTM), cómo activar el debug y cómo crear métricas y conversiones a partir de esos eventos. No necesitas ningún SDK adicional: todo llega a GTM vía dataLayer.push.

Visión general

Los eventos de push se envían a GTM mediante el dataLayer con el prefijo ai_web_push_... y el proveedor ai_web_push.

El campo push_source indica el origen:

• custom_modal: flujo mediante un modal personalizado.
• native_prompt: flujo directo por el prompt del navegador.

A partir de la versión 1.7.5, el plugin detecta automáticamente si el navegador admite notificaciones push. Si no las admite (WebViews de Instagram, Facebook, TikTok, iOS Safari fuera de una PWA, contextos sin HTTPS), se dispara el evento ai_web_push_browser_not_supported y el flujo termina sin errores.

Debug opcional: localStorage['ai-web-push-debug'] = 'true' para ver todos los eventos en la consola.

Eventos disponibles

Formato del push en GTM

Cada evento genera un dataLayer.push con este formato:

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

Cómo activar el debug (sin recargar)

En la consola del navegador:

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

Con el debug activo, cada evento muestra en la consola:

• Nombre del evento (ai_web_push_*)
• push_source y detalles
• Vista previa del objeto enviado al dataLayer
• Marca de tiempo

Cómo probar los escenarios

Navegador sin soporte (WebView, iOS Safari): Esperado: browser_not_supported. El flujo termina de inmediato, sin errores en la consola.

Modal personalizado, el usuario acepta: Esperado: modal_shown → modal_accepted → prompt_shown → permission_granted → subscription_success.

Modal personalizado, el usuario cancela: Esperado: modal_shown → modal_dismissed.

Modal personalizado, el usuario acepta el modal pero rechaza el prompt: Esperado: modal_shown → modal_accepted → prompt_shown → permission_denied.

Prompt nativo directo (Chrome), el usuario acepta: Esperado: prompt_shown → permission_granted → subscription_success.

Prompt nativo directo (Chrome), el usuario rechaza: Esperado: prompt_shown → permission_denied.

Cómo crear etiquetas en GTM

Activador: Evento personalizado = ai_web_push_subscription_success

Variables útiles:

• push_source para segmentar modal vs. prompt.
• push_provider (siempre ai_web_push, útil si hay otros proveedores).

Etiquetas recomendadas:

• GA4: conversión de suscripción push.
• Google Ads: conversión de lead/suscripción.
• Facebook Pixel: evento personalizado de suscripción.
• Hotjar/Clarity: eventos de embudo.

Etiqueta adicional recomendada: Crea un activador para ai_web_push_browser_not_supported y envíalo como evento a GA4. Esto te permite monitorear cuántos visitantes acceden al sitio en navegadores sin soporte push, ayudando a dimensionar el impacto real y ajustar la estrategia.

Captura manual (sin GTM)

Puedes escuchar los eventos en el 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 disponibles: browser_not_supported, modal_shown, modal_accepted, modal_dismissed, prompt_shown, permission_granted, permission_denied, subscription_success, subscription_error.

Buenas prácticas

• Usa push_source para comparar el modal vs. el prompt nativo y optimizar el recorrido.
• Monitorea subscription_error como alerta en GTM (caídas de conversión).
• Monitorea browser_not_supported para entender qué porcentaje de visitantes usa navegadores incompatibles y ajustar la estrategia de engagement.
• Deja el debug apagado en producción; actívalo solo para solucionar problemas.

Referencias rápidas

• Prefijo del evento: ai_web_push_...
• Proveedor: ai_web_push
• Debug: localStorage['ai-web-push-debug']='true'
• Total de eventos: 9 (mira la tabla en "Eventos disponibles")