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}
Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.
2. Banner-Events abonnieren {#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-IDs zu Banner.
Eine vollständige Liste der Events, die Sie empfangen können, finden Sie unter Event-Abonnements.
3. BannerView in Ihrer banners.xml definieren {#3-define-bannerview-in-your-bannersxml}
Deklarieren Sie in banners.xml ein <com.braze.ui.banners.BannerView> mit app:placementId="PLACEMENT_ID" und setzen Sie android:layout_height auf 0dp. Die View bleibt ohne Höhe im Layout, bis das Banner seine Inhaltshöhe meldet. So reserviert der Bildschirm keinen leeren Platz, bevor ein Banner geladen ist.
Nach einer Aktualisierung aktualisiert das SDK eine BannerView nur, wenn sich der Inhalt dieser Platzierung ändert. Unveränderte angezeigte Banner bleiben unverändert.
4. Banner-Höhe aktualisieren {#4-update-the-banner-height}
Setzen Sie heightCallback auf der BannerView. Der Callback erhält die Banner-Höhe in dp. Wenden Sie diese Höhe selbst auf die View an: Rechnen Sie dp in Pixel um und setzen Sie dann die Layout-Höhe.
Das Banner-HTML meldet seine Höhe über eine JavaScript-Schnittstelle, daher kann heightCallback außerhalb des Haupt-Threads ausgeführt werden. Aktualisieren Sie die View innerhalb von bannerView.post, damit die Änderung auf dem Haupt-Thread ausgeführt wird.
Eine Höhe von 0.0 bedeutet, dass es keinen Inhalt zum Anzeigen gibt. Das SDK meldet 0.0, wenn die Platzierung kein Banner hat, das Banner in einer Kontrollgruppe ist oder das Banner geschlossen wurde. Wenden Sie auch 0.0 an, damit die View zusammenklappt und für das nächste Banner im Layout bleibt.
5. Banner-Höhe begrenzen {#5-limit-the-banner-height}
Begrenzen Sie die Höhe, die Sie anwenden. In diesem Beispiel hält min(heightDp, 80.0) das Banner bei maximal 80 dp.
6. Platzierungen aktualisieren {#6-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 mit dem bestehenden Banner-Cache zusammengeführt. Nur die von Ihnen angefragten 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 für eine angefragte Platzierung kein Banner zurückgibt, wird diese Platzierung aus dem Cache entfernt.
Um Jetpack Compose zu verwenden, fügen Sie Ihrem App-Modul das Artefakt com.braze:android-sdk-jetpack-compose hinzu. Verwenden Sie dieselbe Version wie für Ihre anderen Braze Android SDK-Abhängigkeiten.
1. Debugging aktivieren (optional)
Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie das Debugging aktivieren.
2. Banner-Events abonnieren
Rufen Sie subscribeToBannersEvents auf und behalten Sie den Subscriber, damit Sie ihn entfernen können, wenn das Composable den Bildschirm verlässt. Setzen Sie hasBannerForPlacement, wenn CacheReplay, CacheLoad oder DataUpdated diese Platzierung enthält. Setzen Sie bei ErrorEvent mit FeatureDisabled den Wert von hasBannerForPlacement auf false.
Banner-Events kommen auf einem Hintergrund-Thread an. Senden Sie UI-Updates an den Haupt-Thread.
Wann die einzelnen Events ausgelöst werden, erfahren Sie unter Event-Abonnements.
3. Platzierungen aktualisieren {#3-refresh-your-placements}
Rufen Sie nach der Registrierung des Subscribers requestBannersRefresh(["PLACEMENT_ID"]) auf, um den neuesten Banner-Inhalt für diese Platzierung abzurufen. Entfernen Sie den Subscriber mit removeSingleSubscription, wenn Sie ihn nicht mehr benötigen.
4. Banner erst anzeigen, wenn es im Cache ist {#4-only-show-the-banner-after-it-is-in-the-cache}
Zeigen Sie Banner nur an, wenn hasBannerForPlacement true ist. Die Platzierung bleibt aus Ihrem Layout heraus, bis der Cache ein Banner dafür enthält.
Importieren Sie com.braze.jetpackcompose.banners.Banner. Andere Compose-Bibliotheken definieren ihr eigenes Banner-Composable.
5. Banner-Höhe aktualisieren {#5-update-the-banner-height}
Übergeben Sie heightCallback an Banner. Der Callback erhält die Banner-Höhe in dp. Speichern Sie sie in contentHeight und wenden Sie sie mit Modifier.height an. Banner überlässt die Größenanpassung Ihrem Layout.
heightCallback kann außerhalb des Haupt-Threads ausgeführt werden. Senden Sie das State-Update an den Haupt-Thread, bevor Sie contentHeight ändern.
Eine Höhe von 0.0 bedeutet, dass es keinen Inhalt zum Anzeigen gibt, und verhindert leere Bereiche in Ihrer UI. Das SDK meldet 0.0, wenn die Platzierung kein Banner hat, das Banner in einer Kontrollgruppe ist oder das Banner geschlossen wurde.
6. Banner-Höhe begrenzen {#6-limit-the-banner-height}
Begrenzen Sie die Höhe, die Sie anwenden. In diesem Beispiel hält min(contentHeight, 80.0) das Banner bei maximal 80 dp.
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.