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-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.
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-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.
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} {#1-enable-debugging-optional}
Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie Debugging aktivieren.
2. Platzierungen aktualisieren {#2-refresh-your-placements} {#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. Banner initialisieren und Callback bereitstellen {#3-initialize-the-banner-and-provide-a-callback} {#3-initialize-the-banner-and-provide-a-callback}
Erstellen Sie eine BrazeBannerUI.BannerUIView-Instanz mit Ihrem Braze-Objekt und der Platzierungs-ID und stellen Sie einen processContentUpdates-Callback bereit, um das Banner einzublenden und seine Höhenbeschränkung basierend auf der bereitgestellten Inhaltshöhe zu aktualisieren.
4. Auto-Layout-Constraints aktivieren {#4-enable-auto-layout-constraints} {#4-enable-auto-layout-constraints}
Blenden Sie die Banner-Ansicht standardmäßig aus und deaktivieren Sie dann die Autoresizing-Mask-Übersetzung, um Auto-Layout-Constraints zu aktivieren.
5. Inhalte verankern und Höhenbeschränkungen festlegen {#5-anchor-content-and-set-height-constraints} {#5-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, nachfolgende und untere Kante des Banners an den sicheren Bereich und legen Sie eine anfängliche Höhenbeschränkung von 0 fest, die aktualisiert wird, wenn der Inhalt geladen ist.
1. Debugging aktivieren (optional) {#1-enable-debugging-optional}
Um die Fehlerbehebung während der Entwicklung zu erleichtern, sollten Sie 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} {#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. Nur verfügbare Banner anzeigen {#4-only-display-available-banners} {#4-only-display-available-banners}
Versuchen Sie nur dann, BrazeBannerUI.BannerView anzuzeigen, wenn das SDK initialisiert ist und Banner-Inhalt für diese Nutzer:in vorhanden ist. Rufen Sie in .onAppear die Methode getBanner(for:placementID) auf, um den Status von hasBannerForPlacement festzulegen.
5. BannerView erst nach dem Laden anzeigen {#5-only-show-bannerview-after-it-loads} {#5-only-show-bannerview-after-it-loads}
Um leeren Platz 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} {#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-Status (contentHeight) und wenden Sie eine .frame(height:)-Beschränkung mit der bereitgestellten Höhe an.
7. Banner-Höhe begrenzen {#7-limit-the-banner-height} {#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.