Saltar al contenido principal
Esta guía explica cómo integrar OneSignal con tu sitio web usando Google Tag Manager (GTM). Cubre la configuración del service worker de OneSignal, el código de inicialización actualizado e introduce un nuevo paso para enviar etiquetas de perfil de usuario (atributos) a OneSignal.

​
Configurar tu aplicación OneSignal

Sigue nuestra documentación de Configuración de web push. Cuando se te solicite, anota tu App ID, que reemplazarás en el código a continuación.

​
Copiar y actualizar el código de inicialización de OneSignal

Cuando llegues al paso Add Code to Site, haz clic en Copy Code.

Copia el código proporcionado en tu dashboard de OneSignal.

Necesitarás hacer algunos ajustes al código para que funcione con Google Tag Manager como se muestra aquí: 
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  // remove async
  OneSignalDeferred.push( function(OneSignal) {
    // remove await
    OneSignal.init({
      // replace with YOUR_APP_ID
      appId: "YOUR_APP_ID",
    })
    // Add event to track OneSignal initialization if desired
      .then(function() {
        dataLayer.push({ event: 'OneSignalInitialized' });
      }).catch(function(e) {
        console.error("OneSignal initialization failed:", e);
    });
  });
</script>

​
Configurar Google Tag Manager

Inicia sesión en tu cuenta de Google Tag Manager y configura una nueva etiqueta llamada OneSignal Init. La Tag Configuration/Tag Type debe ser Custom HTML. Pega el código de OneSignal en el campo HTML. En Advanced Settings > Tag firing options selecciona Once per page.
Para Triggering selecciona Initialization - All Pages.
Haz clic en Save en la parte superior derecha para guardar tu etiqueta. De vuelta en tu Workspace, puedes hacer clic en Publish o Submit para desplegar los cambios. Asegúrate de que tu contenedor esté instalado en cada página del sitio donde deseas que OneSignal se cargue y de que la etiqueta de inicialización se active como se espera.
Consulta la Ayuda de Google Tag Manager si necesitas asistencia adicional de configuración.

​
Pruebas

Visita tu sitio web y deberías recibir la solicitud de suscribirte a notificaciones push según la configuración de prompts que estableciste. Consulta Prompts de permisos web para detalles. Revisa tu Dashboard de OneSignal en Audience > Subscriptions para ver tus Suscripciones. Encuentra tu suscripción y establécela como Suscripciones de prueba. Luego dirígete a Messages > New Push para enviarte una notificación.
Si tienes problemas, consulta la Guía de solución de problemas de Web Push para soluciones comunes.
Visita Tutoriales de Web Push para los próximos pasos o continúa abajo para otras opciones de GTM.

​
Agregar etiquetas de datos

Este paso envía Etiquetas de datos de usuario personalizadas (atributos) a OneSignal desde GTM usando el método OneSignal.User.addTags. Usa el siguiente fragmento de código para establecer etiquetas. Reemplaza "TAG_1" y "VALUE_1" con tu clave y valor de etiqueta deseados: 
<script>
window.OneSignalDeferred = window.OneSignalDeferred || [];
OneSignalDeferred.push(function(OneSignal) {
  OneSignal.User.addTags({
      "TAG_1": "VALUE_1"
  });
});
</script>
Para asegurar que la etiqueta se active bajo las condiciones adecuadas, configura un Trigger Group que combine:
  • Trigger 1: Un activador de Custom Event que se active en el evento OneSignalInitialized (asegurando que OneSignal se haya inicializado).
  • Trigger 2: El activador adicional que deseas usar (por ejemplo, una vista de página o un evento de usuario personalizado).
Para crear el Trigger Group:
  1. En tu Workspace de GTM, ve a Triggers y haz clic en New.
  2. Selecciona Trigger Group como el tipo de activador.
  3. Nombra el trigger group (ej., “OS Tag – Initialized & Custom Trigger”).
  4. En Configure Trigger Group, agrega los siguientes activadores:
    1. Custom Event Trigger:
      1. Elige Custom Event como el tipo de activador.
      2. Establece el nombre del evento en OneSignalInitialized.
    2. Additional Trigger:
      1. Selecciona el activador que cumpla con tus criterios (ej., All Pages, o un activador personalizado como después del inicio de sesión del usuario).
  5. Guarda el Trigger Group.
  1. En tu Workspace de GTM, haz clic en New Tag.
  2. Establece la Tag Configuration en Custom HTML y pega el fragmento de código del Paso 5.1.
  3. En Advanced Settings > Tag firing options, selecciona Once per page (o ajusta según tus necesidades).
  4. Para Triggering, selecciona el Trigger Group que creaste en el Paso 5.2.
  5. Guarda la etiqueta.

​
Publicar los cambios

Después de configurar la nueva etiqueta y su trigger group, publica tu contenedor para desplegar la nueva funcionalidad de etiquetado de usuarios.

​
Solución de problemas

Usa el Preview and Debug Mode de GTM para asegurar que tanto la etiqueta de inicialización como la etiqueta de etiquetado de perfil de usuario se activen correctamente. Verifica la consola del navegador para cualquier error relacionado con OneSignal y revisa tu Dashboard de OneSignal para notificaciones de error. DataLayer Events: Confirma que los eventos (ej., OneSignalInitialized) se envíen al dataLayer como se espera para rastreo adicional en tu configuración de analytics. Consulta Solución de problemas del Web SDK para más detalles.
Con estas actualizaciones, tu sitio web ahora usa la inicialización más reciente de OneSignal y envía etiquetas de perfil de usuario personalizadas a través de GTM usando el método OneSignal.User.addTags.El trigger group agregado asegura que la etiqueta se active solo después de que OneSignal se haya inicializado y cuando se cumplan tus condiciones elegidas.
Para personalización adicional o rastreo avanzado, consulta nuestra Referencia del Web SDK y la documentación de Google Tag Manager. Si tienes alguna pregunta o encuentras problemas, consulta Solución de problemas del Web SDK o contacta al soporte de OneSignal.