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 lors du développement, pensez à 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 de la bannière 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 BrazeBannerUI.BannerUIView avec votre objet Braze et votre 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 afin d’activer les contraintes Auto Layout.
5. Ancrer le contenu et définir des contraintes de hauteur {#5-anchor-content-and-set-height-constraints}
Ancrez votre contenu principal en haut à l’aide d’Auto Layout et placez la vue de la bannière après celui-ci. Épinglez les bords avant (leading), arrière (trailing) et inférieur de la bannière à la zone sécurisée (safe area), et définissez une contrainte de hauteur initiale de 0 qui sera mise à jour lors du chargement du contenu.
1. Activer le débogage (facultatif)
Pour faciliter la résolution des problèmes lors du développement, pensez à activer le débogage.
2. Actualiser vos placements
Après avoir initialisé le SDK Braze, appelez requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) pour actualiser le contenu de la bannière 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}
Afin d’éviter les espaces vides dans votre interface utilisateur, 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 votre é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 le modificateur .frame(height: min(contentHeight, 80)). Cela permet de conserver l’équilibre visuel de votre interface utilisateur, quel que soit le contenu de la bannière.