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.

Actualizado para la versión 1.9.3 del plugin. La versión 1.9.3 trae dos eventos nuevos, ai_web_push_permission_timeout y ai_web_push_subscription_skipped, y dos orígenes nuevos en push_source. Lo que cambió con Chrome 155 está en el artículo El aviso de notificación de Chrome cambió en Android.

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.
• site_controls indica que el visitante permitió las notificaciones después, desde los controles del sitio en el navegador. Aparece en los eventos de suscripción, a partir de la versión 1.9.3.
• permission_preexisting indica que el visitante ya había dado el permiso en el navegador, pero aún no estaba registrado en AI Web Push, y el plugin lo registra en la siguiente visita. Aparece en los eventos de suscripción, a partir de la versión 1.9.3.

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 | site_controls | permission_preexisting"
}

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 → modal_dismissed.

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 → modal_dismissed.

Prompt nativo directo en Chrome 155 para Android, el visitante lo ignora y el aviso vence, o lo cierra sin responder. Esperado a partir de la versión 1.9.3, prompt_shown → permission_timeout, sin permission_denied. La solicitud solo vuelve después del Intervalo de reexhibición, en otra página.

El visitante dejó vencer la solicitud y después permitió las notificaciones desde los controles del sitio. Esperado a partir de la versión 1.9.3, sin recargar la página, subscription_success con push_source igual a site_controls. Si el mismo navegador ya estaba registrado con el mismo token, se dispara subscription_skipped.

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.

Activadores nuevos a partir de la versión 1.9.3. Crea un activador de Evento personalizado para ai_web_push_permission_timeout y envíalo a GA4 como evento, para separar a quien no decidió de quien rechazó. No uses ai_web_push_subscription_skipped como conversión, porque indica un navegador que ya estaba registrado. Si usas un activador único con la expresión regular ^ai_web_push_.*, como en el tutorial Cómo crear informes de Web Push en GA4 vía GTM, los eventos nuevos ya entran en él sin cambios.

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, permission_timeout, subscription_success, subscription_skipped, 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.
• Para medir el rechazo real, usa permission_denied. Quien no decidió aparece en permission_timeout y todavía puede aceptar después. Para comparar con el período anterior a la versión 1.9.3, suma los dos.
• subscription_success marca el envío de la suscripción, no la confirmación del servidor.
• 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 de la tabla, 11 a partir de la versión 1.9.3, sin contar los de salida del WebView (mira la tabla en "Eventos disponibles")