Skip to content

Migrer des cartes de contenu vers les bannières

Ce guide vous aide à migrer des cartes de contenu vers les bannières pour les cas d’utilisation d’envoi de messages de type bannière. Les bannières sont idéales pour les messages in-app et web persistants, en ligne, qui apparaissent à des endroits spécifiques de votre application.

Pourquoi migrer vers les bannières ?

  • Si votre équipe d’ingénieurs crée ou maintient des cartes de contenu de type bannière personnalisées, la migration vers les bannières peut réduire cet investissement. Les bannières permettent aux marketeurs de contrôler directement l’interface utilisateur, libérant ainsi les développeurs pour d’autres tâches.
  • Si vous lancez de nouveaux messages sur la page d’accueil, des flux d’onboarding ou des annonces persistantes, commencez par des bannières plutôt que de créer des cartes de contenu. Vous pouvez bénéficier d’une personnalisation en temps réel, d’une absence d’expiration de 30 jours, d’une absence de limite de taille et d’une priorisation native dès le premier jour.
  • Si vous devez contourner la limite d’expiration de 30 jours, gérer une logique de rééligibilité complexe ou être frustré par une personnalisation périmée, Banners résout ces problèmes de manière native.

Les bannières offrent plusieurs avantages par rapport aux cartes de contenu de type bannière pour l’envoi de messages :

Accélération de la production

  • Réduction de l’assistance technique permanente requise: Les marketeurs peuvent créer des messages personnalisés à l’aide d’un éditeur par glisser-déposer et d’un code HTML personnalisé sans avoir besoin de l’aide d’un développeur pour la personnalisation.
  • Options de personnalisation souples: Concevez directement dans l’éditeur, utilisez HTML ou exploitez les modèles de données existants avec des propriétés personnalisées.

Meilleure interface utilisateur

  • Mise à jour dynamique du contenu: Les bannières s’actualisent Liquid logic and eligibility à chaque actualisation, ce qui permet aux utilisateurs de toujours voir le contenu le plus pertinent.
  • Aide au placement des autochtones: Les messages apparaissent dans des contextes spécifiques plutôt que dans un flux, offrant ainsi une meilleure pertinence contextuelle.
  • Priorité aux autochtones: Contrôle de l’ordre d’affichage sans logique personnalisée, ce qui facilite la gestion de la hiérarchie des messages.

Persistance

  • Pas de limite d’expiration : Les campagnes de bannières n’ont pas de limite d’expiration de 30 jours comme les cartes de type bannière, ce qui permet une véritable persistance des messages.

Quand migrer ?

Envisagez de migrer vers les bannières si vous utilisez les cartes de contenu de type bannière pour :

  • Héros de la page d’accueil, promotions sur les pages de produits, offres à la caisse
  • Annonces de navigation persistantes ou messages dans la barre latérale
  • Messages toujours actifs pendant plus de 30 jours
  • Messages où vous souhaitez une personnalisation et une éligibilité en temps réel.

Quand conserver les cartes de contenu ?

Continuez à utiliser les cartes de contenu si nécessaire :

  • Expériences en matière d’alimentation : Tout cas d’utilisation impliquant plusieurs messages défilants ou une boîte de réception basée sur des cartes.
  • Fonctionnalités spécifiques : Les messages qui nécessitent un contenu connecté ou des codes promotionnels, car les bannières ne les prennent pas en charge de manière native.
  • Réception/distribution déclenchée : Cas d’utilisation nécessitant strictement une réception/distribution déclenchée par l’API ou par événement. Bien que les bannières ne prennent pas en charge la réception/distribution déclenchée par l’API ou basée sur l’action, l’évaluation de l’éligibilité en temps réel signifie que les utilisateurs sont instantanément qualifiés ou disqualifiés en fonction de l’appartenance à un segment à chaque actualisation.

Guide de migration

Conditions préalables

Avant de procéder à la migration, assurez-vous que votre SDK Braze répond aux exigences minimales en matière de version :

S’abonner aux mises à jour

L’approche des cartes de contenu

1
2
3
4
5
6
7
8

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

braze.subscribeToContentCardsUpdates((cards) => {
  // Handle array of cards
  cards.forEach(card => {
    console.log("Card:", card.id);
  });
});

1
2
3
4
5
6

Braze.getInstance(context).subscribeToContentCardsUpdates { cards ->
  // Handle array of cards
  cards.forEach { card ->
    Log.d(TAG, "Card: ${card.id}")
  }
}

1
2
3
4
5
6

braze.contentCards.subscribeToUpdates { cards in
  // Handle array of cards
  for card in cards {
    print("Card: \(card.id)")
  }
}

1
2
3
4
5
6
7

Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, (update) => {
  const cards = update.cards;
  // Handle array of cards
  cards.forEach(card => {
    console.log("Card:", card.id);
  });
});

1
2
3
4
5
6

StreamSubscription contentCardsStreamSubscription = braze.subscribeToContentCards((List<BrazeContentCard> contentCards) {
  // Handle array of cards
  for (final card in contentCards) {
    print("Card: ${card.id}");
  }
});

Approche par bannières

1
2
3
4
5
6
7
8
9

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

braze.subscribeToBannersUpdates((banners) => {
  // Get banner for specific placement
  const globalBanner = braze.getBanner("global_banner");
  if (globalBanner) {
    console.log("Banner received for placement:", globalBanner.placementId);
  }
});

1
2
3
4
5
6
7

Braze.getInstance(context).subscribeToBannersUpdates { update ->
  // Get banner for specific placement
  val globalBanner = Braze.getInstance(context).getBanner("global_banner")
  if (globalBanner != null) {
    Log.d(TAG, "Banner received for placement: ${globalBanner.placementId}")
  }
}

1
2
3
4
5
6
7
8

braze.banners.subscribeToUpdates { banners in
  // Get banner for specific placement
  braze.banners.getBanner(for: "global_banner") { banner in
    if let banner = banner {
      print("Banner received for placement: \(banner.placementId)")
    }
  }
}

1
2
3
4
5
6
7
8
9

Braze.addListener(Braze.Events.BANNER_CARDS_UPDATED, (data) => {
  const banners = data.banners;
  // Get banner for specific placement
  Braze.getBanner("global_banner").then(banner => {
    if (banner) {
      console.log("Banner received for placement:", banner.placementId);
    }
  });
});

1
2
3
4
5
6
7
8

StreamSubscription bannerStreamSubscription = braze.subscribeToBanners((List<BrazeBanner> banners) {
  // Get banner for specific placement
  braze.getBanner("global_banner").then((banner) {
    if (banner != null) {
      print("Banner received for placement: ${banner.placementId}");
    }
  });
});

Afficher le contenu

L’approche des cartes de contenu

1
2
3
4
5
6
7
8
9
10
11

// Show default feed UI
braze.showContentCards(document.getElementById("feed"));

// Or manually render cards
const cards = braze.getCachedContentCards();
cards.forEach(card => {
  // Custom rendering logic
  if (card instanceof braze.ClassicCard) {
    // Render classic card
  }
});

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

// Using default fragment
val fragment = ContentCardsFragment()
supportFragmentManager.beginTransaction()
  .replace(R.id.content_cards_container, fragment)
  .commit()

// Or manually render cards
val cards = Braze.getInstance(context).getCachedContentCards()
cards.forEach { card ->
  when (card) {
    is ClassicCard -> {
      // Render classic card
    }
  }
}

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

// Using default view controller
let contentCardsController = BrazeContentCardUI.ViewController(braze: braze)
navigationController?.pushViewController(contentCardsController, animated: true)

// Or manually render cards
let cards = braze.contentCards.cards
for card in cards {
  switch card {
  case let card as Braze.ContentCard.Classic:
    // Render classic card
  default:
    break
  }
}

1
2
3
4
5
6
7
8
9
10

// Launch default feed
Braze.launchContentCards();

// Or manually render cards
const cards = await Braze.getContentCards();
cards.forEach(card => {
  if (card.type === 'CLASSIC') {
    // Render classic card
  }
});

1
2
3
4
5
6
7
8
9
10

// Launch default feed
braze.launchContentCards();

// Or manually render cards
final cards = await braze.getContentCards();
for (final card in cards) {
  if (card.type == 'CLASSIC') {
    // Render classic card
  }
}

Approche par bannières

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

braze.subscribeToBannersUpdates((banners) => {
  const globalBanner = braze.getBanner("global_banner");
  if (!globalBanner) {
    return;
  }

  const container = document.getElementById("global-banner-container");
  braze.insertBanner(globalBanner, container);

  if (globalBanner.isControl) {
    container.style.display = "none";
  }
});

braze.requestBannersRefresh(["global_banner"]);

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

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

// Or programmatically
val bannerView = BannerView(context).apply {
  placementId = "global_banner"
}
container.addView(bannerView)

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

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

// Using BannerUIView
let bannerView = BrazeBannerUI.BannerUIView(
  placementId: "global_banner",
  braze: braze,
  processContentUpdates: { result in
    switch result {
    case .success(let updates):
      if let height = updates.height {
        // Update height constraint
      }
    case .failure:
      break
    }
  }
)
view.addSubview(bannerView)

braze.banners.requestBannersRefresh(placementIds: ["global_banner"])

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

// Using BrazeBannerView component
<Braze.BrazeBannerView
  placementID='global_banner'
/>

// Or get banner data
const banner = await Braze.getBanner("global_banner");
if (banner) {
  // Render custom banner UI
}

Braze.requestBannersRefresh(["global_banner"]);

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

// Using BrazeBannerView widget
BrazeBannerView(
  placementId: "global_banner",
)

// Or get banner data
final banner = await braze.getBanner("global_banner");
if (banner != null) {
  // Render custom banner UI
}

braze.requestBannersRefresh(["global_banner"]);

Analyse/analytique des logs (implémentations personnalisées)

L’approche des cartes de contenu

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
cards.forEach(card => {
    braze.logContentCardImpressions([card]);
});

// Manual click logging required for custom implementations
card.logClick();

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
cards.forEach { card ->
    card.logImpression()
}

// Manual click logging required for custom implementations
card.logClick()

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
for card in cards {
    card.context?.logImpression()
}

// Manual click logging required for custom implementations
card.context?.logClick()

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
cards.forEach(card => {
    Braze.logContentCardImpression(card.id);
});

// Manual click logging required for custom implementations
Braze.logContentCardClicked(card.id);

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
for (final card in cards) {
    braze.logContentCardImpression(card);
}

// Manual click logging required for custom implementations
braze.logContentCardClicked(card);

Approche par bannières

1
2
3
4
5
6
7
8
9

// Analytics are automatically tracked when using insertBanner()
// Manual logging should not be used when using insertBanner()

// For custom implementations, use manual logging methods:
// Log impression
braze.logBannerImpressions([globalBanner]);

// Log click (with optional buttonId)
braze.logBannerClick("global_banner", buttonId);

1
2
3
4
5
6
7
8
9

// Analytics are automatically tracked when using BannerView
// Manual logging should not be used for default BannerView

// For custom implementations, use manual logging methods:
// Log impression
Braze.getInstance(context).logBannerImpression("global_banner");

// Log click (with optional buttonId)
Braze.getInstance(context).logBannerClick("global_banner", buttonId);

1
2
3
4
5
6
7
8
9
10
11

// Analytics are automatically tracked when using BannerUIView
// Manual logging should not be used for default BannerUIView

// For custom implementations, use manual logging methods:
// Log impression
braze.banners.logImpression(placementId: "global_banner")

// Log click (with optional buttonId)
braze.banners.logClick(placementId: "global_banner", buttonId: buttonId)

// Control groups are automatically handled by BannerUIView

1
2
3
4
5

// Analytics are automatically tracked when using BrazeBannerView
// No manual logging required

// Note: Manual logging methods for Banners are not yet supported in React Native
// Control groups are automatically handled by BrazeBannerView

1
2
3
4
5

// Analytics are automatically tracked when using BrazeBannerView
// No manual logging required

// Note: Manual logging methods for Banners are not yet supported in Flutter
// Control groups are automatically handled by BrazeBannerView

Gestion des groupes de contrôle

L’approche des cartes de contenu

1
2
3
4
5
6
7

cards.forEach(card => {
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
});

1
2
3
4
5
6
7

cards.forEach { card ->
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
}

1
2
3
4
5
6
7

for card in cards {
  if card.isControl {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
}

1
2
3
4
5
6
7

cards.forEach(card => {
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
});

1
2
3
4
5
6
7

for (final card in cards) {
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
}

Approche par bannières

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

braze.subscribeToBannersUpdates((banners) => {
  const globalBanner = braze.getBanner("global_banner");
  if (!globalBanner) {
    return;
  }

  const container = document.getElementById("global-banner-container");
  
  // Always call insertBanner to track impression (including control)
  braze.insertBanner(globalBanner, container);
  
  // Hide if control group
  if (globalBanner.isControl) {
    container.style.display = "none";
  }
});

1
2
3
4
5

// BannerView automatically handles control groups
// No additional code needed
val bannerView = BannerView(context).apply {
  placementId = "global_banner"
}

1
2
3
4
5
6

// BannerUIView automatically handles control groups
// No additional code needed
let bannerView = BrazeBannerUI.BannerUIView(
  placementId: "global_banner",
  braze: braze
)

1
2
3
4
5

// BrazeBannerView automatically handles control groups
// No additional code needed
<Braze.BrazeBannerView
  placementID='global_banner'
/>

1
2
3
4
5

// BrazeBannerView automatically handles control groups
// No additional code needed
BrazeBannerView(
  placementId: "global_banner",
)

Restrictions

Lors de la migration des cartes de contenu vers les bannières, tenez compte des limitations suivantes :

Migration des messages déclenchés

Les bannières ne prennent en charge que les campagnes de réception/distribution planifiées. Pour faire migrer un message qui était auparavant déclenché par l’API ou basé sur des actions, convertissez-le en un ciblage basé sur des segments :

  • Exemple : Au lieu de déclencher une carte “Compléter le profil” avec l’API, créez une segmentation pour les utilisateurs qui se sont inscrits au cours des 7 derniers jours mais qui n’ont pas complété leur profil.
  • Éligibilité en temps réel : Les utilisateurs sont qualifiés ou disqualifiés pour la bannière instantanément à chaque actualisation en fonction de leur appartenance à un segment.

Différences de fonctionnalité

Limites du produit

  • Jusqu’à 25 messages actifs par placement.
  • Jusqu’à 10 ID de placement par demande d’actualisation ; les demandes au-delà sont tronquées.

Limitations du SDK

  • Les bannières ne sont actuellement pas prises en charge sur les plateformes .NET MAUI (Xamarin), Cordova, Unity, Vega ou TV.
  • Assurez-vous que vous utilisez les versions minimales du SDK indiquées dans les conditions préalables.

Articles connexes
Github   Modifier cette page sur GitHub
New Stuff!