Notificaciones push web a través de Google Tag Manager

¡Implemente notificaciones push en cuatro pasos sin necesidad de código! El WebSDK Lite de Pushwoosh puede añadirse a su sitio web a través de Google Tag Manager, haciendo que el proceso de integración sea lo más fácil posible.

Integración

Credenciales de Firebase

En la Consola de Firebase, elija su proyecto para obtener su Server Key (Clave del servidor) y Sender ID (ID del remitente) de Firebase. Consulte la siguiente captura de pantalla como referencia:

Panel de Control de Pushwoosh

Vaya al Panel de Control de Pushwoosh y añada una nueva aplicación. En la página que se abre, configure la plataforma Chrome o Firefox haciendo clic en el botón Configure (Configurar) en la fila correspondiente. Rellene el formulario:

La Server Key de la Consola de Firebase en el campo API key (Clave de API);
El Sender ID de la Consola de Firebase en el campo FCM Sender ID;
La dirección exacta de su sitio web en el campo Website Name (Nombre del sitio web).

Asegúrese de copiar el Application Code (Código de la aplicación) de la aplicación recién creada, lo necesitará más tarde. El código de la aplicación está resaltado a continuación:

Google Tag Manager

1. En Google Tag Manager, elija un contenedor o cree uno nuevo.

2. Cree una nueva Etiqueta (Tag) y elija HTML Personalizado (Custom HTML) en la Configuración de la Etiqueta.

3. Copie el siguiente script y péguelo en el campo HTML;

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush-lite/v1/pushwoosh-web-notifications-lite.js?pw_application_code=#####-#####" async></script>

4. Cambie los signos de número #####-##### (resaltados en la imagen de abajo) en el script por su Application Code de Pushwoosh, que obtuvo en el Paso 2.

5. Desplácese hacia abajo hasta las opciones de Activación (Triggering) y elija Todas las páginas (All Pages).

6. Haga clic en “Guardar”. ¡Su Etiqueta (Tag) está lista!

Botón de suscripción a notificaciones push

Permita que los usuarios se suscriban a las notificaciones push con un botón de suscripción. Para configurar el botón, simplemente añada el siguiente script a través de Google Tag Manager.

<div style="text-align:center;margin:90px 0;">
  <button style="color:#000000;background: none;font-size: 16px;cursor: pointer;font-weight: 700;padding:0 60px;line-height: 60px;border:3px solid #000000;" type="button" name="button" onclick="window.pushwooshLite.instance.showSubscriptionWindow()">Subscribe Now</button>
</div>

¡Todo listo! Los visitantes de su sitio web ya pueden suscribirse y recibir mensajes push.