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 plus d’informations 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 bannière pour chaque emplacement.

• Vous pouvez demander jusqu’à 10 placements par requête pour actualiser.
• Pour chaque emplacement, Braze renvoie la bannière ayant la priorité la plus élevée que l’utilisateur est éligible à recevoir.
• Si plus de 10 placements sont demandés lors de l’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 pour actualiser :homepage_promo cart_abandonment, et seasonal_offer. Chaque requête renvoie la bannière la plus pertinente pour cet emplacement.

Limite de débit pour les requêtes d’actualisation

Si vous utilisez des versions SDK antérieures (antérieures à Swift 13.1.0, Android 38.0.0, Web 6.1.0, React native 17.0.0 et Flutter 15.0.0), une seule demande pour actualiser l’application est autorisée par session utilisateur.

Si vous utilisez les versions SDK minimales les plus récentes (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 un sondage excessif :

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

Chaque appel àrequestBannersRefresh consomme un jeton. Si vous essayez d’actualiser 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 déclenchées par des déclencheurs d’é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), veuillez appeler la méthode d’actualisation après l’enregistrement de l’événement personnalisé, mais notez le délai nécessaire à Braze pour ingérer et traiter l’événement avant que l’utilisateur ne soit éligible à une autre campagne Banner.

Créer un placement

Conditions préalables

Voici les versions minimales du SDK requises pour créer des emplacements de bannières :

Étape 1 : Créer des placements dans Braze

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

Donnez un nom à votre placement et attribuez-lui un ID. Veillez à consulter les autres Teams 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, voir ID de placement.

Étape 2 : Actualiser les placements dans votre application

Les placements peuvent être actualisés en appelant les méthodes d’actualisation décrites ci-dessous. Ces placements seront automatiquement mis en cache lorsque la session d’un utilisateur expirera ou lorsque vous changerez d’utilisateur identifié à l’aide de la méthode changeUser.

• 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.requestRefresh(placementIds: ["global_banner", "navigation_square_banner"])

1
2
3
4
ArrayList<String> listOfBanners = new ArrayList<>();
listOfBanners.add("global_banner");
listOfBanners.add("navigation_square_banner");
Braze.getInstance(context).requestBannersRefresh(listOfBanners);

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

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

1
2
3
4
5
6
7
8
import * as braze from "@braze/web-sdk";

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

// always refresh after your subscriber function has been registered
braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import * as braze from "@braze/web-sdk";

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

  // always refresh after your subscriber function has been registered
  braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);

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

1
2
3
4
5
let cancellable = brazeClient.braze()?.banners.subscribeToUpdates { banners in
  banners.forEach { placementId, banner in
    print("Received banner: \(banner) with placement ID: \(placementId)")
  }
}

1
2
3
4
5
Braze.getInstance(context).subscribeToBannersUpdates(banners -> {
  for (Banner banner : banners.getBanners()) {
    Log.d(TAG, "Received banner: " + banner.getPlacementId());
  }
});

1
2
3
4
5
Braze.getInstance(context).subscribeToBannersUpdates { update ->
  for (banner in update.banners) {
    Log.d(TAG, "Received banner: " + banner.placementId)
  }
}

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

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

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

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
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
});

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;
  }

  // choose where in the DOM you want to insert the banner HTML
  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"]);

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>
}

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.
      }
    }
  )
}

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

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" />

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" />

1
Banner(placementId = "global_banner")

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

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

1
2
3
<Braze.BrazeBannerView
  placementID='global_banner'
/>

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.

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

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 seront stockées dans un cache en mémoire distinct et ne persisteront pas lors des redémarrages de l’application. Bien qu’aucune configuration supplémentaire ne soit nécessaire, votre appareil de test doit être capable de recevoir des notifications push au premier plan pour pouvoir afficher le test.

Enregistrer les impressions

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

Enregistrer les clics

La méthode utilisée pour enregistrer les clics sur les bannières dépend de la manière dont votre bannière est affichée et de l’emplacement de votre gestionnaire de clics.

Contenu standard de la bannière (automatique)

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

Blocs de code personnalisés

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 HTML personnalisé. Cela s’applique même lorsque vous utilisez les méthodes SDK pour afficher la bannière, car le SDK ne peut pas associer 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 HTML interne de la bannière et le SDK Braze parent.

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

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

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

Enregistrer les impressions

Appelez la méthode d’impression de bannière de la plateforme lorsque votre interface utilisateur personnalisée considère la bannière comme « vue ». Construisez une logique robuste pour déterminer ce qui constitue une impression afin d’éviter les événements en double — par exemple, enregistrez uniquement lorsque la bannière entre dans la zone visible (ou équivalent), et ne réenregistrez pas lorsque la même bannière revient dans la zone visible ou lorsque votre composant se re-rend sans un 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");

Enregistrer les clics

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

• 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

Les fermetures de bannières suppriment programmatiquement une bannière d’un placement lorsqu’un utilisateur la ferme activement. Une fois fermée, la bannière est masquée pour cet utilisateur. La prochaine fois que la liste des placements est actualisée, une nouvelle bannière sera renvoyée si l’utilisateur 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 inclut 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 sera masqué, déclenchera une fermeture puis enregistrera un événement de fermeture pour les analyses.

Blocs de code personnalisés

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

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

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

Pour exécuter une logique supplémentaire, comme l’enregistrement d’analyses personnalisées lors de la fermeture d’une bannière, surchargez le rappel facultatif onDismiss sur votre vue de bannière. Par défaut, ce rappel est vide.

• web
• android
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import * as braze from "@braze/web-sdk";

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

  if (!globalBanner) {
    // The banner was dismissed or the user is no longer eligible.
    // Run any custom analytics here.
    console.log("Banner was dismissed");
    return;
  }
});

braze.requestBannersRefresh(["global_banner"]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { useEffect } from "react";
import * as braze from "@braze/web-sdk";

useEffect(() => {
  const subscriptionId = braze.subscribeToBannersUpdates((banners) => {
    const globalBanner = banners["global_banner"];

    if (!globalBanner) {
      // The banner was dismissed or the user is no longer eligible.
      // Run any custom analytics here.
      console.log("Banner was dismissed");
      return;
    }
  });

  braze.requestBannersRefresh(["global_banner"]);

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

1
2
3
4
5
6
7
8
9
10
11
12
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(() -> {
  Log.d(TAG, "Successfully dismissed banner with placementId: " + bannerView.getPlacementId());

  // 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 = {
  Log.d(TAG, "Successfully dismissed banner with placementId: ${bannerView.placementId}")

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

1
2
3
4
5
6
7
// After initializing your banner view instance using UIKit or SwiftUI

bannerView.onDismiss = { dismissedBanner in
  print("Successfully dismissed banner with placementId: \(dismissedBanner.placementId)")

  // 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 Braze lors du prochain appel requestBannersRefresh.

Dimensions et taille

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

• Bien que le compositeur vous permette de prévisualiser les bannières dans différentes dimensions, cette information n’est pas enregistrée ni envoyée au SDK.
• Le HTML occupera toute la largeur du conteneur dans lequel il est affiché.
• Nous vous recommandons de créer un élément de dimension fixe et de tester ces dimensions dans le compositeur.

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 ou intégrations tierces.
• Utiliser des métadonnées telles qu’un timestamp ou un objet JSON pour déclencher une logique conditionnelle.
• Contrôler le comportement d’une bannière en fonction des métadonnées incluses comme ratio ou format.

Conditions préalables

Vous devrez 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
});