Skip to content

Cartes de contenu

Découvrez les cartes de contenu pour le SDK de Braze, notamment les différents modèles de données et les propriétés spécifiques aux cartes disponibles pour votre application.

Prerequisites

Before you can use Braze Content Cards, you’ll need to integrate the Braze Android SDK into your app. However, no additional setup is required.

Google fragments

In Android, the Content Cards feed is implemented as a fragment available in the Braze Android UI project. The ContentCardsFragment class will automatically refresh and display the contents of the Content Cards and log usage analytics. The cards that can appear in a user’s ContentCards are created on the Braze dashboard.

To learn how to add a fragment to an activity, see Google’s fragments documentation.

Card types and properties

The Content Cards data model is available in the Android SDK and offers the following unique Content Card types. Each type shares a base model, which allows them to inherit common properties from the base model, in addition to having their own unique properties. For full reference documentation, see com.braze.models.cards.

Base card model

The base card model provides foundational behavior for all cards.

Image only

Image only cards are clickable full-sized images.

Captioned image

Captioned image cards are clickable, full-sized images with accompanying descriptive text.

Classic

A classic card without an image included will result in a text announcement card. If an image is included, you will receive a short news card.

Card methods

All Card data model objects offer the following analytics methods for logging user events to Braze servers.

Prerequisites

Before you can use Content Cards, you’ll need to integrate the Braze Swift SDK into your app. However, no additional setup is required.

View controller contexts

The default Content Cards UI can be integrated from the BrazeUI library of the Braze SDK. Create the Content Cards view controller using the braze instance. If you wish to intercept and react to the Content Card UI lifecycle, implement BrazeContentCardUIViewControllerDelegate as the delegate for your BrazeContentCardUI.ViewController.

The BrazeUI library of the Swift SDK provides two default view controller contexts: navigation or modal. This means you can integrate Content Cards in these contexts by adding a few lines of code to your app or site. Both views offer customization and styling options as described in the customization guide. You can also create a custom Content Card view controller instead of using the standard Braze one for even more customization options—refer to the Content Cards UI tutorial for an example.

Navigation

A navigation controller is a view controller that manages one or more child view controllers in a navigation interface. Here is an example of pushing a BrazeContentCardUI.ViewController instance into a navigation controller:

1
2
3
4
5
6
7
func pushViewController() {
  guard let braze = AppDelegate.braze else { return }
  let contentCardsController = BrazeContentCardUI.ViewController(braze: braze)
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  contentCardsController.delegate = self
  self.navigationController?.pushViewController(contentCardsController, animated: true)
}
1
2
3
4
5
6
- (void)pushViewController {
  BRZContentCardUIViewController *contentCardsController = [[BRZContentCardUIViewController alloc] initWithBraze:self.braze];
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  [contentCardsController setDelegate:self];
  [self.navigationController pushViewController:contentCardsController animated:YES];
}

Modal

Use modal presentations to create temporary interruptions in your app’s workflow, such as prompting the user for important information. This model view has a navigation bar on top and a Done button on the side of the bar. Here is an example of pushing a BrazeContentCard.ViewController instance into a modal controller:

1
2
3
4
5
6
7
func presentModalViewController() {
  guard let braze = AppDelegate.braze else { return }
  let contentCardsModal = BrazeContentCardUI.ModalViewController(braze: braze)
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  contentCardsModal.viewController.delegate = self
  self.navigationController?.present(contentCardsModal, animated: true, completion: nil)
}
1
2
3
4
5
6
- (void)presentModalViewController {
  BRZContentCardUIModalViewController *contentCardsModal = [[BRZContentCardUIModalViewController alloc] initWithBraze:AppDelegate.braze];
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  [contentCardsModal.viewController setDelegate:self];
  [self.navigationController presentViewController:contentCardsModal animated:YES completion:nil];
}

For example usage of BrazeUI view controllers, check out the corresponding Content Cards UI samples in our Examples app.

Base card model

The Content Cards data model is available in the BrazeKit module of the Braze Swift SDK. This module contains the following Content Card types, which are an implementation of the Braze.ContentCard type. For a full list of Content Card properties and their usage, see ContentCard class.

  • Image only
  • Captioned image
  • Classic
  • Classic image
  • Control

To access the Content Cards data model, call contentCards.cards on your braze instance. See Logging analytics for more information on subscribing to card data.

Card methods

Each card is initialized with a Context object, which contains various methods for managing your card’s state. Call these methods when you want to modify the corresponding state property on a particular card object.

For more details, refer to the Context class documentation

Prerequisites

Before you can use Content Cards, you’ll need to integrate the Braze Web SDK into your app. However, no additional setup is required. To build your own UI instead, see Content Card Customization Guide.

Standard feed UI

To use the included Content Cards UI, you’ll need to specify where to show the feed on your website.

In this example, we have a <div id="feed"></div> in which we want to place the Content Cards feed. We’ll use three buttons to hide, show, or toggle (hide or show based on its current state) the feed.

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
<button id="toggle" type="button">Toggle Cards Feed</button>
<button id="hide" type="button">Hide Cards Feed</button>
<button id="show" type="button">Show Cards Feed</button>

<nav>
    <h1>Your Personalized Feed</h1>
    <div id="feed"></div>
</nav>

<script> 
   const toggle = document.getElementById("toggle");
   const hide = document.getElementById("hide");
   const show = document.getElementById("show");
   const feed = document.getElementById("feed");
    
   toggle.onclick = function(){
      braze.toggleContentCards(feed);    
   }
    
   hide.onclick = function(){
      braze.hideContentCards();
   }
    
   show.onclick = function(){
      braze.showContentCards(feed);    
   }
</script>

When using the toggleContentCards(parentNode, filterFunction) and showContentCards(parentNode, filterFunction) methods, if no arguments are provided, all Content Cards will be shown in a fixed-position sidebar on the right-hand side of the page. Otherwise, the feed will be placed in the specified parentNode option.

See the SDK reference docs for more information on Content Card toggling.

Card types and properties

The Content Cards data model is available in the Web SDK and offers the following Content Card types: ImageOnly, CaptionedImage, and ClassicCard. Each type inherits common properties from a base model Card and has the following additional properties.

Base card model

All Content Cards have these shared properties:

Image only

ImageOnly cards are clickable full-sized images.

Captioned image

CaptionedImage cards are clickable, full-sized images with accompanying descriptive text.

Classic

The ClassicCard model can contain an image with no text or a text with image.

Control group

If you use the default Content Cards feed, impressions and clicks will be automatically tracked.

If you use a custom integration for Content Cards, you need need log impressions when a Control Card would have been seen. As part of this effort, make sure to handle Control cards when logging impressions in an A/B test. These cards are blank, and while they aren’t seen by users, you should still log impressions in order to compare how they perform against non-Control cards.

To determine if a Content Card is in the Control group for an A/B test, check the card.isControl property (Web SDK v4.5.0+) or check if the card is a ControlCard instance (card instanceof braze.ControlCard).

Card methods

For more details, refer to the SDK reference documentation

Using Google Tag Manager

Google Tag Manager works by injecting the Braze CDN (a version of our Web SDK) directly into your website code, which means that all SDK methods are available just as if you had integrated the SDK without Google Tag Manager, except when implementing Content Cards.

Setting up Content Cards

For a standard integration of the Content Card feed, you can use a Custom HTML tag in Google Tag Manager. Add the following to your Custom HTML tag, which will activate the standard Content Card feed:

1
2
3
<script>
   window.braze.showContentCards();
</script>

Tag Configuration in Google Tag Manager of a Custom HTML tag that shows the Content Card feed.

For more freedom over customizing the appearance of Content Cards and their feed, you can directly integrate Content Cards into your native website. There are two approaches you can take with this: using the standard feed UI or creating a custom feed UI.

When implementing the standard feed UI, Braze methods must have window. added to the start of the method. For example, braze.showContentCards should instead be window.braze.showContentCards.

For custom feed styling, the steps are the same as if you had integrated the SDK without GTM. For example, if you want to customize the width of the Content Card feed, you can paste the following into your CSS file:

1
2
3
body .ab-feed { 
    width: 800px;
}

Upgrading templates

To upgrade to the latest version of the Braze Web SDK, take the following three steps in your Google Tag Manager dashboard:

  1. Update tag template
    Go to the Templates page within your workspace. Here you should see an icon indicating an update is available.

    Templates page showing an update is available

    Click that icon and after reviewing the change, click to Accept Update.

    A screen comparing the old and new tag templates with a button to "Accept Update"

  2. Update version number
    Once your tag template has been updated, edit the Braze Initialization Tag, and update the SDK version to the most recent major.minor version. For example, if the latest version is 4.1.2, enter 4.1. You can view a list of SDK versions in our changelog.

    Braze Initialization Template with an input field to change the SDK Version

  3. QA and publish
    Verify the new SDK version is working using Google Tag Manager’s debugging tool prior to publishing an update to your tag container.

Troubleshooting

Enable tag debugging

Each Braze tag template has an optional GTM Tag Debugging checkbox which can be used to log debug messages to your web page’s JavaScript console.

Google Tag Manager's Debug tool

Enter debug mode

Another way to help debug your Google Tag Manager integration is using Google’s Preview mode feature.

This will help identify what values are being sent from your web page’s data layer to each triggered Braze tag and will also explain which tags were or were not triggered.

The Braze Initialization Tag summary page provides an overview of the tag, including information on which tags were triggered.

Enable verbose logging

To allow Braze technical support to access logs while testing, you can enable verbose logging on your Google Tag Manager integration. These logs will appear in the Console tab of your browser’s developer tools.

In your Google Tag Manager integration, navigate to your Braze Initialization Tag and select Enable Web SDK Logging.

The Braze Initialization Tag summary page with the option to Enable Web SDK Logging turned on.

Prerequisites

Before you can use this feature, you’ll need to integrate the Cordova Braze SDK.

Flux de cartes

Le SDK Braze comprend un flux de cartes par défaut. Pour afficher le flux de cartes par défaut, vous pouvez utiliser la méthode launchContentCards(). Cette méthode gère l’ensemble des activités de suivi des analyses, de rejets et de rendu des cartes de contenu d’un utilisateur.

Cartes de contenu

Vous pouvez utiliser ces méthodes supplémentaires pour créer un flux de cartes de contenu personnalisé dans votre application :

À propos des cartes de contenu de Flutter

Le SDK Braze comprend un flux de cartes par défaut pour vous permettre de vous lancer dans les cartes de contenu. Pour afficher le flux de carte, vous pouvez utiliser la méthode braze.launchContentCards(). Le flux de cartes par défaut inclus avec le SDK Braze traitera tous les suivis, les masquages et le rendu des cartes de contenu d’un utilisateur.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK de Flutter Braze.

Méthodes de carte

Vous pouvez utiliser ces méthodes supplémentaires pour créer un flux de cartes de contenu personnalisé dans votre application en utilisant les méthodes suivantes disponibles sur l’interface publique du plugin:

Réception des données de cartes de contenu

Pour recevoir des données de cartes de contenu dans votre application Flutter, le BrazePlugin prend en charge l’envoi de données de cartes de contenu à l’aide de Dart Streams.

L’objet BrazeContentCard prend en charge un sous-ensemble de champs disponibles dans les objets du modèle natif, y compris description, title, image, url, extras et plus encore.

Étape 1 : Écoutez les données de la carte de contenu dans la couche Dart

Pour recevoir les données de cartes de contenu dans la couche Dart, utilisez le code ci-dessous pour créer un StreamSubscription et appeler braze.subscribeToContentCards(). N’oubliez pas de cancel() l’abonnement au flux lorsqu’il n’est plus nécessaire.

1
2
3
4
5
6
7
8
9
// Create stream subscription
StreamSubscription contentCardsStreamSubscription;

contentCardsStreamSubscription = braze.subscribeToContentCards((List<BrazeContentCard> contentCards) {
  // Handle Content Cards
}

// Cancel stream subscription
contentCardsStreamSubscription.cancel();

Consultez main.dart dans notre exemple d’application.

Étape 2 : Transférer les données de la carte de contenu depuis la couche native

Pour recevoir les données dans la couche Dart à partir de l’étape 1, ajoutez le code suivant pour transférer les données de la carte de contenu des couches natives.

Les données de la carte de contenu sont automatiquement transférées depuis la couche Android.

  1. Implémentez contentCards.subscribeToUpdates pour vous abonner aux mises à jour des cartes de contenu comme décrit dans la documentation subscribeToUpdates.

  2. Votre implémentation de fonction de rappel contentCards.subscribeToUpdates doit appeler BrazePlugin.processContentCards(contentCards).

Consultez AppDelegate.swift dans notre exemple d’application.

Rejouer la fonction de rappel pour les cartes de contenu

Pour enregistrer n’importe quelle carte de contenu déclenchée avant que la fonction de rappel soit disponible et la rejouer une fois qu’elle est définie, ajoutez l’entrée suivante à la map customConfigs lors de l’initialisation du BrazePlugin :

1
BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});

About React Native Content Cards

The Braze SDKs include a default card feed to get you started with Content Cards. To show the card feed, you can use the Braze.launchContentCards() method. The default card feed included with the Braze SDK will handle all analytics tracking, dismissals, and rendering for a user’s Content Cards.

Prerequisites

Before you can use this feature, you’ll need to integrate the React Native Braze SDK.

Cards methods

To build your own UI, you can get a list of available cards, and listen for updates to cards:

1
2
3
4
5
6
7
8
9
10
11
// Set initial cards
const [cards, setCards] = useState([]);

// Listen for updates as a result of card refreshes, such as:
// a new session, a manual refresh with `requestContentCardsRefresh()`, or after the timeout period
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
    setCards(update.cards);
});

// Manually trigger a refresh of cards
Braze.requestContentCardsRefresh();

You can use these additional methods to build a custom Content Cards Feed within your app:

Card types and properties

The Content Cards data model is available in the React Native SDK and offers the following Content Cards card types: Image Only, Captioned Image, and Classic. There’s also a special Control card type, which is returned to users that are in the control group for a given card. Each type inherits common properties from a base model in addition to its own unique properties.

Base card model

The base card model provides foundational behavior for all cards.

For a full reference of the base card, see the Android and iOS documentation.

Image only

Image only cards are clickable, full-sized images.

For a full reference of the image only card, see the Android and iOS documentation.

Captioned image

Captioned image cards are clickable, full-sized images with accompanying descriptive text.

For a full reference of the captioned image card, see the Android and iOS documentation.

Classic

Classic cards have a title, description, and an optional image on the left of the text.

For a full reference of the classic (text announcement) Content Card, see the Android and iOS documentation. For the classic image (short news) card, see the Android and iOS documentation.

Control

Control cards include all of the base properties, with a few important differences. Most importantly:

  • The isControl property is guaranteed to be true.
  • The extras property is guaranteed to be empty.

For a full reference of the control card, see the Android and iOS documentation.

Conditions préalables

Avant de pouvoir utiliser les cartes de contenu, vous devez intégrer le SDK Swift de Braze dans votre application. Vous devrez ensuite suivre les étapes de configuration de votre application tvOS.

Configurer votre application tvOS

Étape 1 : Créer une nouvelle application iOS

Dans Braze, sélectionnez Paramètres > Paramètres des applications, puis Ajouter une application. Saisissez un nom pour votre application tvOS, sélectionnez iOS, et non tvOS, puis sélectionnez Ajouter une application.

ALT_TEXT.

Étape 2 : Obtenir la clé API de votre application

Dans les paramètres de votre application, sélectionnez votre nouvelle appli tvOS, puis prenez note de la clé API de votre appli. Vous utiliserez cette clé pour configurer votre application dans Xcode.

ALT_TEXT

Étape 3 : Intégrer BrazeKit

Utilisez la clé API de votre application pour intégrer le SDK Braze Swift à votre projet tvOS dans Xcode. Il vous suffit d’intégrer BrazeKit à partir du SDK Swift de Braze.

Étape 4 : Créez votre interface utilisateur personnalisée

Braze ne proposant pas d’interface utilisateur par défaut pour les cartes de contenu sur tvOS, vous devrez la personnaliser vous-même. Pour une description complète, consultez notre tutoriel étape par étape : Personnalisation des cartes de contenu pour tvOS. Pour obtenir un exemple de projet, consultez les exemples du SDK Swift de Braze.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devez intégrer le SDK d’Unity Braze.

Affichage natif des cartes de contenu

Vous pouvez afficher l’interface utilisateur par défaut pour les cartes de contenu à l’aide de l’appel suivant :

1
Appboy.AppboyBinding.DisplayContentCards();

Réception des données de carte de contenu dans Unity

Vous pouvez lister des objets de jeu Unity pour être avertis des cartes de contenu entrantes. Nous recommandons de définir des auditeurs d’objets de jeu à partir de l’éditeur de configuration Braze.

Si vous devez configurer votre auditeur d’objet de jeu lors de l’exécution, utilisez AppboyBinding.ConfigureListener() et spécifiez BrazeUnityMessageType.CONTENT_CARDS_UPDATED.

Notez que vous devrez également appeler AppboyBinding.RequestContentCardsRefresh() pour commencer à recevoir des données dans votre auditeur d’objet de jeu sur iOS.

Analyse des cartes de contenu

Les messages de type string entrants reçus dans votre rappel d’objet de jeu de cartes de contenu peuvent être analysés dans notre objet de modèle ContentCard pré-fourni pour plus de commodité.

L’analyse des cartes de contenu nécessite une analyse JSON, voir l’exemple suivant pour plus de détails :

Exemple de fonction de rappel des cartes de contenu
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
void ExampleCallback(string message) {
  try {
    JSONClass json = (JSONClass)JSON.Parse(message);

    // Content Card data is contained in the `mContentCards` field of the top level object.
    if (json["mContentCards"] != null) {
      JSONArray jsonArray = (JSONArray)JSON.Parse(json["mContentCards"].ToString());
      Debug.Log(String.Format("Parsed content cards array with {0} cards", jsonArray.Count));

      // Iterate over the card array to parse individual cards.
      for (int i = 0; i < jsonArray.Count; i++) {
        JSONClass cardJson = jsonArray[i].AsObject;
        try {
          ContentCard card = new ContentCard(cardJson);
          Debug.Log(String.Format("Created card object for card: {0}", card));

          // Example of logging Content Card analytics on the ContentCard object 
          card.LogImpression();
          card.LogClick();
        } catch {
          Debug.Log(String.Format("Unable to create and log analytics for card {0}", cardJson));
        }
      }
    }
  } catch {
    throw new ArgumentException("Could not parse content card JSON message.");
  }
}

Rafraîchir les cartes de contenu

Pour actualiser les cartes de contenu de Braze, appelez l’une des méthodes suivantes :

1
2
3
4
// results in a network request to Braze
AppboyBinding.RequestContentCardsRefresh()

AppboyBinding.RequestContentCardsRefreshFromCache()

Analyse

Les clics et les impressions doivent être enregistrés manuellement pour les cartes de contenu non affichées directement par Braze.

Utilisez LogClick() et LogImpression() sur Contentcardable pour enregistrer les clics et les impressions pour des cartes spécifiques.

À propos des cartes de contenu Xamarin

Le SDK Xamarin de Braze inclut un flux de cartes par défaut pour vous permettre de démarrer avec les cartes de contenu. Le flux de cartes par défaut inclus avec le SDK Braze traitera tous les suivis d’analyse, les rejets et le rendu des cartes de contenu d’un utilisateur.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Xamarin Braze.

Types de cartes et propriétés

Le SDK Xamarin de Braze dispose de trois types de cartes de contenu uniques qui partagent un modèle de base : Bannière, Image légendée et Classique. Chaque type hérite des propriétés communes d’un modèle de base et possède les propriétés supplémentaires suivantes.

Modèle de carte de base

Pour une référence complète de la carte de base, consultez la documentation Android et iOS.

Bannière

Les cartes de bannière sont des images cliquables et de taille réelle.

Pour une référence complète de la carte bannière, consultez la documentation Android et iOS (désormais renommée en image uniquement).

Image avec légende

Les cartes d’images légendées sont des images cliquables en taille réelle accompagnées d’un texte descriptif.

Pour une référence complète de la carte d’image sous-titrée, consultez la documentation Android et iOS.

Classique

Les cartes classiques comportent un titre, une description et une image facultative à gauche du texte.

Pour une référence complète de la carte de contenu classique (annonce textuelle), consultez la documentation Android et iOS. Pour une référence complète de la carte d’image classique (courte nouvelle), consultez la documentation Android et iOS.

Méthodes de carte

Vous pouvez utiliser ces méthodes supplémentaires pour créer un flux de cartes de contenu personnalisé dans votre application :

Méthode Description
requestContentCardsRefresh() Demande les dernières cartes de contenu au serveur Braze SDK.
getContentCards() Récupère les cartes de contenu du SDK Braze Cela renverra la dernière liste de cartes du serveur.
logContentCardClicked(cardId) Enregistre un clic pour l’ID de carte de contenu donné. Cette méthode est uniquement utilisée pour les analyses.
logContentCardImpression(cardId) Enregistre une impression pour l’ID de carte de contenu donné.
logContentCardDismissed(cardId) Enregistre un rejet pour l’ID de carte de contenu donné.
CETTE PAGE A-T-ELLE ÉTÉ UTILE?
New Stuff!