Cómo crear informes de Web Push en GA4 vía GTM

Esta es la guía más completa para integrar el plugin AI Web Push con Google Tag Manager (GTM) y Google Analytics 4 (GA4).

Al final de este tutorial, no solo sabrás cuántas personas se suscribieron, sino que entenderás dónde estás perdiendo usuarios en el embudo de permisos, cuál es la tasa de rechazo del prompt nativo y cómo monitorear errores técnicos en tiempo real.

⚠️ Importante: Para tener acceso a todos los eventos descritos en esta guía, asegúrate de que tu plugin AI Web Push esté actualizado a la versión 1.7.6 o superior. Verifica la versión instalada en la página de plugins de tu WordPress.

¿Por qué monitorear los eventos de Push?

La suscripción a Web Push es un embudo de conversión crítico para cualquier sitio que busque retener audiencia.

1. Embudo de Permisos: ¿El usuario ve el modal? ¿Hace clic en aceptar? ¿Confirma en el navegador?
2. Origen de la Conversión: ¿El modal personalizado convierte mejor que el prompt nativo directo?
3. Monitoreo de Errores: Fallas en la comunicación con Firebase o bloqueos del navegador.

El plugin AI Web Push expone 9 eventos detallados en la capa de datos (dataLayer) para permitir este análisis profundo.

Mapeo Completo de Eventos

Todos los eventos se envían con el prefijo ai_web_push_.

Parámetros Enviados

Junto con cada evento, enviamos datos adicionales para segmentación:

• push_provider: Siempre ai_web_push (útil para filtrar si tienes otros scripts).
• push_source:
  • custom_modal: El flujo comenzó por el modal personalizado del plugin.
  • native_prompt: El flujo fue directo por el prompt nativo del navegador.
• error: (Solo en el evento de error) El mensaje técnico del error.

Parte 1: Configuración en Google Tag Manager (GTM)

Vamos a configurar el GTM para "leer" estos datos y enviarlos a GA4.

Paso 1: Crear Variables de Capa de Datos

Necesitamos capturar los parámetros que envía el plugin.

1. Ve a Variables > Nueva (Variables definidas por el usuario).
2. Configuración: Variable de capa de datos.
3. Crea las siguientes variables:

Paso 2: Crear un Activador Inteligente (Regex)

En lugar de crear 9 activadores diferentes, usaremos una Expresión Regular (Regex) para capturar todos los eventos del plugin de una sola vez. Esto mantiene tu GTM ordenado.

1. Ve a Activadores > Nuevo.
2. Tipo: Evento Personalizado.
3. Nombre del evento: ^ai_web_push_.*
   • Explicación: El ^ significa "comienza con", y .* significa "cualquier cosa después". Esto captura los 9 eventos.
4. Configuración: Marca la opción "Usar coincidencia de regex" junto al nombre del evento.
5. Nombre del Activador: Event - AI Web Push (All).
6. Guarda.

Paso 3: Crear la Etiqueta Genérica de GA4

Ahora, una sola etiqueta enviará todos los eventos a GA4, manteniendo el nombre original o limpiándolo.

1. Ve a Etiquetas > Nueva.
2. Tipo: Google Analytics: evento de GA4.
3. ID de medición: Tu etiqueta de configuración de GA4.
4. Nombre del evento: {{Event}}
   • Consejo Pro: Usando la variable automática {{Event}}, GA4 recibirá el nombre exacto del evento (ej.: ai_web_push_subscription_success). Si quieres limpiar el nombre (ej.: quitar el prefijo), puedes crear una Variable de Tabla de Regex en GTM, pero enviar el nombre original es más simple y funciona perfectamente.
5. Parámetros del evento: Agrega los parámetros para el análisis:
   • source: {{dlv - push_source}}
   • provider: {{dlv - push_provider}}
   • error_message: {{dlv - push_error}}
6. Activación: Selecciona el activador Event - AI Web Push (All) que creamos.
7. Guarda y Publica el contenedor.

Parte 2: Configuración en Google Analytics 4 (GA4)

Ahora los datos están llegando a GA4. Vamos a organizarlos.

1. Marcar la Conversión Principal

El evento más importante es ai_web_push_subscription_success.

1. En GA4, ve a Administrador > Visualización de Datos > Eventos clave (antes Conversiones).
2. Haz clic en Nuevo evento clave.
3. Nombre del evento: ai_web_push_subscription_success.
4. Guarda.

Ahora, cada suscripción contará como una conversión en tus informes de adquisición y engagement.

2. Crear Dimensiones Personalizadas (Opcional pero Recomendado)

Para usar los parámetros source y error_message en los informes, debes registrarlos.

1. Ve a Administrador > Visualización de Datos > Definiciones personalizadas.
2. Crear dimensión personalizada:
   • Nombre de la dimensión: Push Source
   • Parámetro del evento: source
3. Crear dimensión personalizada:
   • Nombre de la dimensión: Push Error Message
   • Parámetro del evento: error_message

Parte 3: Informes Avanzados (Explorar)

Aquí es donde ocurre la magia. Vamos a crear visualizaciones que el informe estándar no muestra.

Informe 1: El Embudo de Permisos Real

Descubre dónde abandonan los usuarios.

1. En GA4, ve a Explorar > En blanco.
2. Selecciona la técnica Exploración de embudo.
3. Configura las etapas:
   • Etapa 1 (Vio): Evento ai_web_push_modal_shown O ai_web_push_prompt_shown.
   • Etapa 2 (Interactuó): Evento ai_web_push_modal_accepted.
   • Etapa 3 (Permitió): Evento ai_web_push_permission_granted.
   • Etapa 4 (Se suscribió): Evento ai_web_push_subscription_success.
4. Resultado: Verás visualmente la tasa de abandono (drop-off) en cada etapa.

Informe 2: Comparativo de Origen (Modal vs. Nativo)

¿Qué método convierte más?

1. Crea una Exploración de formato libre.
2. En Filas, arrastra la dimensión Push Source.
3. En Columnas, arrastra el evento ai_web_push_subscription_success.
4. Resultado: Una tabla que compara cuántos suscritos vinieron vía custom_modal vs. native_prompt.

Informe 3: Monitoreo de Errores

¿Tus usuarios están teniendo problemas técnicos?

1. Crea una Exploración de formato libre.
2. Filtra por el evento ai_web_push_subscription_error.
3. En Filas, coloca la dimensión Push Error Message.
4. En Valores, coloca Recuento de eventos.
5. Resultado: Una lista de los errores más comunes (ej.: "Notifications blocked", "Network error").

Captura Manual vía JavaScript (Para Desarrolladores)

Si no usas GTM y quieres enviar los datos directamente a tu CRM, base de datos u otra herramienta de analítica, puedes usar el sistema de eventos del plugin.

El objeto global aiWebPushFront expone un método on() para escuchar 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);
    });
}

Cómo Depurar y Probar

¡No publiques sin probar!

1. Activa el Modo Debug del Plugin:
   • Abre la consola del navegador (F12).
   • Escribe: localStorage.setItem('ai-web-push-debug', 'true')
   • Recarga la página.
   • Ahora el plugin mostrará registros de colores en la consola para cada etapa.
2. Usa la Vista Previa de GTM:
   • Haz clic en "Vista previa" en GTM.
   • Conéctate a tu sitio.
   • Realiza el flujo de suscripción.
   • En la pestaña de Tag Assistant, verifica si los eventos ai_web_push_* aparecen en la barra lateral izquierda y si se disparó la etiqueta de GA4.
3. DebugView de GA4:
   • En GA4, ve a Admin > DebugView.
   • Deberías ver los eventos llegando en tiempo real en la línea de tiempo.

Resumen de los Archivos Involucrados

• Plugin: Emite los eventos en el dataLayer.
• GTM: Captura los eventos mediante un Activador Regex y los envía a GA4.
• GA4: Procesa los datos, marca conversiones y genera informes.

Con esta configuración, tienes un observatorio completo de la salud y el rendimiento de tus notificaciones Web Push.