# 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.

<Aside type="note">
#### Funcionalidad parcial

Tenga en cuenta que de todos los visitantes de su sitio web, solo aquellos que usen Chrome o Firefox podrán suscribirse y recibir notificaciones push. El WebSDK Lite también tiene acceso limitado a las funciones de Pushwoosh, como Tags personalizadas, UserIDs o mensajería activada por eventos. Para más detalles, ¡póngase en contacto con nuestro [Equipo de Soporte](https://help.pushwoosh.com/hc/en-us/requests/new/)!
</Aside>

## Integración

### Credenciales de Firebase

En la [Consola de Firebase](https://console.firebase.google.com/project/_/settings/cloudmessaging/), 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:

<img src="/web-push-notifications-web-push-via-google-tag-manager-1.webp" alt=""/>

### Panel de Control de Pushwoosh

Vaya al [**Panel de Control**](https://go.pushwoosh.com/v2/applications) 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).

<img src="/web-push-notifications-web-push-via-google-tag-manager-2.webp" alt=""/>

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:

<img src="/web-push-notifications-web-push-via-google-tag-manager-3.webp" alt=""/>

### Google Tag Manager

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-4.webp" alt=""/>

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-5.webp" alt=""/>

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

```txt
<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.

<img src="/web-push-notifications-web-push-via-google-tag-manager-6.webp" alt=""/>

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-7.webp" alt=""/>

**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.

```txt
<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.