Skip to content

Anleitung: Anzeige eines Banners nach Platzierungs-ID

Folgen Sie dem Beispielcode in dieser Anleitung, um Banner anhand ihrer Platzierungs-ID anzuzeigen. Weitere allgemeine Informationen finden Sie unter Banner.

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, überprüfen Sie, ob Ihr Braze SDK die Mindestanforderungen erfüllt:

Anzeige von Bannern für das Web SDK

1. Debugging aktivieren (optional) {#1-enable-debugging-optional}

Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.

2. Banner-Updates abonnieren {#2-subscribe-to-banner-updates}

Verwenden Sie subscribeToBannersUpdates(), um einen Handler zu registrieren, der immer dann ausgeführt wird, wenn ein Banner aktualisiert wird. Rufen Sie innerhalb des Handlers braze.getBanner("global_banner") auf, um die neueste Platzierung abzurufen.

3. Banner einfügen und Kontrollgruppen behandeln {#3-insert-the-banner-and-handle-control-groups}

Verwenden Sie braze.insertBanner(banner, container), um ein Banner einzufügen, wenn es zurückgegeben wird. Damit Ihr Layout übersichtlich bleibt, blenden Sie Banner aus oder reduzieren Sie sie, die Teil einer Kontrollgruppe sind (zum Beispiel wenn isControl den Wert true hat).

4. Banner aktualisieren {#4-refresh-your-banners}

Rufen Sie nach der Initialisierung des SDK requestBannersRefresh(["global_banner", ...]) auf, um sicherzustellen, dass die Banner zu Beginn jeder Sitzung aktualisiert werden.

Sie können diese Funktion auch jederzeit aufrufen, um die Bannerplatzierungen später zu aktualisieren.

5. Einen Container für Ihr Banner hinzufügen {#5-add-a-container-for-your-banner}

Fügen Sie in Ihrem HTML ein neues <div>-Element hinzu und geben Sie ihm eine kurze, bannerbezogene id, wie z. B. global-banner-container. Braze verwendet dieses <div>, um Ihr Banner auf der Seite einzufügen.

Please rate this tutorial:

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, überprüfen Sie, ob Ihr Braze SDK die Mindestanforderungen erfüllt:

Anzeige von Bannern für das Android SDK

1. Debugging aktivieren (optional) {#1-enable-debugging-optional}

Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.

2. Banner-Updates abonnieren {#2-subscribe-to-banner-updates}

Verwenden Sie subscribeToBannersUpdates(), um einen Handler zu registrieren, der immer dann ausgeführt wird, wenn ein Banner aktualisiert wird.

3. Platzierungen aktualisieren {#3-refresh-your-placements}

Rufen Sie nach der Initialisierung des Braze SDK requestBannersRefresh(["PLACEMENT_ID"]) auf, um die neuesten Banner-Inhalte für diese Platzierung abzurufen.

4. BannerView in Ihrer banners.xml definieren {#4-define-bannerview-in-your-bannersxml}

Deklarieren Sie in banners.xml ein <com.braze.ui.banners.BannerView>-Element mit app:placementId="PLACEMENT_ID". Braze verwendet dieses Element, um Ihr Banner in Ihre UI einzufügen.

Please rate this tutorial:

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, überprüfen Sie, ob Ihr Braze SDK die Mindestanforderungen erfüllt:

Anzeige von Bannern für das Swift SDK

1. Fehlerbehebung aktivieren (optional) {#1-enable-debugging-optional}

Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.

2. Platzierungen aktualisieren {#2-refresh-your-placements}

Rufen Sie nach der Initialisierung des Braze SDK requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) auf, um die Banner-Inhalte zu Beginn jeder Sitzung zu aktualisieren.

3. Banner initialisieren und einen Callback bereitstellen {#3-initialize-the-banner-and-provide-a-callback}

Erstellen Sie eine BrazeBannerUI.BannerUIView-Instanz mit Ihrem Braze-Objekt und Ihrer Platzierungs-ID und stellen Sie einen processContentUpdates-Callback bereit, um das Banner einzublenden und seine Höhenbeschränkung auf Grundlage der bereitgestellten Inhaltshöhe zu aktualisieren.

4. Auto-Layout-Beschränkungen aktivieren {#4-enable-auto-layout-constraints}

Blenden Sie die Banner-Ansicht standardmäßig aus und deaktivieren Sie dann die automatische Übersetzung der Größenmaske, um Auto-Layout-Beschränkungen zu aktivieren.

5. Inhalt verankern und Höhenbeschränkungen festlegen {#5-anchor-content-and-set-height-constraints}

Verankern Sie Ihren Hauptinhalt mit Auto Layout oben und platzieren Sie die Banner-Ansicht darunter. Heften Sie die führende, hintere und untere Kante des Banners an die Safe Area und setzen Sie eine anfängliche Höhenbeschränkung von 0, die aktualisiert wird, wenn Inhalte geladen werden.

Please rate this tutorial:

1. Fehlerbehebung aktivieren (optional)

Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.

2. Platzierungen aktualisieren

Rufen Sie nach der Initialisierung des Braze SDK requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) auf, um die Banner-Inhalte zu Beginn jeder Sitzung zu aktualisieren.

3. Ansichtskomponente erstellen {#3-create-a-view-component}

Erstellen Sie eine wiederverwendbare SwiftUI-Ansichtskomponente, die verfügbare Banner anzeigt und bei Bedarf den Hauptinhalt Ihrer App enthält.

4. Nur verfügbare Banner anzeigen {#4-only-display-available-banners}

Versuchen Sie nur dann, BrazeBannerUI.BannerView anzuzeigen, wenn das SDK initialisiert ist und Banner-Inhalte für die jeweiligen Nutzer:innen vorhanden sind. Rufen Sie in .onAppear die Methode getBanner(for:placementID) auf, um den Status von hasBannerForPlacement zu setzen.

5. BannerView erst nach dem Laden anzeigen {#5-only-show-bannerview-after-it-loads}

Um leeren Raum in Ihrem UI zu vermeiden, zeigen Sie BrazeBannerUI.BannerView nur an, wenn ein Banner vorhanden und das SDK initialisiert ist.

6. Bannerhöhe dynamisch aktualisieren {#6-dynamically-update-banner-height}

Verwenden Sie den processContentUpdates-Callback, um die Höhe des Banner-Inhalts abzurufen, sobald er geladen ist. Aktualisieren Sie Ihren SwiftUI-Status (contentHeight) und wenden Sie eine .frame(height:)-Beschränkung mit der bereitgestellten Höhe an.

7. Bannerhöhe begrenzen {#7-limit-the-banner-height}

Um sicherzustellen, dass Ihr Banner niemals die maximale Höhe überschreitet, wenden Sie den Modifikator .frame(height: min(contentHeight, 80)) an. So bleibt Ihr UI unabhängig vom Inhalt des Banners visuell ausgewogen.

Please rate this tutorial:

New Stuff!