Skip to content

Browser-Erweiterung

Dieser Artikel beschreibt, wie Sie das Braze Web SDK innerhalb Ihrer Browser-Erweiterungen (Google Chrome, Firefox) verwenden können.

Integrieren Sie das Braze Web SDK in Ihre Browser-Erweiterung, um Analytics zu sammeln und Nutzer:innen umfangreiche Nachrichten anzuzeigen. Dazu gehören sowohl Google Chrome-Erweiterungen als auch Firefox-Add-Ons.

Was wird unterstützt

Da es sich bei Erweiterungen um HTML und JavaScript handelt, können Sie Braze im Allgemeinen für Folgendes verwenden:

  • Analytics: Erfassen Sie angepasste Events, Attribute und identifizieren Sie sogar wiederkehrende Nutzer:innen innerhalb Ihrer Erweiterung. Nutzen Sie diese Profileigenschaften, um kanalübergreifendes Messaging zu betreiben.
  • In-App-Nachrichten: Triggern Sie In-App-Nachrichten, wenn Nutzer:innen innerhalb Ihrer Erweiterung eine Aktion ausführen, indem Sie unser natives oder angepasstes HTML-Messaging verwenden.
  • Content Cards: Fügen Sie Ihrer Erweiterung einen Feed mit nativen Karten für Onboarding oder Aktionen hinzu.
  • Web-Push: Senden Sie zeitnahe Benachrichtigungen, auch wenn Ihre Webseite gerade nicht geöffnet ist.

Was nicht unterstützt wird

  • Service Worker werden vom Braze Web SDK nicht unterstützt, die entsprechende Funktion befindet sich jedoch in der Roadmap für zukünftige Überlegungen.

Erweiterungstypen

Braze kann in den folgenden Bereichen Ihrer Erweiterung eingesetzt werden:

Bereich Details Was wird unterstützt
Popup-Seite Die Popup-Seite ist ein Dialog, der Nutzer:innen angezeigt werden kann, wenn sie auf das Symbol Ihrer Erweiterung in der Browser-Symbolleiste klicken. Analytics, In-App-Nachrichten und Content Cards
Hintergrundskripte Hintergrundskripte (nur Manifest v2) ermöglichen es Ihrer Erweiterung, die Navigation der Nutzer:innen zu inspizieren und mit ihr zu interagieren oder Webseiten zu verändern (z. B. wie Werbeblocker den Inhalt von Seiten erkennen und verändern). Analytics, In-App-Nachrichten und Content Cards.

Hintergrundskripte sind für Nutzer:innen nicht sichtbar. Für Messaging müssten Sie also mit Browser-Tabs oder Ihrer Popup-Seite kommunizieren, wenn Sie Nachrichten anzeigen.
Optionsseiten Auf der Optionsseite können Ihre Nutzer:innen die Einstellungen Ihrer Erweiterung umschalten. Es handelt sich um eine eigenständige HTML-Seite, die einen neuen Tab öffnet. Analytics, In-App-Nachrichten und Content Cards

Berechtigungen

Für die Integration des Braze SDK (braze.min.js) als lokale Datei, die mit Ihrer Erweiterung gebündelt ist, sind in Ihrem manifest.json keine zusätzlichen Berechtigungen erforderlich.

Wenn Sie jedoch den Google Tag Manager verwenden, das Braze SDK von einer externen URL referenzieren oder eine strenge Content Security Policy für Ihre Erweiterung festgelegt haben, müssen Sie die content_security_policy-Einstellung in Ihrer manifest.json anpassen, um Remote-Skriptquellen zuzulassen.

Erste Schritte

Um das Braze Web SDK zu integrieren, müssen Sie zunächst eine Kopie der neuesten JavaScript-Bibliothek herunterladen. Dazu können Sie NPM verwenden oder sie direkt vom Braze CDN herunterladen.

Wenn Sie es vorziehen, den Google Tag Manager oder eine extern gehostete Kopie des Braze SDK zu verwenden, beachten Sie bitte, dass Sie für das Laden externer Ressourcen Ihre content_security_policy-Einstellung in Ihrem manifest.json anpassen müssen.

Kopieren Sie die Datei braze.min.js nach dem Download in das Verzeichnis Ihrer Erweiterung.

Um Braze zu einem Erweiterungs-Popup hinzuzufügen, referenzieren Sie die lokale JavaScript-Datei in Ihrer popup.html, wie Sie es bei einer normalen Website tun würden. Wenn Sie Google Tag Manager verwenden, können Sie Braze stattdessen mithilfe unserer Google Tag Manager-Templates hinzufügen.

1
2
3
4
5
6
7
8

<html>
    <title>popup.html</title>
    <!-- Add the Braze library -->
    <script src="/relative/path/to/braze.min.js"></script>
    <script>
    // Initialize Braze here
    </script>
</html>

Hintergrundskript (nur Manifest v2)

Um Braze im Hintergrundskript Ihrer Erweiterung zu verwenden, fügen Sie die Braze-Bibliothek zu Ihrem manifest.json im Array background.scripts hinzu. Dadurch wird die globale Variable braze im Kontext Ihres Hintergrundskripts verfügbar.

1
2
3
4
5
6
7
8
9

{
    "manifest_version": 2,
    "background": {
        "scripts": [
            "relative/path/to/braze.min.js",
            "background.js"
        ]
    }
}

Optionsseite

Wenn Sie eine Optionsseite verwenden (über die Manifest-Eigenschaften options oder options_ui), können Sie Braze genauso einbinden wie in der Anleitung zu popup.html.

Initialisierung

Sobald das SDK eingebunden ist, können Sie die Bibliothek wie gewohnt initialisieren.

Da Cookies in Browser-Erweiterungen nicht unterstützt werden, können Sie Cookies deaktivieren, indem Sie mit noCookies: true initialisieren.

1
2
3
4
5

braze.initialize("YOUR-API-KEY-HERE", {
    baseUrl: "YOUR-API-ENDPOINT",
    enableLogging: true,
    noCookies: true
});

Weitere Informationen zu den unterstützten Initialisierungsoptionen finden Sie in der Web SDK-Referenz.

Push

Popup-Dialoge von Erweiterungen erlauben keine Push-Eingabeaufforderungen (sie haben keine URL-Leiste in der Navigation). Um sich innerhalb des Popup-Dialogs einer Erweiterung zu registrieren und Push-Berechtigungen anzufordern, müssen Sie eine alternative Domain-Lösung verwenden, wie unter Alternative Push-Domain beschrieben.
New Stuff!