# Web-Push über den Google Tag Manager

Implementieren Sie Push-Benachrichtigungen in vier Schritten ganz ohne Programmierung!
Das Pushwoosh WebSDK Lite kann über den Google Tag Manager zu Ihrer Website hinzugefügt werden, was den Integrationsprozess so einfach wie möglich macht.

<Aside type="note">
#### Teilweise Funktionalität

Bitte beachten Sie, dass von allen Besuchern Ihrer Website nur diejenigen, die Chrome oder Firefox verwenden, Push-Benachrichtigungen abonnieren und empfangen können. Das WebSDK Lite hat auch nur begrenzten Zugriff auf Pushwoosh-Funktionen wie benutzerdefinierte Tags, Benutzer-IDs oder ereignisgesteuerte Nachrichten. Für weitere Informationen wenden Sie sich bitte an unser [Support-Team](https://help.pushwoosh.com/hc/en-us/requests/new/)!
</Aside>

## Integration

### Firebase-Anmeldeinformationen

Wählen Sie in der [Firebase Console](https://console.firebase.google.com/project/_/settings/cloudmessaging/) Ihr Projekt aus, um Ihren Firebase **Server Key** und Ihre **Sender ID** zu erhalten. Bitte sehen Sie sich den folgenden Screenshot als Referenz an:

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

### Pushwoosh Control Panel

Gehen Sie zum Pushwoosh [**Control Panel**](https://go.pushwoosh.com/v2/applications) und fügen Sie eine neue App hinzu. Konfigurieren Sie auf der geöffneten Seite die Chrome- oder Firefox-Plattform, indem Sie auf die Schaltfläche **Konfigurieren** in der entsprechenden Zeile klicken. Füllen Sie das Formular aus:

* Den **Server Key** aus der Firebase Console in das Feld **API-Schlüssel**;
* Die **Sender ID** aus der Firebase Console in das Feld **FCM Sender ID**;
* Die genaue Adresse Ihrer Website in das Feld **Website-Name**.

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

Kopieren Sie unbedingt den Anwendungscode der neu erstellten App, Sie werden ihn später benötigen. Der App-Code ist unten hervorgehoben:

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

### Google Tag Manager

**1.** Wählen Sie im Google Tag Manager einen Container aus oder erstellen Sie einen neuen.

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

**2.** Erstellen Sie ein neues Tag und wählen Sie in der Tag-Konfiguration **Benutzerdefiniertes HTML**.

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

**3.** Kopieren Sie das folgende Skript und fügen Sie es in das HTML-Feld ein;

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

**4.** Ändern Sie die Nummernzeichen `#####-#####` (im Bild unten hervorgehoben) im Skript in Ihren Pushwoosh-Anwendungscode, den Sie in Schritt 2 erhalten haben.

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

**5.** Scrollen Sie nach unten zu den Auslöseoptionen und wählen Sie **Alle Seiten**.

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

**6.** Klicken Sie auf „Speichern“. Ihr Tag ist fertig!

### Push-Abonnement-Schaltfläche

Ermöglichen Sie Benutzern, Push-Benachrichtigungen mit einer Push-Abonnement-Schaltfläche zu abonnieren. Um die Schaltfläche einzurichten, fügen Sie einfach das folgende Skript über den Google Tag Manager hinzu.

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

Fertig! Die Besucher Ihrer Website können jetzt Push-Nachrichten abonnieren und empfangen.