Firebase-Projekt anlegen
Gehe auf https://console.firebase.google.com.
Klicke auf „Projekt hinzufügen“.
Gib einen Projektnamen ein und bestätige die Einstellungen.
(Optional) Verknüpfe das Projekt mit Google Analytics oder überspringe es.
Firebase Admin SDK JSON erzeugen
In der Firebase Console → oben links auf das Zahnradsymbol → „Projekteinstellungen“.
Wechsle zum Tab „Service Accounts“.
Klicke auf „Neuen privaten Schlüssel generieren“ → dadurch erhältst Du eine JSON-Datei mit den Keys.
Diese Datei enthält Werte wie
project_id,private_key,client_email.Diese Datei speicherst Du später im Versandtool (das ist Deine firebase-adminsdk JSON).
Web-App in Firebase registrieren
In den Projekteinstellungen → Tab „Allgemein“.
Scrolle nach unten zu „Deine Apps“ → klicke auf „App hinzufügen“ → wähle das Web-Symbol (🌐).
Gib einen App-Namen ein und bestätige.
Jetzt erhältst Du ein Firebase-Konfigurations-Snippet mit Werten wie
apiKey,authDomain,projectId,messagingSenderId,appId.
Cloud Messaging aktivieren
In den Projekteinstellungen → Tab „Cloud Messaging“.
Dort findest Du die Sender ID (wichtig für Web Push).
Scrolle weiter runter → „Web Push-Zertifikate“.
Hier kannst Du einen VAPID Key generieren.
Klicke auf „Schlüssel generieren“ → danach erscheint Dein Public VAPID Key.
Diesen Key trägst Du in der
junePushConfig.jsein.
HTML-Snippet einfügen
Dieses HTML-Snippet wird in die Website eingebunden, damit Nutzer Push Notifications aktivieren können:
<button id="btn">Push Notifications aktivieren</button>
<script src="/junePushConfig.js"></script>
<script src="https://view.juneapp.com/june-lp-framework/dev/sdk/push_notifications_v2/js/junePushSdk.js"></script>
<script>
const sdk = new JunePushSDK({
vapidKey: window.__JUNE_PUSH_CONFIG__.vapidKey,
collectToken: window.__JUNE_PUSH_CONFIG__.collectToken,
disablePushNotificationInForeground: false,
apiBaseUrl: 'https://engagement.juneapp.com'
});
document.getElementById("btn").addEventListener("click", async () => {
const token = await sdk.register();
console.log("FCM Token:", token);
});
sdk.listenToForegroundMessages(payload => {
//alert("Neue Nachricht: " + payload.notification.title);
});
</script>
Firebase JS-Konfigurationsdatei erstellen
Erstelle eine Datei junePushConfig.js, in der die Firebase-Daten und das Feld collectToken für JUNE hinterlegt werden:
var config = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
vapidKey: "",
collectToken: ""
};
// universell verfügbar machen
if (typeof window !== "undefined") {
window.__JUNE_PUSH_CONFIG__ = config;
}
if (typeof self !== "undefined") {
self.__JUNE_PUSH_CONFIG__ = config;
}
Übermittlung der Firebase Admin SDK JSON Datei
Kontaktiere unseren Support aus JUNE heraus:
Hier kannst Du uns auf sicherem Weg die Firebase Admin SDK JSON Datei übermitteln. Wir nehmen die Konfiguration in JUNE für Dich vor. Damit ist die Einrichtung abgeschlossen.