Gérer les emplacements de bannières

Découvrez comment créer et gérer les emplacements de bannières dans le SDK Braze, notamment comment accéder à leurs propriétés uniques et enregistrer les impressions. Pour des informations plus générales, consultez À propos des bannières.

À propos des demandes de placement

Lorsque vous créez des emplacements dans votre application ou votre site web, votre application envoie une requête à Braze afin de récupérer les messages Banner pour chaque emplacement.

• Vous pouvez demander jusqu’à 10 emplacements par requête d’actualisation.
• Pour chaque emplacement, Braze renvoie le Banner ayant la priorité la plus élevée que l’utilisateur est éligible à recevoir.
• Si plus de 10 emplacements sont demandés lors d’une actualisation, seuls les 10 premiers sont renvoyés ; les autres sont ignorés.

Par exemple, une application peut demander trois emplacements dans une requête d’actualisation : homepage_promo, cart_abandonment et seasonal_offer. Chaque requête renvoie le Banner le plus pertinent pour cet emplacement.

Limitation du débit pour les requêtes d’actualisation

Si vous utilisez des versions du SDK antérieures (avant Swift 13.1.0, Android 38.0.0, Web 6.1.0, React Native 17.0.0 et Flutter 15.0.0), une seule requête d’actualisation est autorisée par session utilisateur.

Si vous utilisez les versions minimales les plus récentes du SDK (Swift 13.1.0+, Android 38.0.0+, Web 6.1.0+, React Native 17.0.0+ et Flutter 15.0.0+), les requêtes d’actualisation sont contrôlées par un algorithme de type « token bucket » afin d’éviter une interrogation excessive :

• Chaque session utilisateur commence avec cinq jetons d’actualisation.
• Les jetons se rechargent à raison d’un jeton toutes les 180 secondes (3 minutes).

Chaque appel explicite à requestBannersRefresh consomme un jeton. L’actualisation automatique qui se produit au début d’une nouvelle session ou lorsque changeUser est appelé ne consomme pas de jeton, car cette actualisation publie le dernier Banner mis en cache pour cet utilisateur. Si vous tentez une actualisation alors qu’aucun jeton n’est disponible, le SDK n’effectue pas la requête et enregistre une erreur jusqu’à ce qu’un jeton soit réapprovisionné. Ceci est important pour les mises à jour en cours de session et les mises à jour déclenchées par des événements. Pour mettre en œuvre des mises à jour dynamiques (par exemple, après qu’un utilisateur a effectué une action sur la même page), appelez la méthode d’actualisation après l’enregistrement de l’événement personnalisé, mais tenez compte du délai nécessaire à Braze pour ingérer et traiter l’événement avant que l’utilisateur ne soit éligible à une autre Campaign Banner.

Créer un placement

Conditions préalables

Voici les versions minimales du SDK nécessaires pour créer des placements de bannières :

Étape 1 : Créer des emplacements dans Braze

Si vous ne l’avez pas encore fait, vous devrez créer des emplacements de bannières dans Braze, qui servent à définir les endroits de votre application ou de votre site pouvant afficher des bannières. Pour créer un emplacement, allez dans Paramètres > Placements de bannières, puis sélectionnez Créer un placement.

Donnez un nom à votre emplacement et attribuez-lui un ID de placement. Veillez à consulter les autres équipes avant d’attribuer un ID, car il sera utilisé tout au long du cycle de vie de la carte et ne devrait pas être modifié par la suite. Pour plus d’informations, consultez ID de placement.

Remarque

Pour les placements Web, vous pouvez configurer le ciblage Web sur le placement. Le SDK Web de Braze insère alors automatiquement les bannières à un endroit précis de la page, et vous n’avez plus besoin d’appeler insertBanner() vous-même. Consultez la page Ciblage Web : insertion automatique des bannières.

Étape 2 : Actualiser les placements dans votre application

Pour actualiser les placements, appelez requestBannersRefresh() pour votre SDK.

requestBannersRefresh() fusionne les résultats dans le cache de bannières existant. Seuls les ID de placement que vous transmettez sont ajoutés, mis à jour ou supprimés :

• Si le serveur renvoie une bannière pour un placement demandé, la bannière en cache de ce placement est remplacée.
• Si le serveur ne renvoie aucune bannière pour un placement demandé, ce placement est retiré du cache.
• Les bannières en cache des placements que vous n’avez pas demandés restent dans le cache jusqu’à leur expiration.

Pour connaître le nombre de placements que vous pouvez demander par actualisation, consultez la section À propos des demandes de placement. Vous pouvez actualiser différents ensembles de placements au fil du temps (par exemple, les placements de l’écran actuel) tout en conservant en cache les bannières des autres placements.

L’actualisation des bannières suit deux mécanismes :

1. Actualisation explicite : Vous pouvez appeler la méthode d’actualisation à tout moment pendant une session active.
2. Actualisation automatique au début d’une nouvelle session : Après au moins une demande d’actualisation explicite, le SDK peut redemander les ID de placement les plus récemment demandés au début d’une nouvelle session Braze (par exemple, après changeUser() ou après l’expiration d’une session).

Le rôle de l’abonnement aux événements de bannière varie selon la plateforme :

• iOS et Android : subscribeToBannersEvents() sur Android (ou subscribeToEvents() sur Swift) enregistre un gestionnaire d’événements. L’actualisation automatique au début de session ne dépend pas d’un abonnement actif.
• Web : L’actualisation automatique au début de session dépend de l’enregistrement de subscribeToBannersEvents() (ou de subscribeToBannersUpdates(), désormais obsolète). Sans abonnement actif, le SDK ne répète pas automatiquement l’actualisation lors d’une nouvelle session.

Dans tous les cas, vous devez effectuer au moins une demande d’actualisation explicite par cycle de vie de l’application, afin que le SDK sache quels ID de placement maintenir à jour. Sans cet appel initial, les bannières ne sont pas récupérées automatiquement au premier lancement, et les ID de placement suivis sont réinitialisés après le redémarrage de l’application.

Les actualisations automatiques au début de session ne consomment pas de jeton de limitation du débit.

Conseil

Actualisez les placements le plus tôt possible pour éviter tout retard dans le téléchargement ou l’affichage des bannières.

• web
• swift
• android
• react native
• unity
• cordova
• flutter
• roku

1
2
3

import * as braze from "@braze/web-sdk";

braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);

1

AppDelegate.braze?.banners.requestBannersRefresh(placementIds: ["global_banner", "navigation_square_banner"])

1
2
3
4

ArrayList<String> placementIds = new ArrayList<>();
placementIds.add("global_banner");
placementIds.add("navigation_square_banner");
Braze.getInstance(context).requestBannersRefresh(placementIds);

1

Braze.getInstance(context).requestBannersRefresh(listOf("global_banner", "navigation_square_banner"))

1

Braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);

1

This feature is not currently supported on Unity.

1

This feature is not currently supported on Cordova.

1

braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);

1

This feature is not currently supported on Roku.

Étape 3 : Écouter les mises à jour

Conseil

Si vous insérez des bannières à l’aide des méthodes du SDK décrites dans ce guide, tous les événements d’analyse (comme les impressions et les clics) sont gérés automatiquement, et les impressions ne sont enregistrées que lorsque la bannière est visible.

• web
• swift
• android
• react native
• unity
• cordova
• flutter
• roku

  Web: 7.0.0+  

Utilisez subscribeToBannersEvents pour écouter les événements de bannière, puis appelez requestBannersRefresh pour récupérer les placements. Le SDK appelle votre gestionnaire avec un objet événement. Utilisez un switch sur event.type pour traiter chaque type d’événement. Pour en savoir plus sur les valeurs des événements, consultez la page Abonnements aux événements.

• javascript
• react

Si vous utilisez JavaScript natif avec le SDK Web de Braze, enregistrez votre gestionnaire avant d’appeler requestBannersRefresh.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import * as braze from "@braze/web-sdk";

const placementIds = ["global_banner", "navigation_square_banner"];

// - Available in version 7.0.0+
const subscriptionId = braze.subscribeToBannersEvents((event) => {
  switch (event.type) {
    case braze.ChannelEventType.CACHE_REPLAY:
      // Sent once, right away, with the Banners that are already cached.
      // Render them now instead of waiting for the network.
      console.log("Cached Banners:", Object.keys(event.cacheSnapshot.banners));
      break;

    case braze.ChannelEventType.CACHE_LOAD:
      // The cache changed without a refresh, such as after changeUser().
      // The snapshot can be empty, so clear Banners from the previous user.
      console.log("Cache reloaded:", Object.keys(event.cacheSnapshot.banners));
      break;

    case braze.ChannelEventType.DATA_UPDATED:
      // A refresh finished, even if nothing changed, or a Banner was dismissed.
      console.log("Banners were updated:", event.reason);
      break;

    case braze.ChannelEventType.ERROR:
      switch (event.retryState) {
        case braze.RetryState.SDK_WILL_RETRY:
          // The SDK is retrying. Keep the current Banners and wait.
          break;
        case braze.RetryState.INTEGRATOR_MAY_RETRY: {
          // The SDK stopped retrying. Try again later, and limit how often you retry.
          const delayMs = event.rateLimitedUntil
            ? Math.max(event.rateLimitedUntil.getTime() - Date.now(), 0)
            : 30000;
          setTimeout(() => braze.requestBannersRefresh(placementIds), delayMs);
          break;
        }
        case braze.RetryState.DO_NOT_RETRY:
          // The failure is final. For example, Banners are disabled for this workspace.
          if (event.reason === braze.ChannelErrorReason.FEATURE_DISABLED) {
            // Hide the Banner containers.
          }
          break;
      }
      break;
  }
});

const deprecatedSubscriptionId = braze.subscribeToBannersUpdates((banners) => {
  console.log("Banners were updated");
});

// Always refresh after your subscriber function has been registered
braze.requestBannersRefresh(placementIds);

// Remove the subscription when you no longer need it
// braze.removeSubscription(subscriptionId);

Si vous utilisez React avec le SDK Web de Braze, configurez subscribeToBannersEvents dans un hook useEffect et appelez requestBannersRefresh après avoir enregistré votre écouteur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import * as braze from "@braze/web-sdk";

useEffect(() => {
  const placementIds = ["global_banner", "navigation_square_banner"];

  // - Available in version 7.0.0+
  const subscriptionId = braze.subscribeToBannersEvents((event) => {
    switch (event.type) {
      case braze.ChannelEventType.CACHE_REPLAY:
      case braze.ChannelEventType.CACHE_LOAD:
        // Cached Banners, sent right away on subscribe or after the cache reloads
        console.log("Cached Banners:", Object.keys(event.cacheSnapshot.banners));
        break;

      case braze.ChannelEventType.DATA_UPDATED:
        // A refresh finished, even if nothing changed, or a Banner was dismissed
        console.log("Banners were updated:", event.reason);
        break;

      case braze.ChannelEventType.ERROR:
        if (event.retryState === braze.RetryState.INTEGRATOR_MAY_RETRY) {
          // The SDK stopped retrying. Try again later, and limit how often you retry.
          const delayMs = event.rateLimitedUntil
            ? Math.max(event.rateLimitedUntil.getTime() - Date.now(), 0)
            : 30000;
          setTimeout(() => braze.requestBannersRefresh(placementIds), delayMs);
        }
        break;
    }
  });

  const deprecatedSubscriptionId = braze.subscribeToBannersUpdates((banners) => {
    console.log("Banners were updated");
  });

  // Always refresh after your subscriber function has been registered
  braze.requestBannersRefresh(placementIds);

  // Cleanup listeners
  return () => {
    braze.removeSubscription(subscriptionId);
    braze.removeSubscription(deprecatedSubscriptionId);
  };
}, []);

Pour savoir quand chaque événement se déclenche et ce que signifient chaque motif de mise à jour, état de nouvelle tentative, action d’analyse et motif d’erreur, consultez la page Abonnements aux événements.

event.cacheSnapshot.banners est un objet qui associe chaque ID de placement à sa Banner. Il peut inclure des placements issus d’actualisations précédentes, et pas seulement les ID de placement de votre appel requestBannersRefresh le plus récent. Si seuls certains placements vous intéressent, lisez ces ID de placement dans l’instantané et ignorez les autres.

Utilisez subscribeToBannersEvents avec le SDK Web 7.0.0 et versions ultérieures. subscribeToBannersUpdates est l’ancienne méthode, obsolète depuis la version 7.0.0. Elle ne fournit que les bannières actuelles : elle ne vous indique donc ni pourquoi les bannières ont changé, ni quand une actualisation a échoué.

  Swift: 19.0.0+  

Remarque

Votre écouteur de mises à jour de bannières reflète l’état des bannières en mémoire dans le SDK. Une même mise à jour peut inclure des placements déjà en cache (par exemple, issus d’une actualisation précédente, d’un autre écran ou d’un traitement automatique du SDK), et pas seulement les ID de placement de votre appel requestBannersRefresh le plus récent. Si seuls certains placements vous intéressent, vérifiez l’ID de placement de chaque bannière dans votre écouteur et ignorez les autres. Une fois votre écouteur enregistré, appelez requestBannersRefresh pour les placements que vous souhaitez synchroniser depuis Braze.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// - Available in version 19.0.0+
let placementIds = ["global_banner", "navigation_square_banner"]
let cancellable = brazeClient.braze()?.banners.subscribeToEvents { event in
  switch event {
  case .cacheReplay(let cacheSnapshot), .cacheLoad(let cacheSnapshot):
    cacheSnapshot.banners.forEach { placementId, banner in
      print("Received banner: \(banner) with placement ID: \(placementId)")
    }
  case .dataUpdated(let cacheSnapshot, let reason):
    cacheSnapshot.banners.forEach { placementId, banner in
      print("Received banner: \(banner) with placement ID: \(placementId)")
    }
  default:
    break
  }
}
// Always refresh after your subscriber is registered
brazeClient.braze()?.banners.requestBannersRefresh(placementIds: placementIds)

let placementIds = ["global_banner", "navigation_square_banner"]
let cancellable = brazeClient.braze()?.banners.subscribeToUpdates { banners in
  banners.forEach { placementId, banner in
    print("Received banner: \(banner) with placement ID: \(placementId)")
  }
}
// Always refresh after your subscriber is registered
brazeClient.braze()?.banners.requestBannersRefresh(placementIds: placementIds)

Utilisez subscribeToEvents(_:) avec le SDK Swift 19.0.0 et versions ultérieures. subscribeToUpdates(_:) est l’ancienne méthode, obsolète depuis la version 19.0.0.

Pour savoir quand chaque événement se déclenche et ce que signifient chaque motif de mise à jour, état de nouvelle tentative, action d’analyse et motif d’erreur, consultez la page Abonnements aux événements.

Ces étapes nécessitent le SDK Android 44.0.0 ou une version ultérieure. Elles vous permettent d’afficher les bannières sans réagir aux données en cache.

  Android: 44.0.0+  

Remarque

Votre gestionnaire d’événements de bannière reflète l’état des bannières en mémoire dans le SDK. Un même événement peut inclure des placements déjà en cache (par exemple, issus d’une actualisation précédente, d’un autre écran ou d’un traitement automatique du SDK), et pas seulement les ID de placement de votre appel requestBannersRefresh le plus récent. Si seuls certains placements vous intéressent, vérifiez l’ID de placement de chaque bannière dans votre gestionnaire et ignorez les autres. Une fois votre abonné enregistré, appelez requestBannersRefresh pour les placements que vous souhaitez synchroniser depuis Braze.

1. Abonnez-vous aux événements de bannière avec subscribeToBannersEvents. Traitez chaque type d’événement séparément. | Événement | Déclenchement | |—|—| | CacheReplay | Juste après votre abonnement. Il contient les bannières en cache, qui peuvent ne pas correspondre à votre dernière demande. | | CacheLoad | Lorsque le SDK charge le cache de bannières depuis le disque, par exemple au début d’une session. | | DataUpdated | Lorsque le cache change, notamment à chaque fin d’actualisation. |

   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   
   val bannerSubscriber = IEventSubscriber<BannersEvent> { event ->
     when (event) {
       is BannersEvent.CacheReplay -> {
         // Cached Banners. Don't show fallback content based on this event.
       }
       is BannersEvent.DataUpdated -> {
         val cachedPlacementIds = event.cacheSnapshot.banners.values.map { it.placementId }
         Log.d(TAG, "Banner cache updated: $cachedPlacementIds")
         // Update any Banners that are already on screen.
       }
       else -> Unit
     }
   }
   Braze.getInstance(context).subscribeToBannersEvents(bannerSubscriber)
   
   

2. Appelez requestBannersRefresh avec les ID de placement de l’écran actuel. Transmettez un rappel de fin d’exécution pour savoir quand l’actualisation se termine.

   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   
   val requestedPlacementIds = listOf("global_banner", "navigation_square_banner")
   
   Braze.getInstance(context).requestBannersRefresh(
     requestedPlacementIds,
     object : IValueCallback<BannersUpdatedEvent> {
       override fun onSuccess(value: BannersUpdatedEvent) {
         // The refresh finished. Check each requested placement.
       }
     }
   )
   
   

3. Dans le rappel, appelez getBanner pour chaque ID de placement demandé. Si getBanner renvoie null, le placement n’a pas de contenu de bannière pour l’utilisateur actuel. Affichez alors votre contenu de repli pour ce placement.

   
   1
   2
   3
   4
   5
   6
   7
   8
   
   requestedPlacementIds.forEach { placementId ->
     val banner = Braze.getInstance(context).getBanner(placementId)
     if (banner == null) {
       Log.d(TAG, "No Banner content for $placementId")
     } else {
       Log.d(TAG, "Banner available for ${banner.placementId}")
     }
   }
   
   

4. Lorsque vous n’avez plus besoin de l’abonné, supprimez-le.

   
   1
   
   Braze.getInstance(context).removeSingleSubscription(bannerSubscriber, BannersEvent::class.java)
   
   

Gardez à l’esprit les points suivants :

• Les bannières en cache des placements que vous n’avez pas demandés restent dans le cache. Les événements DataUpdated peuvent donc inclure des placements d’autres écrans. Filtrez-les selon les ID de placement de votre écran actuel.
• Un placement demandé sans contenu de bannière n’apparaît pas dans l’événement DataUpdated. Utilisez getBanner dans le rappel de fin d’exécution plutôt que d’attendre une bannière correspondante dans un événement.
• Une actualisation terminée envoie un événement DataUpdated même si le contenu de la bannière n’a pas changé.

Les événements arrivent sur un thread d’arrière-plan. Basculez sur le thread principal avant de mettre à jour les vues.

Utilisez subscribeToBannersEvents avec le SDK Android 44.0.0 et versions ultérieures. subscribeToBannersUpdates est l’ancienne méthode, obsolète depuis la version 44.0.0.

Pour savoir quand chaque événement se déclenche et ce que signifient chaque motif de mise à jour, état de nouvelle tentative, action d’analyse et motif d’erreur, consultez la page Abonnements aux événements.

1
2
3
4
5
6
7
8
9
10

const bannerCardsSubscription = Braze.addListener(
  Braze.Events.BANNER_CARDS_UPDATED,
  (data) => {
    const banners = data.banners;
    console.log(
      `Received ${banners.length} Banner Cards with placement IDs:`,
      banners.map((banner) => banner.placementId)
    );
  }
);

1

This feature is not currently supported on Unity.

1

This feature is not currently supported on Cordova.

1
2
3
4
5

StreamSubscription bannerStreamSubscription = braze.subscribeToBanners((List<BrazeBanner> banners) {
  for (final banner in banners) {
    print("Received banner: " + banner.toString());
  }
});

1

This feature is not currently supported on Roku.

Étape 4 : Insérer à l’aide de l’ID de placement

Conseil

Pour un tutoriel complet étape par étape, consultez la page Afficher une bannière par ID de placement.

• web
• swift
• android
• react native
• unity
• cordova
• flutter
• roku

Créez un élément conteneur pour la bannière. Veillez à définir sa largeur et sa hauteur.

1

<div id="global-banner-container" style="width: 100%; height: 450px;"></div>

• javascript
• react

Si vous utilisez JavaScript natif avec le SDK Web de Braze, appelez la méthode insertBanner pour remplacer le HTML interne de l’élément conteneur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

import * as braze from "@braze/web-sdk";

braze.initialize("sdk-api-key", {
  baseUrl: "sdk-base-url",
  allowUserSuppliedJavascript: true, // banners require you to opt-in to user-supplied javascript
});

// - Available in version 7.0.0+
braze.subscribeToBannersEvents((event) => {
  const container = document.getElementById("global-banner-container");

  switch (event.type) {
    case braze.ChannelEventType.CACHE_REPLAY:
    case braze.ChannelEventType.CACHE_LOAD:
    case braze.ChannelEventType.DATA_UPDATED: {
      // get this placement's banner. If it's missing the user did not qualify for one.
      const globalBanner = event.cacheSnapshot.banners["global_banner"];
      if (!globalBanner) {
        container.style.display = "none";
        return;
      }

      // Insert the banner which replaces the innerHTML of that container
      braze.insertBanner(globalBanner, container);

      // Special handling if the user is part of a Control Variant
      container.style.display = globalBanner.isControl ? "none" : "";
      break;
    }
    case braze.ChannelEventType.ERROR:
      if (event.reason === braze.ChannelErrorReason.FEATURE_DISABLED) {
        // Banners are disabled, so hide the container
        container.style.display = "none";
      }
      break;
  }
});

braze.subscribeToBannersUpdates((banners) => {
  // get this placement's banner. If it's `null` the user did not qualify for one.
  const globalBanner = braze.getBanner("global_banner");
  if (!globalBanner) {
    return;
  }

  const container = document.getElementById("global-banner-container");

  // Insert the banner which replaces the innerHTML of that container
  braze.insertBanner(globalBanner, container);

  // Special handling if the user is part of a Control Variant
  if (globalBanner.isControl) {
    // hide or collapse the container
    container.style.display = "none";
  }
});

braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);

Utilisez subscribeToBannersEvents avec le SDK Web 7.0.0 et versions ultérieures. subscribeToBannersUpdates est l’ancienne méthode, obsolète depuis la version 7.0.0.

Si vous utilisez React avec le SDK Web de Braze, appelez la méthode insertBanner avec une ref pour remplacer le HTML interne de l’élément conteneur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { useRef } from 'react';
import * as braze from "@braze/web-sdk";

export default function App() {
    const bannerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
       const globalBanner = braze.getBanner("global_banner");
       if (!globalBanner || globalBanner.isControl) {
           // hide the container
       } else {
           // insert the banner to the container node
           braze.insertBanner(globalBanner, bannerRef.current);
       }
    }, []);
    return <div ref={bannerRef}></div>
}

Conseil

Pour suivre les impressions, veillez à appeler insertBanner pour isControl. Vous pouvez ensuite masquer ou réduire votre conteneur.

Après une actualisation, le SDK ne met à jour une BannerUIView ou une BannerView que lorsque le contenu en cache de ce placement change (ajout, suppression ou mise à jour). Les bannières affichées inchangées restent telles quelles. L’appel à changeUser() met à jour toutes les vues de bannière enregistrées.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// To get access to the Banner model object:
let globalBanner: Braze.Banner?
AppDelegate.braze?.banners.getBanner(for: "global_banner", { banner in
  self.globalBanner = banner
})

// UIKit implementation:
// If you simply want the Banner view, initialize a `UIView` with the placement ID:
if let braze = AppDelegate.braze {
  let bannerUIView = BrazeBannerUI.BannerUIView(
    placementId: "global_banner",
    braze: braze,
    // iOS does not perform automatic resizing or visibility changes.
    // Use the `processContentUpdates` parameter to adjust the size and visibility of your Banner according to your use case.
    processContentUpdates: { result in
      switch result {
      case .success(let updates):
        if let height = updates.height {
          // Adjust the visibility and/or height.
        }
      case .failure(let error):
        // Handle the error.
      }
    }
  )
}

// SwiftUI implementation:
// Similarly, if you want a Banner view in SwiftUI, use the corresponding `BannerView` initializer:
if let braze = AppDelegate.braze {
  let bannerView = BrazeBannerUI.BannerView(
    placementId: "global_banner",
    braze: braze,
    // iOS does not perform automatic resizing or visibility changes.
    // Use the `processContentUpdates` parameter to adjust the size and visibility of your Banner according to your use case.
    processContentUpdates: { result in
      switch result {
      case .success(let updates):
        if let height = updates.height {
          // Adjust the visibility and/or height according to your parent controller.
        }
      case .failure(let error):
        // Handle the error.
      }
    }
  )
}

Après une actualisation, le SDK ne met à jour une BannerView que lorsque le contenu en cache de ce placement change (ajout, suppression ou mise à jour). Les bannières affichées inchangées restent telles quelles. L’appel à changeUser() met toujours à jour toutes les BannerView enregistrées.

• java
• kotlin

Pour obtenir la bannière dans du code Java, utilisez :

1

Banner globalBanner = Braze.getInstance(context).getBanner("global_banner");

Vous pouvez créer des bannières dans la mise en page de vos vues Android en incluant ce XML :

1
2
3
4
5

<com.braze.ui.banners.BannerView
    android:id="@+id/global_banner_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:placementId="global_banner" />

Si vous utilisez des vues Android, utilisez ce XML :

1
2
3
4
5

<com.braze.ui.banners.BannerView
    android:id="@+id/global_banner_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:placementId="global_banner" />

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. Ce module est distinct de android-sdk-ui et fournit le composable Banner sous com.braze.jetpackcompose.banners.

Remarque

Certaines bibliothèques d’interface Compose définissent leur propre composable Banner. Importez explicitement com.braze.jetpackcompose.banners.Banner pour être sûr d’appeler l’API de Braze.

1
2
3
4
5
6

import com.braze.jetpackcompose.banners.Banner

@Composable
fun myBannerSlot() {
    Banner(placementId = "global_banner")
}

Vous pouvez éventuellement transmettre heightCallback pour recevoir la hauteur affichée en dp lorsque la taille de la bannière change. Pour en savoir plus, consultez la KDoc de Banner.

Si vous n’ajoutez pas le module Jetpack Compose, encapsulez BannerView dans AndroidView :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import android.view.ViewGroup
import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.AndroidView
import com.braze.ui.banners.BannerView

@Composable
fun myBannerSlot() {
    AndroidView(
        factory = { context ->
            BannerView(context, "global_banner").apply {
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                )
            }
        },
        update = { it.placementId = "global_banner" }
    )
}

Pour obtenir la bannière en Kotlin, utilisez :

1

val banner = Braze.getInstance(context).getBanner("global_banner")

Si vous utilisez la nouvelle architecture de React Native, vous devez enregistrer BrazeBannerView comme composant Fabric dans votre AppDelegate.mm.

1
2
3
4
5
6
7
8

#ifdef RCT_NEW_ARCH_ENABLED
/// Register the `BrazeBannerView` for use as a Fabric component.
- (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents {
  NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
  dictionary[@"BrazeBannerView"] = [BrazeBannerView class];
  return dictionary;
}
#endif

Pour l’intégration la plus simple, ajoutez l’extrait de code JavaScript XML (JSX) suivant dans votre hiérarchie de vues, en indiquant simplement l’ID de placement.

1
2
3

<Braze.BrazeBannerView
  placementId='global_banner'
/>

Pour obtenir le modèle de données de la bannière dans React Native, ou pour vérifier la présence de ce placement dans le cache de votre utilisateur, utilisez :

1

const banner = await Braze.getBanner("global_banner");

1

This feature is not currently supported on Unity.

1

This feature is not currently supported on Cordova.

Pour l’intégration la plus simple, ajoutez le widget suivant dans votre hiérarchie de vues, en indiquant simplement l’ID de placement.

1
2
3
4

BrazeBannerView(
  placementId: "global_banner",
),
To get the Banner's data model in Flutter, use:

Vous pouvez utiliser la méthode getBanner pour vérifier la présence de ce placement dans le cache de votre utilisateur.

1
2
3
4
5
6
7

braze.getBanner("global_banner").then((banner) {
  if (banner == null) {
    // Handle null cases.
  } else {
    print(banner.toString());
  }
});

1

This feature is not currently supported on Roku.

Étape 5 : Envoyer une bannière de test (facultatif)

Avant de lancer une campagne de bannières, vous pouvez envoyer une bannière de test pour vérifier votre intégration. Les bannières de test sont stockées dans un cache en mémoire distinct et ne sont pas conservées après le redémarrage de l’application. Aucune configuration supplémentaire n’est nécessaire, mais votre appareil de test doit pouvoir recevoir des notifications push au premier plan pour afficher le test.

Remarque

Les bannières de test fonctionnent comme toutes les autres bannières, à ceci près qu’elles sont supprimées lors de la session suivante de l’application.

Enregistrer les impressions

Braze enregistre automatiquement les impressions des bannières visibles lorsque vous utilisez les méthodes du SDK pour insérer une bannière—vous n’avez donc pas besoin de suivre les impressions manuellement.

Enregistrement des clics

La méthode d’enregistrement des clics sur les bannières dépend de la façon dont votre bannière est affichée et de l’emplacement de votre gestionnaire de clics.

Contenu de bannière standard (automatique)

Si vous utilisez les méthodes SDK intégrées par défaut pour insérer des bannières, et que votre bannière utilise les composants standard de l’éditeur (images, boutons, texte), les clics sont suivis automatiquement. Le SDK attache des écouteurs de clics à ces éléments : aucun code supplémentaire n’est nécessaire.

Blocs de code personnalisé

Si votre bannière utilise le bloc éditeur Code personnalisé dans le tableau de bord de Braze, vous devez utiliser brazeBridge.logClick() pour enregistrer les clics depuis ce code HTML personnalisé. Cette règle s’applique même si vous utilisez les méthodes SDK pour afficher la bannière, car le SDK ne peut pas attacher automatiquement des écouteurs aux éléments de votre code personnalisé.

1
2
3

<button onclick="brazeBridge.logClick()">
  Click me
</button>

Pour la référence complète, consultez Code personnalisé et pont JavaScript pour les bannières. Le brazeBridge fournit une couche de communication entre le code HTML interne de la bannière et le SDK de Braze parent.

Implémentations d’interface utilisateur personnalisées (headless)

Si vous créez une interface utilisateur entièrement personnalisée à partir des propriétés personnalisées de la bannière plutôt que d’afficher le code HTML de la bannière, vous devez enregistrer manuellement les clics et les impressions depuis le code de votre application. Comme le SDK n’affiche pas la bannière, il n’a aucun moyen de suivre automatiquement les interactions avec vos éléments d’interface personnalisés.

Pour les signatures de méthodes et tous les détails, consultez la documentation de référence du SDK de Braze.

Enregistrement des impressions

Appelez la méthode d’impression de bannière de la plateforme lorsque votre interface personnalisée considère la bannière comme « vue ». Définissez une logique robuste pour déterminer ce qui compte comme une impression afin d’éviter les événements en double : par exemple, enregistrez l’impression uniquement lorsque la bannière entre dans la fenêtre d’affichage (ou équivalent), et ne l’enregistrez pas de nouveau lorsque la même bannière revient dans la vue après un défilement ou lorsque votre composant est réaffiché sans nouvel événement de vue.

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6
7

import * as braze from "@braze/web-sdk";

// Log impression when your custom UI considers the banner viewed (for example, once when it enters viewport)
const banner = braze.getBanner("placement_id_homepage_top");
if (banner) {
  braze.logBannerImpressions([banner]);
}

1
2

// Log impression when your custom UI considers the banner viewed (for example, once when it enters viewport)
Braze.getInstance(context).logBannerImpression("placement_id_homepage_top")

1
2

// Log impression when your custom UI considers the banner viewed (for example, once when it enters viewport)
Braze.getInstance(context).logBannerImpression("placement_id_homepage_top");

1
2
3
4

// Retrieve a banner and log an impression on it (for example, once when it enters viewport)
braze.banners.getBanner(for: "placement_id_homepage_top") { banner in
  banner?.context.logImpression()
}

1
2

// Log impression when your custom UI considers the banner viewed (for example, once when it enters viewport)
Braze.logBannerImpression("placement_id_homepage_top");

1
2

// Log impression when your custom UI considers the banner viewed (for example, once when it enters viewport)
braze.logBannerImpression("placement_id_homepage_top");

Enregistrement des clics

Appelez la méthode de clic sur bannière de la plateforme lorsque l’utilisateur touche votre bannière personnalisée (ou un bouton spécifique). Transmettez le paramètre facultatif buttonId lorsque le clic porte sur un bouton spécifique, afin que les analyses puissent attribuer correctement le clic.

• web
• android
• swift
• react native
• flutter

1
2
3
4

import * as braze from "@braze/web-sdk";

// Log click
braze.logBannerClick("placement_id_homepage_top", buttonId);  // buttonID is optional

1
2

// Log click
Braze.getInstance(context).logBannerClick("placement_id_homepage_top", buttonId)  // buttonID parameter can be null

1
2

// Log click
Braze.getInstance(context).logBannerClick("placement_id_homepage_top", buttonId);  // buttonID parameter can be null

1
2
3
4

// Retrieve a banner and log a click on it
braze.banners.getBanner(for: "placement_id_homepage_top") { banner in
  banner?.context.logClick(buttonId: buttonId)  // buttonID is optional
}

1
2

// Log click
Braze.logBannerClick("placement_id_homepage_top", buttonId);  // buttonID is optional

1
2

// Log click
braze.logBannerClicked("placement_id_homepage_top", buttonId);  // buttonID parameter can be null

Enregistrer les fermetures

La fermeture d’une bannière la retire par programmation d’un placement lorsqu’un utilisateur la ferme activement. Une fois fermée, la bannière est masquée pour cet utilisateur. Lors de la prochaine actualisation de la liste des placements, une nouvelle bannière est renvoyée si l’utilisateur y est éligible.

Conditions préalables

Voici les versions minimales du SDK requises pour enregistrer les fermetures de bannières :

Intégrations

Intégrations de bannières standard (éditeur par glisser-déposer)

Si votre bannière utilise l’éditeur par glisser-déposer et comprend un composant de bouton de fermeture, aucun code supplémentaire n’est nécessaire. Lorsqu’un utilisateur clique sur le bouton de fermeture, le message est masqué, une fermeture est déclenchée, puis un événement de fermeture est enregistré à des fins d’analyse.

Blocs de code personnalisé

Si votre bannière utilise le bloc éditeur Code personnalisé, vous pouvez déclencher une fermeture directement depuis le code HTML de la bannière à l’aide de brazeBridge.closeMessage().

1
2
3

<button onclick="brazeBridge.closeMessage()">
  Dismiss
</button>

Fermer une bannière par programmation

Si vous utilisez la vue standard BrazeBannerView avec le bouton de fermeture créé dans l’éditeur par glisser-déposer, aucun code supplémentaire n’est nécessaire : la fermeture est gérée automatiquement.

Pour les intégrations d’interface utilisateur personnalisées, vous pouvez appeler la méthode de fermeture directement sur votre instance Braze afin de fermer une bannière par programmation et d’enregistrer un événement de fermeture. Vous pouvez appeler cette méthode plusieurs fois sans risque : le SDK ignore les appels en double pour une même bannière.

Voici les versions minimales du SDK requises pour fermer une bannière par programmation :

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6
7
8

import * as braze from "@braze/web-sdk";

const banners = braze.getAllBanners();
const banner = banners["global_banner"];

if (banner) {
  braze.dismissBanner(banner);
}

1
2
3
4
5
6
7
8

import * as braze from "@braze/web-sdk";

const banners = braze.getAllBanners();
const banner = banners["global_banner"];

if (banner) {
  braze.dismissBanner(banner);
}

1

Braze.getInstance(context).dismissBanner("your-placement-id");

1

Braze.getInstance(context).dismissBanner("your-placement-id")

1
2
3
4
5

// Preferred: dismiss via context.
banner.context?.dismiss()

// Fallback: if context is unavailable.
banner.dismiss(using: braze)

1

Braze.dismissBanner("your-placement-id");

1

braze.dismissBanner("your-placement-id");

Enregistrer des analyses personnalisées lors de la fermeture d’une bannière

Pour exécuter une logique personnalisée lors de la fermeture d’une bannière, par exemple pour enregistrer des analyses, utilisez le rappel de fermeture de votre SDK. Le rappel reçoit un objet événement contenant les valeurs placementId, stableKey et trackingId de la bannière.

• web
• android
• swift
• react native
• flutter

Utilisez Banner.subscribeToDismissedEvent() pour exécuter une logique personnalisée lorsqu’une bannière spécifique est fermée. Abonnez-vous à l’événement avant d’afficher la bannière.

Remarque

Banner.subscribeToDismissedEvent() nécessite le SDK Web 6.9.0 ou une version ultérieure. Sur les versions antérieures, utilisez braze.subscribeToBannersUpdates() et détectez la fermeture en vérifiant si la bannière ne figure plus dans la liste des bannières mise à jour. À partir du SDK Web 7.0.0, vous pouvez également écouter l’événement DISMISS de braze.subscribeToBannersEvents().

• javascript
• react

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import * as braze from "@braze/web-sdk";

// - Available in version 7.0.0+
braze.subscribeToBannersEvents((event) => {
  if (
    event.type !== braze.ChannelEventType.CACHE_REPLAY &&
    event.type !== braze.ChannelEventType.CACHE_LOAD &&
    event.type !== braze.ChannelEventType.DATA_UPDATED
  ) {
    return;
  }

  const banner = event.cacheSnapshot.banners["global_banner"];

  if (banner) {
    banner.subscribeToDismissedEvent(() => {
      // Run any custom logic here, such as logging custom analytics
      console.log("Banner was dismissed");
    });
  }
});

braze.subscribeToBannersUpdates((banners) => {
  const banner = banners["global_banner"];

  if (banner) {
    banner.subscribeToDismissedEvent(() => {
      // Run any custom logic here, such as logging custom analytics
      console.log("Banner was dismissed");
    });
  }
});

braze.requestBannersRefresh(["global_banner"]);

Utilisez subscribeToBannersEvents à partir du SDK Web 7.0.0. subscribeToBannersUpdates correspond à l’ancienne approche, obsolète depuis la version 7.0.0.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import { useEffect } from "react";
import * as braze from "@braze/web-sdk";

useEffect(() => {
  // - Available in version 7.0.0+
  const subscriptionId = braze.subscribeToBannersEvents((event) => {
    if (
      event.type !== braze.ChannelEventType.CACHE_REPLAY &&
      event.type !== braze.ChannelEventType.CACHE_LOAD &&
      event.type !== braze.ChannelEventType.DATA_UPDATED
    ) {
      return;
    }

    const banner = event.cacheSnapshot.banners["global_banner"];

    if (banner) {
      banner.subscribeToDismissedEvent(() => {
        // Run any custom logic here, such as logging custom analytics
        console.log("Banner was dismissed");
      });
    }
  });

  const deprecatedSubscriptionId = braze.subscribeToBannersUpdates((banners) => {
    const banner = banners["global_banner"];

    if (banner) {
      banner.subscribeToDismissedEvent(() => {
        // Run any custom logic here, such as logging custom analytics
        console.log("Banner was dismissed");
      });
    }
  });

  braze.requestBannersRefresh(["global_banner"]);

  return () => {
    braze.removeSubscription(subscriptionId);
    braze.removeSubscription(deprecatedSubscriptionId);
  };
}, []);

Utilisez subscribeToBannersEvents à partir du SDK Web 7.0.0. subscribeToBannersUpdates correspond à l’ancienne approche, obsolète depuis la version 7.0.0.

Définissez la propriété facultative onDismissCallback sur BannerView.

• java
• kotlin

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import android.util.Log;
import com.braze.ui.banners.BannerView;
import kotlin.Unit;

// After obtaining your BannerView instance (for example from XML via findViewById, or `new BannerView(context, "global_banner")`)

bannerView.setOnDismissCallback((snapshot) -> {
  Log.d(TAG, "placementId: " + snapshot.getPlacementId()
    + ", stableKey: " + snapshot.getStableKey()
    + ", trackingId: " + snapshot.getTrackingId());

  // Run any custom logic here, such as logging custom analytics
  return Unit.INSTANCE;
});

1
2
3
4
5
6
7
8
9
10

import android.util.Log
import com.braze.ui.banners.BannerView

// After obtaining your BannerView instance (for example via findViewById or `BannerView(context, "global_banner")`)

bannerView.onDismissCallback = { snapshot ->
  Log.d(TAG, "placementId: ${snapshot.placementId}, stableKey: ${snapshot.stableKey}, trackingId: ${snapshot.trackingId}")

  // Run any custom logic here, such as logging custom analytics
}

1
2
3
4
5
6
7
8
9

// After initializing your banner view instance using UIKit or SwiftUI

bannerView.onDismiss = { event in
  print("Banner dismissed — placementId: \(event.placementId ?? "unknown")")
  print("  stableKey: \(event.stableKey ?? "unknown")")
  print("  trackingId: \(event.trackingId ?? "unknown")")

  // Run any custom logic here, such as logging custom analytics
}

Définissez la prop onDismiss sur Braze.BrazeBannerView pour exécuter une logique personnalisée lors de la fermeture d’une bannière.

1
2
3
4
5
6
7
8
9

import Braze from "@braze/react-native-sdk";

<Braze.BrazeBannerView
  placementId="global_banner"
  onDismiss={(event) => {
    console.log("placementId:", event.placementId, "stableKey:", event.stableKey, "trackingId:", event.trackingId);
    // Run any custom logic here, such as logging custom analytics
  }}
/>

Définissez le paramètre onDismiss sur BrazeBannerView pour exécuter une logique personnalisée lors de la fermeture d’une bannière.

1
2
3
4
5
6
7

BrazeBannerView(
  placementId: 'global_banner',
  onDismiss: (BrazeBannerDismissEvent event) {
    print('placementId: ${event.placementId}, stableKey: ${event.stableKey}, trackingId: ${event.trackingId}');
    // Run any custom logic here, such as logging custom analytics
  },
)

Limite de stockage des fermetures en attente

Les événements de fermeture sont stockés localement en tant qu’entrées en attente jusqu’à ce qu’ils puissent être synchronisés avec le serveur de Braze lors du prochain appel à requestBannersRefresh.

Avertissement

Dans de rares cas, si un grand nombre de fermetures s’accumulent sans synchronisation réussie, les fermetures en attente les plus anciennes peuvent être supprimées. Dans ce cas, des bannières précédemment fermées peuvent réapparaître jusqu’à la prochaine synchronisation réussie. Pour limiter ce risque, appelez requestBannersRefresh chaque fois que votre application retrouve la connectivité réseau.

Dimensions et taille

Voici ce que vous devez savoir sur les dimensions et la taille des bannières :

• Bien que l’éditeur vous permette de prévisualiser les bannières dans différentes dimensions, ces informations ne sont ni enregistrées ni envoyées au SDK.
• Le HTML occupera toute la largeur du conteneur dans lequel il est affiché.
• Nous vous recommandons de créer un élément aux dimensions fixes et de tester ces dimensions dans l’éditeur.

Propriétés personnalisées

Vous pouvez utiliser les propriétés personnalisées de votre campagne de bannières pour récupérer des données clé-valeur via le SDK et modifier le comportement ou l’apparence de votre application. Par exemple, vous pourriez :

• Envoyer des métadonnées pour vos analyses tierces ou intégrations.
• Utiliser des métadonnées telles qu’un timestamp ou un objet JSON pour déclencher une logique conditionnelle.
• Contrôler le comportement d’un Banner en fonction de métadonnées incluses comme ratio ou format.

Conditions préalables

Vous devez ajouter des propriétés personnalisées à votre campagne de bannières. De plus, voici les versions minimales du SDK requises pour accéder aux propriétés personnalisées :

Accéder aux propriétés personnalisées

Pour accéder aux propriétés personnalisées d’une bannière, utilisez l’une des méthodes suivantes en fonction du type de propriété défini dans le tableau de bord. Si la clé ne correspond pas à une propriété de ce type ou n’existe pas, la méthode renvoie null.

• web
• swift
• android
• react native
• flutter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Returns the Banner instance
const banner = braze.getBanner("placement_id_homepage_top");

// banner may be undefined or null
if (banner) {

  // Returns the string property
  const stringProperty = banner.getStringProperty("color");

  // Returns the boolean property
  const booleanProperty = banner.getBooleanProperty("expanded");

  // Returns the number property
  const numberProperty = banner.getNumberProperty("height");

  // Returns the timestamp property (as a number)
  const timestampProperty = banner.getTimestampProperty("account_start");

  // Returns the image URL property as a string of the URL
  const imageProperty = banner.getImageProperty("homepage_icon");

  // Returns the JSON object property
  const jsonObjectProperty = banner.getJsonProperty("footer_settings");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Passes the specified banner to the completion handler
AppDelegate.braze?.banners.getBanner(for: "placement_id_homepage_top") { banner in
  // Returns the string property
  let stringProperty: String? = banner.stringProperty(key: "color")

  // Returns the boolean property
  let booleanProperty: Bool? = banner.boolProperty(key: "expanded")

  // Returns the number property as a double
  let numberProperty: Double? = banner.numberProperty(key: "height")

  // Returns the Unix UTC millisecond timestamp property as an integer
  let timestampProperty: Int? = banner.timestampProperty(key: "account_start")

  // Returns the image property as a String of the image URL
  let imageProperty: String? = banner.imageProperty(key: "homepage_icon")

  // Returns the JSON object property as a [String: Any] dictionary
  let jsonObjectProperty: [String: Any]? = banner.jsonObjectProperty(key: "footer_settings")
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Returns the Banner instance
Banner banner = Braze.getInstance(context).getBanner("placement_id_homepage_top");

// banner may be undefined or null
if (banner != null) {
  // Returns the string property
  String stringProperty = banner.getStringProperty("color");

  // Returns the boolean property
  Boolean booleanProperty = banner.getBooleanProperty("expanded");

  // Returns the number property
  Number numberProperty = banner.getNumberProperty("height");

  // Returns the timestamp property (as a Long)
  Long timestampProperty = banner.getTimestampProperty("account_start");

  // Returns the image URL property as a String of the URL
  String imageProperty = banner.getImageProperty("homepage_icon");

  // Returns the JSON object property as a JSONObject
  JSONObject jsonObjectProperty = banner.getJSONProperty("footer_settings");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Returns the Banner instance
val banner: Banner = Braze.getInstance(context).getBanner("placement_id_homepage_top") ?: return

// Returns the string property
val stringProperty: String? = banner.getStringProperty("color")

// Returns the boolean property
val booleanProperty: Boolean? = banner.getBooleanProperty("expanded")

// Returns the number property
val numberProperty: Number? = banner.getNumberProperty("height")

// Returns the timestamp property (as a Long)
val timestampProperty: Long? = banner.getTimestampProperty("account_start")

// Returns the image URL property as a String of the URL
val imageProperty: String? = banner.getImageProperty("homepage_icon")

// Returns the JSON object property as a JSONObject
val jsonObjectProperty: JSONObject? = banner.getJSONProperty("footer_settings")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Get the Banner instance
const banner = await Braze.getBanner('placement_id_homepage_top');
if (!banner) return;

// Get the string property
const stringProperty = banner.getStringProperty('color');

// Get the boolean property
const booleanProperty = banner.getBooleanProperty('expanded');

// Get the number property
const numberProperty = banner.getNumberProperty('height');

// Get the timestamp property (as a number)
const timestampProperty = banner.getTimestampProperty('account_start');

// Get the image URL property as a string
const imageProperty = banner.getImageProperty('homepage_icon');

// Get the JSON object property
const jsonObjectProperty = banner.getJSONProperty('footer_settings');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Fetch the banner asynchronously
_braze.getBanner(placementId).then(('placement_id_homepage_top') {
  // Get the string property
  final String? stringProperty = banner?.getStringProperty('color');

  // Get the boolean property
  final bool? booleanProperty = banner?.getBooleanProperty('expanded');

  // Get the number property
  final num? numberProperty = banner?.getNumberProperty('height');

  // Get the timestamp property
  final int? timestampProperty = banner?.getTimestampProperty('account_start');

  // Get the image URL property
  final String? imageProperty = banner?.getImageProperty('homepage_icon');

  // Get the JSON object property
  final Map<String, dynamic>? jsonObjectProperty = banner?.getJSONProperty('footer_settings');

  // Use these properties as needed in your UI or logic
});