Skip to content

Bannerplatzierungen verwalten

Erfahren Sie, wie Sie Bannerplatzierungen 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 Sitzung 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 Sitzung 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 erforderlichen Mindestversionen des SDK, um Bannerplatzierungen zu erstellen:

Schritt 1: Plazierungen in Braze erstellen

Falls Sie dies noch nicht getan haben, müssen Sie in Braze Bannerplatzierungen 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 > Bannerplatzierungen und wählen Sie dann Platzierung erstellen.

Abschnitt Bannerplatzierungen, um IDs für Platzierungen zu erstellen.

Geben Sie Ihrer Platzierung einen Namen und vergeben Sie eine Platzierungs-ID. Konsultieren Sie unbedingt andere Teams, 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.

Platzierungsdetails, die ein Banner bezeichnen, werden in der linken Seitenleiste für Kampagnen zum Frühjahrsverkauf angezeigt.

2. Schritt: Platzierungen in Ihrer App aktualisieren

Platzierungen können durch Aufruf der unten beschriebenen Aktualisierungsmethoden aktualisiert werden. Wenn subscribeToBannersUpdates aktiv ist, veröffentlicht das SDK Ihre zwischengespeicherten Platzierungs-IDs automatisch zu Beginn jeder neuen Sitzung und wenn Sie changeUser aufrufen. Diese automatische Aktualisierung verbraucht kein Rate-Limiting-Token.

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.

3. Schritt: Auf Updates achten

Wenn Sie Vanilla JavaScript mit dem Web-Braze-SDK verwenden, nutzen Sie subscribeToBannersUpdates, um auf Platzierungs-Updates zu warten, und rufen Sie anschließend requestBannersRefresh auf, um diese abzurufen.

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

Wenn Sie React mit dem Web-Braze-SDK verwenden, richten Sie subscribeToBannersUpdates innerhalb eines useEffect-Hooks ein und rufen Sie requestBannersRefresh nach der Registrierung Ihres Listeners auf.

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
6
7
8

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.requestRefresh(placementIds: placementIds)

1
2
3
4
5
6
7
8
9
10

ArrayList<String> placementIds = new ArrayList<>();
placementIds.add("global_banner");
placementIds.add("navigation_square_banner");
Braze.getInstance(context).subscribeToBannersUpdates(banners -> {
  for (Banner banner : banners.getBanners()) {
    Log.d(TAG, "Received banner: " + banner.getPlacementId());
  }
});
// Always refresh after your subscriber is registered
Braze.getInstance(context).requestBannersRefresh(placementIds);

1
2
3
4
5
6
7
8

val placementIds = listOf("global_banner", "navigation_square_banner")
Braze.getInstance(context).subscribeToBannersUpdates { update ->
  for (banner in update.banners) {
    Log.d(TAG, "Received banner: " + banner.placementId)
  }
}
// Always refresh after your subscriber is registered
Braze.getInstance(context).requestBannersRefresh(placementIds)

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.

4. Schritt: Einfügen unter Verwendung der Platzierungs-ID

Erstellen Sie ein Containerelement für das Banner. Stellen Sie sicher, dass Sie die Breite und Höhe festlegen.

1

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

Wenn Sie Vanilla JavaScript mit dem Web-Braze-SDK verwenden, rufen Sie die insertBanner-Methode auf, um den inneren HTML-Code des Containerelements 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

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

Wenn Sie React mit dem Web-Braze-SDK verwenden, rufen Sie die insertBanner-Methode mit einem ref auf, um den inneren HTML-Code des Containerelements 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>
}

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

Um das Banner im Java-Code abzurufen, verwenden Sie Folgendes:

1

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

Sie können Banner im Layout Ihrer Android-Ansichten erstellen, indem Sie dieses XML einfügen:

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 Ihre anderen Braze Android SDK-Abhängigkeiten. Dieses Modul ist von android-sdk-ui getrennt und liefert das Banner-Composable unter com.braze.jetpackcompose.banners.

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, umschließen 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 Folgendes:

1

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

Wenn Sie die neue Architektur von React Native verwenden, müssen Sie BrazeBannerView als Fabric-Komponente in Ihrem AppDelegate.mm 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 Ansichtshierarchie 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 um zu prüfen, ob diese Platzierung im Cache der Nutzer:in 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 Ansichtshierarchie 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 getBanner-Methode können Sie prüfen, ob diese Platzierung im Cache der Nutzer:in 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.

5. Schritt: Testbanner senden (optional)

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

Impressionen protokollieren

Braze protokolliert automatisch Impressionen für Banner, die sichtbar sind, wenn Sie SDK-Methoden zum Einfügen eines Banners verwenden—eine manuelle Erfassung von Impressionen ist daher nicht erforderlich.

Klicks protokollieren

Die Methode zur Protokollierung von Banner-Klicks hängt davon ab, wie Ihr Banner gerendert wird und wo sich Ihr Klick-Handler befindet.

Standard-Bannerinhalt (automatisch)

Wenn Sie die standardmäßigen, sofort einsatzbereiten SDK-Methoden zum Einfügen von Bannern verwenden und Ihr Banner Standard-Editor-Komponenten (Bilder, Buttons, Text) enthält, werden Klicks automatisch erfasst. Das SDK fügt diesen Elementen Klick-Listener hinzu, und es ist kein zusätzlicher Code erforderlich.

Benutzerdefinierte Codeblöcke

Wenn Ihr Banner den Custom Code-Editor-Block im Braze-Dashboard verwendet, müssen Sie brazeBridge.logClick() verwenden, um Klicks aus diesem benutzerdefinierten HTML zu protokollieren. Dies gilt auch bei der Verwendung von SDK-Methoden zum Rendern des Banners, da das SDK nicht automatisch Listener 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 Benutzerdefinierter Code und JavaScript-Brücke für Banner. 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 unter Verwendung der angepassten Eigenschaften des Banners erstellen, anstatt den Banner-HTML-Code zu rendern, müssen Sie Klicks und Impressionen manuell aus Ihrem Anwendungscode protokollieren. Da das SDK das Banner nicht rendert, kann es Interaktionen mit Ihren angepassten UI-Elementen nicht automatisch verfolgen.

Vollständige Methodensignaturen und Details finden Sie in der Braze SDK-Referenzdokumentation.

Impressionen protokollieren

Rufen Sie die plattformspezifische Methode für Banner-Impressionen auf, wenn Ihre angepasste UI das Banner als „gesehen“ betrachtet. Implementieren Sie eine robuste Logik dafür, was als Impression zählt, um doppelte Ereignisse zu vermeiden – protokollieren Sie beispielsweise nur, wenn das Banner in den sichtbaren Bereich eintritt (oder gleichwertig), und protokollieren Sie nicht erneut, wenn dasselbe Banner zurück in den sichtbaren Bereich gescrollt wird oder wenn Ihre Komponente ohne ein neues Ansichtsereignis neu gerendert wird.

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

Web-SDK-Referenz

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

Android-SDK-Referenz

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

Swift-SDK-Referenz

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

Die neuesten Methodensignaturen finden Sie im React Native SDK-Repository.

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

Flutter-SDK-Referenz

Klicks protokollieren

Rufen Sie die plattformspezifische Methode für Banner-Klicks 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.

1
2
3
4

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

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

Web-SDK-Referenz

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

Android-SDK-Referenz

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
}

Swift-SDK-Referenz

1
2

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

Die neuesten Methodensignaturen finden Sie im React Native SDK-Repository.

1
2

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

Flutter-SDK-Referenz

Schließungen protokollieren

Banner-Schließungen entfernen ein Banner programmatisch aus einer Platzierung, wenn Nutzer:innen es aktiv schließen. Nach dem Schließen wird das Banner für diese Nutzer:in unterdrückt. Beim nächsten Aktualisieren der Platzierungsliste wird ein neues Banner zurückgegeben, sofern die Nutzer:in dafür qualifiziert ist.

Voraussetzungen

Dies sind die erforderlichen Mindestversionen des SDK, um Banner-Schließungen zu protokollieren:

Integrationen

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

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

Benutzerdefinierte Codeblöcke

Wenn Ihr Banner den Custom Code-Editor-Block verwendet, können Sie eine Schließung direkt aus dem HTML des Banners heraus mit brazeBridge.closeMessage() auslösen.

1
2
3

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

Benutzerdefinierte Analytics bei Banner-Schließung protokollieren

Um zusätzliche Logik wie das Protokollieren benutzerdefinierter Analytics beim Schließen eines Banners auszuführen, überschreiben Sie den optionalen onDismiss-Callback in Ihrer Banner-Ansicht. Standardmäßig ist dieser Callback leer.

Das Web-SDK verfügt nicht über einen dedizierten onDismiss-Callback für insertBanner. Verwenden Sie stattdessen subscribeToBannersUpdates, um zu erkennen, wann ein Banner geschlossen wurde, indem Sie prüfen, ob es nicht mehr in der aktualisierten Banner-Map vorhanden ist.

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

Setzen Sie die optionale onDismissCallback-Eigenschaft auf BannerView.

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
}

Speicherlimit für ausstehende Schließungen

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

Abmessungen und Größenangaben

Hier erfahren Sie, was Sie über die Abmessungen und die Größe von Bannern wissen müssen:

  • Der Composer erlaubt Ihnen zwar die Vorschau von Bannern in verschiedenen Abmessungen, aber diese Informationen werden nicht gespeichert oder an das SDK gesendet.
  • Der HTML-Code nimmt die gesamte Breite des Containers ein, in dem er gerendert wird.
  • Wir empfehlen, ein Element mit festen Abmessungen zu erstellen und diese Abmessungen im Composer 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:

  • Metadaten für Ihre Analytics oder Drittanbieter-Integrationen senden.
  • Metadaten wie einen timestamp oder ein JSON-Objekt verwenden, um bedingte Logik zu triggern.
  • Das Verhalten eines Banners basierend auf enthaltenen Metadaten wie ratio oder format steuern.

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.

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
});
New Stuff!