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 pendant le développement, envisagez d’activer le débogage.
2. S’abonner aux événements de bannière {#2-subscribe-to-banner-events}
Utilisez subscribeToBannersEvents() à partir du SDK Web 7.0.0 pour enregistrer un gestionnaire. Le gestionnaire s’exécute lorsque le cache de bannières est rejoué, rechargé ou mis à jour, ou lorsqu’une erreur survient. Dans le gestionnaire, lisez le placement depuis event.cacheSnapshot.banners. subscribeToBannersUpdates() est l’ancien modèle, obsolète depuis la version 7.0.0. Pour la liste complète des événements, consultez Abonnements aux événements.
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. Pour garder votre mise en page propre, 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 l’initialisation du 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 les placements de bannières ultérieurement.
5. Ajouter un conteneur pour votre bannière {#5-add-a-container-for-your-banner}
Dans votre HTML, ajoutez un nouvel élément <div> et attribuez-lui un id court et lié à 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 pendant le développement, nous vous conseillons d’activer le débogage.
2. S’abonner aux événements de bannière {#2-subscribe-to-banner-events}
Utilisez subscribeToBannersEvents() pour enregistrer un gestionnaire qui s’exécute lorsque le cache des bannières est rejoué ou mis à jour. BannersCacheSnapshot.banners est une map qui associe chaque ID de placement à une Banner.
Pour obtenir la liste complète des événements que vous pouvez recevoir, consultez la section Abonnements aux événements.
3. Définir BannerView dans votre banners.xml {#3-define-bannerview-in-your-bannersxml}
Dans banners.xml, déclarez un <com.braze.ui.banners.BannerView> avec app:placementId="PLACEMENT_ID" et définissez android:layout_height sur 0dp. La vue reste dans la mise en page sans hauteur jusqu’à ce que la bannière indique la hauteur de son contenu : l’écran ne réserve donc pas d’espace vide avant le chargement d’une bannière.
Après une actualisation, le SDK met à jour une BannerView uniquement lorsque le contenu de ce placement change. Les bannières déjà affichées et inchangées restent telles quelles.
4. Mettre à jour la hauteur de la bannière {#4-update-the-banner-height}
Définissez heightCallback sur la BannerView. Le rappel reçoit la hauteur de la bannière en dp. Appliquez vous-même cette hauteur à la vue : convertissez les dp en pixels, puis définissez la hauteur de la mise en page.
Le code HTML de la bannière indique sa hauteur via une interface JavaScript, ce qui signifie que heightCallback peut s’exécuter en dehors du thread principal. Mettez à jour la vue dans bannerView.post afin que la modification s’exécute sur le thread principal.
Une hauteur de 0.0 signifie qu’il n’y a aucun contenu à afficher. Le SDK renvoie 0.0 lorsque le placement n’a pas de bannière, que la bannière fait partie d’un groupe de contrôle ou qu’elle a été fermée. Appliquez également 0.0 pour que la vue se réduise tout en restant dans la mise en page pour la prochaine bannière.
5. Limiter la hauteur de la bannière {#5-limit-the-banner-height}
Plafonnez la hauteur que vous appliquez. Dans cet exemple, min(heightDp, 80.0) limite la bannière à 80 dp maximum.
6. Actualiser vos placements {#6-refresh-your-placements}
Après avoir initialisé le SDK de Braze, appelez requestBannersRefresh(["PLACEMENT_ID"]) pour récupérer le contenu de bannière le plus récent pour ce placement.
Cet appel est fusionné avec le cache de bannières existant. Seuls les ID de placement que vous demandez sont ajoutés, mis à jour ou supprimés. Les bannières mises en cache pour d’autres placements restent dans le cache et expirent à leur date d’expiration initiale. Si le serveur ne renvoie aucune bannière pour un placement demandé, ce placement est retiré du cache.
Pour utiliser Jetpack Compose, ajoutez l’artefact com.braze:android-sdk-jetpack-compose au module de votre application. Utilisez la même version que vos autres dépendances du SDK Android de Braze.
1. Activer le débogage (facultatif)
Pour faciliter la résolution des problèmes pendant le développement, nous vous conseillons d’activer le débogage.
2. S’abonner aux événements de bannière
Appelez subscribeToBannersEvents et conservez l’abonné afin de pouvoir le supprimer lorsque le composable quitte l’écran. Définissez hasBannerForPlacement lorsque CacheReplay, CacheLoad ou DataUpdated contient ce placement. Lors d’un ErrorEvent avec FeatureDisabled, définissez hasBannerForPlacement sur false.
Les événements de bannière arrivent sur un thread d’arrière-plan. Publiez les mises à jour de l’interface utilisateur sur le thread principal.
Pour savoir quand chaque événement se déclenche, consultez la section Abonnements aux événements.
3. Actualiser vos placements {#3-refresh-your-placements}
Après avoir enregistré l’abonné, appelez requestBannersRefresh(["PLACEMENT_ID"]) pour récupérer le contenu de bannière le plus récent pour ce placement. Supprimez l’abonné avec removeSingleSubscription lorsque vous n’en avez plus besoin.
4. Afficher la bannière uniquement lorsqu’elle est dans le cache {#4-only-show-the-banner-after-it-is-in-the-cache}
Affichez Banner uniquement lorsque hasBannerForPlacement est vrai. Le placement reste hors de votre mise en page jusqu’à ce que le cache contienne une bannière pour celui-ci.
Importez com.braze.jetpackcompose.banners.Banner. D’autres bibliothèques Compose définissent leur propre composable Banner.
5. Mettre à jour la hauteur de la bannière {#5-update-the-banner-height}
Transmettez heightCallback à Banner. Le rappel reçoit la hauteur de la bannière en dp. Stockez-la dans contentHeight et appliquez-la avec Modifier.height. Banner laisse le dimensionnement à votre mise en page.
heightCallback peut s’exécuter en dehors du thread principal. Publiez la mise à jour de l’état sur le thread principal avant de modifier contentHeight.
Une hauteur de 0.0 signifie qu’il n’y a aucun contenu à afficher et évite les espaces vides dans votre interface utilisateur. Le SDK renvoie 0.0 lorsque le placement n’a pas de bannière, que la bannière fait partie d’un groupe de contrôle ou qu’elle a été fermée.
6. Limiter la hauteur de la bannière {#6-limit-the-banner-height}
Plafonnez la hauteur que vous appliquez. Dans cet exemple, min(contentHeight, 80.0) limite la bannière à 80 dp maximum.
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. S’abonner aux événements de bannière {#2-subscribe-to-banner-events}
Utilisez subscribeToEvents pour enregistrer un gestionnaire qui s’exécute lorsque le cache de bannières est relu, rechargé ou mis à jour, ou lorsqu’une erreur se produit. cacheSnapshot.banners est un dictionnaire associant un ID de placement à un objet Banner. Conservez une référence forte vers l’objet Braze.Cancellable retourné, car le SDK annule l’abonnement lorsque celui-ci est désalloué.
Pour savoir quand chaque événement se déclenche, consultez Abonnements aux événements.
3. Actualiser vos placements {#3-refresh-your-placements}
Après avoir enregistré votre abonnement, appelez requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) pour actualiser le contenu des bannières au début de chaque session.
4. Initialiser la bannière et fournir un rappel {#4-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 fournie.
5. Activer les contraintes Auto Layout {#5-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.
6. Ancrer le contenu et définir les contraintes de hauteur {#6-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 après celui-ci. Fixez les bords gauche, droit et bas de la bannière à la zone sécurisée, 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 {#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. 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. S’abonner aux événements de bannière {#4-subscribe-to-banner-events}
Dans .onAppear, utilisez subscribeToEvents pour enregistrer un gestionnaire qui définit hasBannerForPlacement chaque fois que le cache de bannières est relu, rechargé ou mis à jour. Conservez une référence forte vers l’objet Braze.Cancellable retourné dans votre état, car le SDK annule l’abonnement lorsque celui-ci est désalloué.
Pour savoir quand chaque événement se déclenche, consultez Abonnements aux événements.
5. N’afficher BannerView qu’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 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 un modificateur .frame(height: min(contentHeight, 80)). Cela permettra de conserver un équilibre visuel dans votre interface, quel que soit le contenu de la bannière.