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
Wir testen derzeit dieses neue Tutorial-Format. Teilen Sie uns Ihre Meinung mit – Ihr Feedback hilft uns, zukünftige Anleitungen zu verbessern.
1. Debugging aktivieren (optional) {#1-enable-debugging-optional}
Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.
2. Banner-Ereignisse abonnieren {#2-subscribe-to-banner-events}
Verwenden Sie subscribeToBannersEvents() ab Web SDK 7.0.0, um einen Handler zu registrieren. Der Handler wird ausgeführt, wenn der Banner-Cache wiedergegeben, neu geladen oder aktualisiert wird oder wenn ein Fehler auftritt. Innerhalb des Handlers lesen Sie die Platzierung aus event.cacheSnapshot.banners. subscribeToBannersUpdates() ist das ältere Muster, das seit Version 7.0.0 als veraltet gilt. Die vollständige Liste der Ereignisse finden Sie unter Ereignis-Abos.
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. Um Ihr Layout sauber zu halten, blenden Sie Banner aus oder reduzieren Sie sie, wenn sie Teil einer Kontrollgruppe sind (z. B. 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 Banner-Platzierungen 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 vergeben Sie eine kurze, bannerbezogene id, z. B. global-banner-container. Braze verwendet dieses <div>, um Ihr Banner in die Seite einzufügen.
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
Wir testen derzeit dieses neue Tutorial-Format. Teilen Sie uns Ihre Meinung mit – Ihr Feedback hilft uns, zukünftige Anleitungen zu verbessern.
1. Debugging aktivieren (optional) {#1-enable-debugging-optional} {#1-enable-debugging-optional}
Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie Debugging aktivieren.
2. Banner-Ereignisse abonnieren {#2-subscribe-to-banner-events} {#2-subscribe-to-banner-events}
Verwenden Sie subscribeToBannersEvents(), um einen Handler zu registrieren, der ausgeführt wird, wenn der Banner-Cache wiedergegeben oder aktualisiert wird. BannersCacheSnapshot.banners ist eine Map von Platzierungs-ID zu Banner.
Die vollständige Liste der Ereignisse, die Sie empfangen können, finden Sie unter Ereignis-Abos.
3. Platzierungen aktualisieren {#3-refresh-your-placements} {#3-refresh-your-placements}
Rufen Sie nach der Initialisierung des Braze SDK requestBannersRefresh(["PLACEMENT_ID"]) auf, um den neuesten Banner-Inhalt für diese Platzierung abzurufen.
Dieser Aufruf wird in den bestehenden Banner-Cache zusammengeführt. Nur die von Ihnen angeforderten Platzierungs-IDs werden hinzugefügt, aktualisiert oder entfernt. Zwischengespeicherte Banner für andere Platzierungen bleiben im Cache und laufen zu ihrer ursprünglichen Ablaufzeit ab. Wenn der Server keinen Banner für eine angeforderte Platzierung zurückgibt, wird diese Platzierung aus dem Cache entfernt.
4. BannerView in Ihrer banners.xml definieren {#4-define-bannerview-in-your-bannersxml} {#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 Ihren Banner in Ihre UI einzufügen.
Nach einer Aktualisierung aktualisiert das SDK eine BannerView nur dann, wenn sich der Inhalt dieser Platzierung geändert hat. Unveränderte angezeigte Banner bleiben bestehen.
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
Wir testen derzeit dieses neue Tutorial-Format. Teilen Sie uns Ihre Meinung mit – Ihr Feedback hilft uns, zukünftige Anleitungen zu verbessern.
1. Debugging aktivieren (optional) {#1-enable-debugging-optional}
Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.
2. Banner-Ereignisse abonnieren {#2-subscribe-to-banner-events}
Verwenden Sie subscribeToEvents, um einen Handler zu registrieren, der ausgeführt wird, wenn der Banner-Cache wiedergegeben, neu geladen oder aktualisiert wird oder wenn ein Fehler auftritt. cacheSnapshot.banners ist ein Dictionary von Platzierungs-ID zu Banner. Behalten Sie eine starke Referenz auf das zurückgegebene Braze.Cancellable bei, da das SDK das Abo abbricht, wenn es deallokiert wird.
Informationen dazu, wann die einzelnen Ereignisse ausgelöst werden, finden Sie unter Ereignis-Abonnements.
3. Platzierungen aktualisieren {#3-refresh-your-placements}
Nachdem Sie Ihr Abo registriert haben, rufen Sie requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) auf, um den Banner-Inhalt zu Beginn jeder Sitzung zu aktualisieren.
4. Banner initialisieren und Callback bereitstellen {#4-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 die Höhenbeschränkung basierend auf der bereitgestellten Inhaltshöhe zu aktualisieren.
5. Auto-Layout-Constraints aktivieren {#5-enable-auto-layout-constraints}
Blenden Sie die Banner-Ansicht standardmäßig aus und deaktivieren Sie dann die Übersetzung der Autoresizing-Maske, um Auto-Layout-Constraints zu aktivieren.
6. Inhalte verankern und Höhen-Constraints festlegen {#6-anchor-content-and-set-height-constraints}
Verankern Sie Ihren Hauptinhalt mithilfe von Auto Layout oben und platzieren Sie die Banner-Ansicht danach. Heften Sie die führende, abschließende und untere Kante des Banners an den sicheren Bereich und legen Sie ein anfängliches Höhen-Constraint von 0 fest, das aktualisiert wird, wenn der Inhalt geladen ist.
1. Debugging aktivieren (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 den Banner-Inhalt zu Beginn jeder Sitzung zu aktualisieren.
3. View-Komponente erstellen {#3-create-a-view-component}
Erstellen Sie eine wiederverwendbare SwiftUI-View-Komponente, die verfügbare Banner anzeigt und bei Bedarf Ihren Hauptinhalt der App enthält.
4. Banner-Ereignisse abonnieren {#4-subscribe-to-banner-events}
Verwenden Sie in .onAppear die Methode subscribeToEvents, um einen Handler zu registrieren, der hasBannerForPlacement setzt, wann immer der Banner-Cache wiedergegeben, neu geladen oder aktualisiert wird. Behalten Sie in Ihrem State eine starke Referenz auf das zurückgegebene Braze.Cancellable bei, da das SDK das Abo abbricht, wenn es deallokiert wird.
Informationen dazu, wann die einzelnen Ereignisse ausgelöst werden, finden Sie unter Ereignis-Abonnements.
5. BannerView erst nach dem Laden anzeigen {#5-only-show-bannerview-after-it-loads}
Um leere Bereiche in Ihrer UI zu vermeiden, zeigen Sie BrazeBannerUI.BannerView nur an, wenn ein Banner vorhanden und das SDK initialisiert ist.
6. Banner-Höhe dynamisch aktualisieren {#6-dynamically-update-banner-height}
Verwenden Sie den processContentUpdates-Callback, um die Inhaltshöhe des Banners abzurufen, sobald es geladen ist. Aktualisieren Sie Ihren SwiftUI-State (contentHeight) und wenden Sie ein .frame(height:)-Constraint mit der bereitgestellten Höhe an.
7. Banner-Höhe begrenzen {#7-limit-the-banner-height}
Um sicherzustellen, dass Ihr Banner die maximale Höhe nie überschreitet, wenden Sie den Modifier .frame(height: min(contentHeight, 80)) an. Dadurch bleibt Ihre UI unabhängig vom Inhalt des Banners visuell ausgewogen.