Banner-Platzierungen verwalten

Erfahren Sie, wie Sie Banner-Platzierungen im Braze SDK erstellen und verwalten, einschließlich des Zugriffs auf deren eindeutige Eigenschaften und der Protokollierung von Impressionen. Weitere allgemeine Informationen finden Sie unter Über Banner.

Über Platzierungsanfragen

Wenn Sie Platzierungen in Ihrer App oder Website erstellen, sendet Ihre App eine Anfrage an Braze, um Banner-Nachrichten für jede Platzierung abzurufen.

• Sie können bis zu 10 Platzierungen pro Aktualisierungsanfrage anfordern.
• Für jede Platzierung gibt Braze das Banner mit der höchsten Priorität zurück, für das die Nutzer:in berechtigt ist.
• Wenn bei einer Aktualisierung mehr als 10 Platzierungen angefragt werden, werden nur die ersten 10 zurückgegeben; die übrigen werden verworfen.

Beispielsweise könnte eine App in einer Aktualisierungsanfrage drei Platzierungen anfordern: homepage_promo, cart_abandonment und seasonal_offer. Jede Anfrage gibt das für diese Platzierung relevanteste Banner zurück.

Rate-Limiting für Aktualisierungsanfragen

Wenn Sie ältere SDK-Versionen verwenden (vor Swift 13.1.0, Android 38.0.0, Web 6.1.0, React Native 17.0.0 und Flutter 15.0.0), ist nur eine Aktualisierungsanfrage pro Nutzersitzung zulässig.

Wenn Sie neuere Mindest-SDK-Versionen verwenden (Swift 13.1.0+, Android 38.0.0+, Web 6.1.0+, React Native 17.0.0+ und Flutter 15.0.0+), werden Aktualisierungsanfragen durch einen Token-Bucket-Algorithmus gesteuert, um übermäßiges Polling zu verhindern:

• Jede Nutzersitzung beginnt mit fünf Aktualisierungs-Token.
• Die Token werden mit einer Rate von einem Token alle 180 Sekunden (3 Minuten) aufgefüllt.

Jeder explizite Aufruf von requestBannersRefresh verbraucht ein Token. Die automatische Aktualisierung, die zu Beginn einer neuen Sitzung oder beim Aufruf von changeUser erfolgt, verbraucht kein Token, da bei dieser Aktualisierung das zuletzt zwischengespeicherte Banner für die jeweilige Nutzer:in veröffentlicht wird. Wenn Sie versuchen, eine Aktualisierung durchzuführen, obwohl keine Token verfügbar sind, sendet das SDK die Anfrage nicht und protokolliert einen Fehler, bis ein Token wieder aufgefüllt ist. Dies ist für Updates während der Sitzung und Event-getriggerte Updates von Bedeutung. Um dynamische Updates durchzuführen (beispielsweise nachdem eine Nutzer:in eine Aktion auf derselben Seite abgeschlossen hat), rufen Sie die Aktualisierungsmethode auf, nachdem das angepasste Event protokolliert wurde. Beachten Sie jedoch die erforderliche Verzögerung, die Braze benötigt, um das Event zu erfassen und zu verarbeiten, bevor die Nutzer:in für eine andere Banner-Campaign qualifiziert ist.

Platzierung erstellen

Voraussetzungen

Dies sind die SDK-Mindestversionen, die Sie zum Erstellen von Banner-Platzierungen benötigen:

Schritt 1: Platzierungen in Braze erstellen

Falls Sie dies noch nicht getan haben, müssen Sie in Braze Banner-Platzierungen erstellen, mit denen Sie die Standorte in Ihrer App oder Website definieren, an denen Banner angezeigt werden können. Um eine Platzierung zu erstellen, gehen Sie zu Einstellungen > Banner-Platzierungen und wählen Sie dann Platzierung erstellen.

Geben Sie Ihrer Platzierung einen Namen und weisen Sie eine Platzierungs-ID zu. Stimmen Sie sich unbedingt mit anderen Teams ab, bevor Sie eine ID zuweisen, da diese während des gesamten Lebenszyklus der Karte verwendet wird und später nicht mehr geändert werden sollte. Weitere Informationen finden Sie unter Platzierungs-IDs.

Hinweis

Für Web-Platzierungen können Sie optional Web Targeting für die Platzierung konfigurieren. Das Braze Web SDK fügt Banner dann automatisch an einer bestimmten Stelle auf der Seite ein, sodass Sie insertBanner() nicht selbst aufrufen müssen. Siehe Web Targeting: Banner automatisch einfügen.

Schritt 2: Platzierungen in Ihrer App aktualisieren

Um Platzierungen zu aktualisieren, rufen Sie requestBannersRefresh() für Ihr SDK auf.

requestBannersRefresh() führt die Ergebnisse mit dem vorhandenen Banner-Cache zusammen. Nur die Platzierungs-IDs, die Sie übergeben, werden hinzugefügt, aktualisiert oder entfernt:

• Gibt der Server für eine angefragte Platzierung ein Banner zurück, wird das zwischengespeicherte Banner für diese Platzierung ersetzt.
• Gibt der Server für eine angefragte Platzierung kein Banner zurück, wird diese Platzierung aus dem Cache entfernt.
• Zwischengespeicherte Banner für Platzierungen, die Sie nicht angefragt haben, bleiben bis zu ihrem Ablauf im Cache.

Wie viele Platzierungen Sie pro Aktualisierung anfragen können, erfahren Sie unter Informationen zu Platzierungsanfragen. Sie können im Laufe der Zeit unterschiedliche Gruppen von Platzierungen aktualisieren (zum Beispiel die Platzierungen auf dem aktuellen Bildschirm) und Banner für andere Platzierungen im Cache behalten.

Für die Aktualisierung von Bannern gibt es zwei Wege:

1. Explizite Aktualisierung: Sie können die Aktualisierungsmethode jederzeit während einer aktiven Sitzung aufrufen.
2. Automatische Aktualisierung bei einer neuen Sitzung: Nachdem Sie mindestens eine explizite Aktualisierungsanfrage gestellt haben, kann das SDK die zuletzt angefragten Platzierungs-IDs erneut anfragen, wenn eine neue Braze-Sitzung beginnt (zum Beispiel nach changeUser() oder nach einem Sitzungs-Timeout).

Die Rolle des Abonnierens von Banner-Events unterscheidet sich je nach Plattform:

• iOS und Android: subscribeToBannersEvents() unter Android (bzw. subscribeToEvents() unter Swift) registriert einen Event-Handler. Die automatische Aktualisierung beim Sitzungsstart hängt nicht davon ab, ob das Abonnement aktiv ist.
• Web: Die automatische Aktualisierung beim Sitzungsstart setzt voraus, dass subscribeToBannersEvents() (oder das veraltete subscribeToBannersUpdates()) registriert ist. Ohne aktives Abonnement wiederholt das SDK die Aktualisierung bei einer neuen Sitzung nicht automatisch.

In allen Fällen müssen Sie pro App-Lebenszyklus mindestens eine explizite Aktualisierungsanfrage stellen, damit das SDK weiß, welche Platzierungs-IDs aktuell gehalten werden sollen. Ohne diesen ersten Aufruf werden Banner beim ersten Start nicht automatisch abgerufen, und die erfassten Platzierungs-IDs werden nach einem Neustart der App zurückgesetzt.

Automatische Aktualisierungen beim Sitzungsstart verbrauchen keinen Rate-Limiting-Token.

Tipp

Aktualisieren Sie Platzierungen so früh wie möglich, um Verzögerungen beim Herunterladen oder Anzeigen von Bannern zu vermeiden.

• 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.

Schritt 3: Auf Updates warten

Tipp

Wenn Sie Banner mit den SDK-Methoden aus dieser Anleitung einfügen, werden alle Analytics-Events (wie Impressionen und Klicks) automatisch verarbeitet, und Impressionen werden nur protokolliert, wenn das Banner sichtbar ist.

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

  Web: 7.0.0+  

Verwenden Sie subscribeToBannersEvents, um auf Banner-Events zu warten, und rufen Sie dann requestBannersRefresh auf, um Platzierungen abzurufen. Das SDK ruft Ihren Handler mit einem Event-Objekt auf. Werten Sie event.type mit einem Switch aus, um jede Art von Event zu verarbeiten. Weitere Informationen zu den Event-Werten finden Sie unter Event-Abonnements.

• javascript
• react

Wenn Sie reines JavaScript mit dem Braze Web SDK verwenden, registrieren Sie Ihren Handler, bevor Sie requestBannersRefresh aufrufen.

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

Wenn Sie React mit dem Braze Web SDK verwenden, richten Sie subscribeToBannersEvents innerhalb eines useEffect-Hooks ein und rufen Sie requestBannersRefresh auf, nachdem Sie Ihren Listener registriert haben.

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);
  };
}, []);

Wann die einzelnen Events ausgelöst werden und was die jeweiligen Update-Gründe, Wiederholungsstatus, Analytics-Aktionen und Fehlergründe bedeuten, erfahren Sie unter Event-Abonnements.

event.cacheSnapshot.banners ist ein Objekt, das jeder Platzierungs-ID das zugehörige Banner zuordnet. Es kann Platzierungen aus früheren Aktualisierungen enthalten, nicht nur die Platzierungs-IDs aus Ihrem letzten requestBannersRefresh-Aufruf. Wenn Sie nur bestimmte Platzierungen benötigen, lesen Sie diese Platzierungs-IDs aus dem Snapshot aus und überspringen Sie den Rest.

Verwenden Sie subscribeToBannersEvents ab Web SDK 7.0.0. subscribeToBannersUpdates ist das frühere Muster und seit Version 7.0.0 veraltet. Das frühere Muster liefert nur die aktuellen Banner und kann Ihnen daher nicht mitteilen, warum sich die Banner geändert haben oder wann eine Aktualisierung fehlgeschlagen ist.

  Swift: 19.0.0+  

Hinweis

Ihr Listener für Banner-Updates spiegelt den In-Memory-Banner-Status des SDK wider. Ein einzelnes Update kann Platzierungen enthalten, die bereits zwischengespeichert waren (zum Beispiel aus einer früheren Aktualisierung, von einem anderen Bildschirm oder durch automatische SDK-Vorgänge), nicht nur die Platzierungs-IDs aus Ihrem letzten requestBannersRefresh-Aufruf. Wenn Sie nur bestimmte Platzierungen benötigen, prüfen Sie in Ihrem Listener die Platzierungs-ID jedes Banners und überspringen Sie den Rest. Nachdem Sie Ihren Listener registriert haben, rufen Sie requestBannersRefresh für die Platzierungen auf, die Sie mit Braze synchronisieren möchten.

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)

Verwenden Sie subscribeToEvents(_:) ab Swift SDK 19.0.0. subscribeToUpdates(_:) ist das frühere Muster und seit Version 19.0.0 veraltet.

Wann die einzelnen Events ausgelöst werden und was die jeweiligen Update-Gründe, Wiederholungsstatus, Analytics-Aktionen und Fehlergründe bedeuten, erfahren Sie unter Event-Abonnements.

Diese Schritte erfordern Android SDK 44.0.0 oder höher. Damit können Sie Banner rendern, ohne auf zwischengespeicherte Daten zu reagieren.

  Android: 44.0.0+  

Hinweis

Ihr Banner-Event-Handler spiegelt den In-Memory-Banner-Status des SDK wider. Ein einzelnes Event kann Platzierungen enthalten, die bereits zwischengespeichert waren (zum Beispiel aus einer früheren Aktualisierung, von einem anderen Bildschirm oder durch automatische SDK-Vorgänge), nicht nur die Platzierungs-IDs aus Ihrem letzten requestBannersRefresh-Aufruf. Wenn Sie nur bestimmte Platzierungen benötigen, prüfen Sie in Ihrem Handler die Platzierungs-ID jedes Banners und überspringen Sie den Rest. Nachdem Sie Ihren Subscriber registriert haben, rufen Sie requestBannersRefresh für die Platzierungen auf, die Sie mit Braze synchronisieren möchten.

1. Abonnieren Sie Banner-Events mit subscribeToBannersEvents. Verarbeiten Sie jeden Event-Typ separat. | Event | Wann es ausgelöst wird | |—|—| | CacheReplay | Direkt nach dem Abonnieren. Es enthält die zwischengespeicherten Banner, die möglicherweise nicht Ihrer letzten Anfrage entsprechen. | | CacheLoad | Wenn das SDK den Banner-Cache vom Datenträger lädt, zum Beispiel zu Beginn einer Sitzung. | | DataUpdated | Wenn sich der Cache ändert, einschließlich jedes Mal, wenn eine Aktualisierung abgeschlossen ist. |

   
   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. Rufen Sie requestBannersRefresh mit den Platzierungs-IDs für den aktuellen Bildschirm auf. Übergeben Sie einen Completion-Callback, damit Sie wissen, wann die Aktualisierung abgeschlossen ist.

   
   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. Rufen Sie im Callback getBanner für jede angefragte Platzierungs-ID auf. Gibt getBanner den Wert null zurück, gibt es für diese Platzierung keine Banner-Inhalte für die aktuelle Nutzer:in. Zeigen Sie für diese Platzierung Ihre Fallback-Inhalte an.

   
   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. Entfernen Sie den Subscriber, wenn Sie ihn nicht mehr benötigen.

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

Beachten Sie Folgendes:

• Banner, die für nicht angefragte Platzierungen zwischengespeichert sind, bleiben im Cache. DataUpdated-Events können daher Platzierungen von anderen Bildschirmen enthalten. Filtern Sie nach den Platzierungs-IDs für Ihren aktuellen Bildschirm.
• Eine angefragte Platzierung ohne Banner-Inhalte erscheint nicht im DataUpdated-Event. Verwenden Sie getBanner im Completion-Callback, anstatt auf ein passendes Banner in einem Event zu warten.
• Eine abgeschlossene Aktualisierung sendet ein DataUpdated-Event, auch wenn sich die Banner-Inhalte nicht geändert haben.

Events treffen in einem Hintergrund-Thread ein. Wechseln Sie zum Haupt-Thread, bevor Sie Views aktualisieren.

Verwenden Sie subscribeToBannersEvents ab Android SDK 44.0.0. subscribeToBannersUpdates ist das frühere Muster und seit Version 44.0.0 veraltet.

Wann die einzelnen Events ausgelöst werden und was die jeweiligen Update-Gründe, Wiederholungsstatus, Analytics-Aktionen und Fehlergründe bedeuten, erfahren Sie unter Event-Abonnements.

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.

Schritt 4: Mit der Platzierungs-ID einfügen

Tipp

Eine vollständige Schritt-für-Schritt-Anleitung finden Sie unter Banner anhand der Platzierungs-ID anzeigen.

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

Erstellen Sie ein Container-Element für das Banner. Legen Sie unbedingt Breite und Höhe fest.

1

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

• javascript
• react

Wenn Sie reines JavaScript mit dem Braze Web SDK verwenden, rufen Sie die Methode insertBanner auf, um das innere HTML des Container-Elements zu ersetzen.

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"]);

Verwenden Sie subscribeToBannersEvents ab Web SDK 7.0.0. subscribeToBannersUpdates ist das frühere Muster und seit Version 7.0.0 veraltet.

Wenn Sie React mit dem Braze Web SDK verwenden, rufen Sie die Methode insertBanner mit einer ref auf, um das innere HTML des Container-Elements zu ersetzen.

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

Tipp

Um Impressionen zu tracken, rufen Sie insertBanner unbedingt auch für isControl auf. Anschließend können Sie Ihren Container ausblenden oder einklappen.

Nach einer Aktualisierung aktualisiert das SDK eine BannerUIView oder BannerView nur dann, wenn sich die zwischengespeicherten Inhalte dieser Platzierung ändern (hinzugefügt, entfernt oder aktualisiert). Unveränderte angezeigte Banner bleiben, wie sie sind. Ein Aufruf von changeUser() aktualisiert alle registrierten Banner-Views.

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

Nach einer Aktualisierung aktualisiert das SDK eine BannerView nur dann, wenn sich die zwischengespeicherten Inhalte dieser Platzierung ändern (hinzugefügt, entfernt oder aktualisiert). Unveränderte angezeigte Banner bleiben, wie sie sind. Ein Aufruf von changeUser() aktualisiert weiterhin alle registrierten BannerView-Instanzen.

• java
• kotlin

Um das Banner in Java-Code abzurufen, verwenden Sie:

1

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

Sie können Banner in Ihrem Android-View-Layout erstellen, indem Sie dieses XML einbinden:

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

Wenn Sie Android Views verwenden, nutzen Sie dieses 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" />

Um Jetpack Compose zu verwenden, fügen Sie das Artefakt com.braze:android-sdk-jetpack-compose zu Ihrem App-Modul hinzu. Verwenden Sie dieselbe Version wie für Ihre anderen Braze Android SDK-Abhängigkeiten. Dieses Modul ist von android-sdk-ui getrennt und stellt das Composable Banner unter com.braze.jetpackcompose.banners bereit.

Hinweis

Einige Compose-UI-Bibliotheken definieren ein eigenes Banner-Composable. Importieren Sie com.braze.jetpackcompose.banners.Banner explizit, damit Sie die API von Braze aufrufen.

1
2
3
4
5
6

import com.braze.jetpackcompose.banners.Banner

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

Optional können Sie heightCallback übergeben, um die gerenderte Höhe in dp zu erhalten, wenn sich die Bannergröße ändert. Weitere Informationen finden Sie in der KDoc für Banner.

Wenn Sie das Jetpack-Compose-Modul nicht hinzufügen, verpacken Sie BannerView in 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" }
    )
}

Um das Banner in Kotlin abzurufen, verwenden Sie:

1

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

Wenn Sie die New Architecture von React Native verwenden, müssen Sie BrazeBannerView in Ihrer AppDelegate.mm als Fabric-Komponente registrieren.

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

Für die einfachste Integration fügen Sie das folgende JavaScript-XML-Snippet (JSX) in Ihre View-Hierarchie ein und geben nur die Platzierungs-ID an.

1
2
3

<Braze.BrazeBannerView
  placementId='global_banner'
/>

Um das Datenmodell des Banners in React Native abzurufen oder zu prüfen, ob diese Platzierung im Cache Ihrer Nutzer:innen vorhanden ist, verwenden Sie:

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.

Für die einfachste Integration fügen Sie das folgende Widget in Ihre View-Hierarchie ein und geben nur die Platzierungs-ID an.

1
2
3
4

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

Mit der Methode getBanner können Sie prüfen, ob diese Platzierung im Cache Ihrer Nutzer:innen vorhanden ist.

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.

Schritt 5: Test-Banner senden (optional)

Bevor Sie eine Banner-Campaign starten, können Sie ein Test-Banner senden, um Ihre Integration zu überprüfen. Test-Banner werden in einem separaten In-Memory-Cache gespeichert und bleiben nach einem Neustart der App nicht erhalten. Es ist zwar keine zusätzliche Einrichtung erforderlich, Ihr Testgerät muss jedoch Push-Benachrichtigungen im Vordergrund empfangen können, damit es den Test anzeigen kann.

Hinweis

Test-Banner verhalten sich wie alle anderen Banner, werden jedoch bei der nächsten App-Sitzung entfernt.

Impressionen protokollieren

Braze protokolliert automatisch Impressionen für Banner, die sichtbar sind, wenn Sie SDK-Methoden zum Einfügen eines Banners verwenden—Sie müssen Impressionen also nicht manuell tracken.

Klicks protokollieren

Wie Sie Klicks auf Banner protokollieren, hängt davon ab, wie Ihr Banner gerendert wird und wo sich Ihr Klick-Handler befindet.

Standard-Banner-Inhalte (automatisch)

Wenn Sie Banner mit den integrierten Standardmethoden des SDK einfügen und Ihr Banner Standard-Editor-Komponenten (Bilder, Buttons, Text) verwendet, werden Klicks automatisch getrackt. Das SDK hängt Klick-Listener an diese Elemente an, sodass kein zusätzlicher Code erforderlich ist.

Angepasste Code-Blöcke

Wenn Ihr Banner den Editor-Block Angepasster Code im Braze-Dashboard verwendet, müssen Sie brazeBridge.logClick() verwenden, um Klicks innerhalb dieses angepassten HTML zu protokollieren. Das gilt auch dann, wenn Sie das Banner mit SDK-Methoden rendern, da das SDK keine Listener automatisch an Elemente innerhalb Ihres angepassten Codes anhängen kann.

1
2
3

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

Die vollständige Referenz finden Sie unter Angepasster Code und JavaScript-Bridge für Banner. Die brazeBridge stellt eine Kommunikationsschicht zwischen dem internen HTML des Banners und dem übergeordneten Braze SDK bereit.

Angepasste UI-Implementierungen (headless)

Wenn Sie eine vollständig angepasste UI mit den angepassten Eigenschaften des Banners erstellen, anstatt das Banner-HTML zu rendern, müssen Sie Klicks und Impressionen manuell aus Ihrem App-Code protokollieren. Da das SDK das Banner nicht rendert, kann es Interaktionen mit Ihren angepassten UI-Elementen nicht automatisch tracken.

Methodensignaturen und alle Details finden Sie in der Braze SDK-Referenzdokumentation.

Impressionen protokollieren

Rufen Sie die Banner-Impression-Methode der jeweiligen Plattform auf, wenn Ihre angepasste UI das Banner als „angesehen“ betrachtet. Entwickeln Sie eine robuste Logik dafür, was als Impression zählt, um doppelte Events zu vermeiden. Protokollieren Sie beispielsweise nur, wenn das Banner in den Viewport (oder ein Äquivalent) gelangt, und protokollieren Sie nicht erneut, wenn dasselbe Banner wieder in den sichtbaren Bereich gescrollt wird oder Ihre Komponente ohne neues Ansichts-Event erneut gerendert wird.

• 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");

Klicks protokollieren

Rufen Sie die Banner-Klick-Methode der jeweiligen Plattform auf, wenn Nutzer:innen auf Ihr angepasstes Banner (oder einen bestimmten Button) tippen. Übergeben Sie die optionale buttonId, wenn der Klick auf einen bestimmten Button erfolgt, damit Analytics den Klick korrekt zuordnen kann.

• 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

Schließen von Bannern protokollieren

Wenn Nutzer:innen ein Banner aktiv schließen, wird es programmatisch aus einer Platzierung entfernt. Nach dem Schließen wird das Banner für diese Nutzer:innen unterdrückt. Bei der nächsten Aktualisierung der Platzierungsliste wird ein neues Banner zurückgegeben, sofern die Nutzer:innen dafür berechtigt sind.

Voraussetzungen

Dies sind die SDK-Mindestversionen, die zum Protokollieren des Schließens von Bannern erforderlich sind:

Integrationen

Standard-Banner-Integrationen (Drag-and-Drop-Editor)

Wenn Ihr Banner den Drag-and-Drop-Editor verwendet und eine Komponente für einen Schließen-Button enthält, ist kein zusätzlicher Code erforderlich. Wenn Nutzer:innen auf den Schließen-Button klicken, wird die Nachricht ausgeblendet, ein Schließen ausgelöst und anschließend ein Schließen-Event für Analytics aufgezeichnet.

Angepasste Code-Blöcke

Wenn Ihr Banner den Editor-Block Angepasster Code verwendet, können Sie das Schließen direkt im HTML des Banners mit brazeBridge.closeMessage() auslösen.

1
2
3

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

Banner programmatisch schließen

Wenn Sie die Standard-BrazeBannerView mit dem im Drag-and-Drop-Editor erstellten Schließen-Button verwenden, ist kein zusätzlicher Code erforderlich; das Schließen wird automatisch verarbeitet.

Bei angepassten UI-Integrationen können Sie die Methode zum Schließen direkt auf Ihrer Braze-Instanz aufrufen, um ein Banner programmatisch zu schließen und ein Schließen-Event zu protokollieren. Die Methode kann problemlos mehrfach aufgerufen werden – das SDK ignoriert doppelte Aufrufe für dasselbe Banner.

Dies sind die SDK-Mindestversionen, die zum programmatischen Schließen eines Banners erforderlich sind:

• 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");

Angepasste Analytics beim Schließen eines Banners protokollieren

Um beim Schließen eines Banners angepasste Logik auszuführen – etwa zum Protokollieren von Analytics –, verwenden Sie den Dismiss-Callback Ihres SDK. Der Callback erhält ein Event-Objekt mit placementId, stableKey und trackingId des Banners.

• web
• android
• swift
• react native
• flutter

Verwenden Sie Banner.subscribeToDismissedEvent(), um angepasste Logik auszuführen, wenn ein bestimmtes Banner geschlossen wird. Abonnieren Sie das Event, bevor Sie das Banner anzeigen.

Hinweis

Banner.subscribeToDismissedEvent() erfordert Web SDK 6.9.0 oder höher. Verwenden Sie bei früheren Versionen braze.subscribeToBannersUpdates() und erkennen Sie das Schließen, indem Sie prüfen, ob das Banner in der aktualisierten Banner-Map nicht mehr vorhanden ist. Ab Web SDK 7.0.0 können Sie außerdem auf das DISMISS-Event von braze.subscribeToBannersEvents() hören.

• 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"]);

Verwenden Sie subscribeToBannersEvents ab Web SDK 7.0.0. subscribeToBannersUpdates ist das frühere Muster und seit 7.0.0 veraltet.

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);
  };
}, []);

Verwenden Sie subscribeToBannersEvents ab Web SDK 7.0.0. subscribeToBannersUpdates ist das frühere Muster und seit 7.0.0 veraltet.

Legen Sie die optionale Eigenschaft onDismissCallback auf BannerView fest.

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

Legen Sie die Prop onDismiss auf Braze.BrazeBannerView fest, um beim Schließen eines Banners angepasste Logik auszuführen.

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

Legen Sie den Parameter onDismiss auf BrazeBannerView fest, um beim Schließen eines Banners angepasste Logik auszuführen.

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

Speicherlimit für ausstehende Schließen-Events

Schließen-Events werden lokal als ausstehende Einträge gespeichert, bis sie beim nächsten requestBannersRefresh-Aufruf mit dem Braze-Server synchronisiert werden können.

Warnung

In seltenen Fällen, in denen sich eine große Anzahl von Schließen-Events ohne erfolgreiche Synchronisierung ansammelt, können ältere ausstehende Einträge verworfen werden. In diesem Fall können bereits geschlossene Banner erneut erscheinen, bis die nächste erfolgreiche Synchronisierung abgeschlossen ist. Um dieses Risiko zu minimieren, rufen Sie requestBannersRefresh auf, sobald Ihre App wieder eine Netzwerkverbindung hat.

Abmessungen und Größe

Folgendes sollten Sie über die Abmessungen und die Größe von Bannern wissen:

• Im Editor können Sie zwar eine Vorschau von Bannern in verschiedenen Abmessungen anzeigen, diese Informationen werden jedoch weder gespeichert noch an das SDK gesendet.
• Das HTML nimmt die volle Breite des Containers ein, in dem es gerendert wird.
• Wir empfehlen, ein Element mit festen Abmessungen zu erstellen und diese Abmessungen im Editor zu testen.

Benutzerdefinierte Eigenschaften

Sie können benutzerdefinierte Eigenschaften aus Ihrer Banner-Campaign verwenden, um Schlüssel-Wert-Daten über das SDK abzurufen und das Verhalten oder das Erscheinungsbild Ihrer App anzupassen. Beispielsweise könnten Sie:

• Senden Sie Metadaten für Ihre Drittanbieter-Analytics oder Integrationen.
• Verwenden Sie Metadaten wie einen timestamp oder ein JSON-Objekt, um bedingte Logik zu triggern.
• Steuern Sie das Verhalten eines Banners basierend auf enthaltenen Metadaten wie ratio oder format.

Voraussetzungen

Sie müssen Ihrer Banner-Campaign benutzerdefinierte Eigenschaften hinzufügen. Darüber hinaus sind dies die erforderlichen Mindestversionen des SDK, um auf benutzerdefinierte Eigenschaften zugreifen zu können:

Auf benutzerdefinierte Eigenschaften zugreifen

Um auf die benutzerdefinierten Eigenschaften eines Banners zuzugreifen, verwenden Sie eine der folgenden Methoden basierend auf dem im Dashboard definierten Typ der Eigenschaft. Wenn der Schlüssel nicht mit einer Eigenschaft dieses Typs übereinstimmt oder nicht existiert, gibt die Methode null zurück.

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