Tutoriel : Affichage d’une bannière par ID de placement
Suivez l’exemple de code de ce tutoriel pour afficher les bannières à l’aide de leur ID de placement. Pour plus d’informations générales, voir Bannières.
Conditions préalables
Avant de commencer ce tutoriel, veuillez vérifier que votre SDK Braze répond aux exigences minimales en matière de version :
Affichage de bannières pour le SDK Web
Nous testons actuellement ce nouveau format de tutoriel. Nous vous invitons à nous faire part de vos commentaires, https://docs.google.com/forms/d/e/1FAIpQLSe_5uhWM7eXXk9F_gviO_pvA4rkYO3WA9B6tNJZ3TY91md5bw/viewform?usp=pp_url&entry.569173304=Displaying+Banners+Webcar ils nous aideront à améliorer les prochains guides.
1. Activer le débogage (facultatif) {#1-enable-debugging-optional}
Pour faciliter la résolution des problèmes lors du développement, pensez à activer le débogage.
2. S’abonner aux mises à jour des bannières {#2-subscribe-to-banner-updates}
Utilisez subscribeToBannersUpdates() pour enregistrer un gestionnaire qui s’exécute chaque fois qu’une bannière est mise à jour. À l’intérieur du gestionnaire, appelez braze.getBanner("global_banner") pour obtenir le dernier emplacement.
3. Insérer la bannière et gérer les groupes de contrôle {#3-insert-the-banner-and-handle-control-groups}
Utilisez braze.insertBanner(banner, container) pour insérer une bannière lorsqu’elle est renvoyée. Afin de garder votre mise en page claire, masquez ou réduisez les bannières qui font partie d’un groupe de contrôle (par exemple, lorsque isControl est true).
4. Actualiser vos bannières {#4-refresh-your-banners}
Après avoir initialisé le SDK, appelez requestBannersRefresh(["global_banner", ...]) pour vous assurer que les bannières sont actualisées au début de chaque session.
Vous pouvez également appeler cette fonction à tout moment pour actualiser ultérieurement les emplacements des bannières.
5. Ajouter un conteneur pour votre bannière {#5-add-a-container-for-your-banner}
Dans votre code HTML, ajoutez un nouvel élément <div> et attribuez-lui un id court en rapport avec la bannière, tel que global-banner-container. Braze utilisera ce <div> pour insérer votre bannière dans la page.
Conditions préalables
Avant de commencer ce tutoriel, veuillez vérifier que votre SDK Braze répond aux exigences minimales en matière de version :
Affichage de bannières pour le SDK Android
Nous testons actuellement ce nouveau format de tutoriel. Nous vous invitons à nous faire part de vos commentaires, https://docs.google.com/forms/d/e/1FAIpQLSe_5uhWM7eXXk9F_gviO_pvA4rkYO3WA9B6tNJZ3TY91md5bw/viewform?usp=pp_url&entry.569173304=Displaying+Banners+Androidcar ils nous aideront à améliorer les prochains guides.
1. Activer le débogage (facultatif) {#1-enable-debugging-optional}
Pour faciliter la résolution des problèmes lors du développement, pensez à activer le débogage.
2. S’abonner aux mises à jour de bannières {#2-subscribe-to-banner-updates}
Utilisez subscribeToBannersUpdates() pour enregistrer un gestionnaire qui s’exécute chaque fois qu’une bannière est mise à jour.
3. Actualiser vos placements {#3-refresh-your-placements}
Après avoir initialisé le SDK Braze, appelez requestBannersRefresh(["PLACEMENT_ID"]) pour récupérer le dernier contenu de bannière pour cet emplacement.
4. Définir BannerView dans votre fichier banners.xml {#4-define-bannerview-in-your-bannersxml}
Dans banners.xml, déclarez un élément <com.braze.ui.banners.BannerView> avec app:placementId="PLACEMENT_ID". Braze utilisera cet élément pour insérer votre bannière dans votre interface utilisateur.
Conditions préalables
Avant de commencer ce tutoriel, veuillez vérifier que votre SDK Braze répond aux exigences minimales en matière de version :
Affichage de bannières pour le SDK Swift
Nous testons actuellement ce nouveau format de tutoriel. Nous vous invitons à nous faire part de vos commentaires, https://docs.google.com/forms/d/e/1FAIpQLSe_5uhWM7eXXk9F_gviO_pvA4rkYO3WA9B6tNJZ3TY91md5bw/viewform?usp=pp_url&entry.569173304=Displaying+Banners+Swiftcar ils nous aideront à améliorer les prochains guides.
1. Activer le débogage (facultatif) {#1-enable-debugging-optional}
Pour faciliter la résolution des problèmes pendant le développement, envisagez d’activer le débogage.
2. Actualiser vos placements {#2-refresh-your-placements}
Après avoir initialisé le SDK Braze, appelez requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) pour actualiser le contenu des bannières au début de chaque session.
3. Initialiser la bannière et fournir un rappel {#3-initialize-the-banner-and-provide-a-callback}
Créez une instance de BrazeBannerUI.BannerUIView avec votre objet Braze et l’ID de placement, puis fournissez un rappel processContentUpdates pour afficher la bannière et mettre à jour sa contrainte de hauteur en fonction de la hauteur du contenu fourni.
4. Activer les contraintes Auto Layout {#4-enable-auto-layout-constraints}
Masquez la vue de la bannière par défaut, puis désactivez la traduction du masque de redimensionnement automatique pour activer les contraintes Auto Layout.
5. Ancrer le contenu et définir les contraintes de hauteur {#5-anchor-content-and-set-height-constraints}
Ancrez votre contenu principal en haut à l’aide d’Auto Layout, puis placez la vue de la bannière en dessous. Fixez les bords gauche, droit et inférieur de la bannière à la zone de sécurité, et définissez une contrainte de hauteur initiale de 0 qui sera mise à jour lorsque le contenu sera chargé.
1. Activer le débogage (facultatif)
Pour faciliter la résolution des problèmes pendant le développement, envisagez d’activer le débogage.
2. Actualiser vos placements
Après avoir initialisé le SDK Braze, appelez requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) pour actualiser le contenu des bannières au début de chaque session.
3. Créer un composant de vue {#3-create-a-view-component}
Créez un composant de vue SwiftUI réutilisable qui affiche les bannières disponibles et contient le contenu principal de votre application si nécessaire.
4. Afficher uniquement les bannières disponibles {#4-only-display-available-banners}
N’essayez d’afficher BrazeBannerUI.BannerView que si le SDK est initialisé et que du contenu de bannière existe pour cet utilisateur. Dans .onAppear, appelez getBanner(for:placementID) pour définir l’état de hasBannerForPlacement.
5. Afficher BannerView uniquement après son chargement {#5-only-show-bannerview-after-it-loads}
Pour éviter un espace vide dans votre interface, n’affichez BrazeBannerUI.BannerView que si une bannière est présente et que le SDK est initialisé.
6. Mettre à jour dynamiquement la hauteur de la bannière {#6-dynamically-update-banner-height}
Utilisez le rappel processContentUpdates pour récupérer la hauteur du contenu de la bannière dès son chargement. Mettez à jour l’état SwiftUI (contentHeight) et appliquez une contrainte .frame(height:) en utilisant la hauteur fournie.
7. Limiter la hauteur de la bannière {#7-limit-the-banner-height}
Pour vous assurer que votre bannière ne dépasse jamais la hauteur maximale, appliquez un modificateur .frame(height: min(contentHeight, 80)). Cela permettra de garder votre interface visuellement équilibrée, quel que soit le contenu de la bannière.