Créer des Content Cards

Cet article présente l’approche de base pour mettre en œuvre des Content Cards personnalisées, ainsi que trois cas d’utilisation courants. Il part du principe que vous avez déjà lu les autres articles du guide de personnalisation des Content Cards pour comprendre ce qui peut être fait par défaut et ce qui nécessite du code personnalisé. Il est particulièrement utile de comprendre comment enregistrer les analyses pour vos Content Cards personnalisées.

Conseil

Vous utilisez des Content Cards pour des messages de type bannière ? Essayez les Bannières— parfaites pour les messages in-app et web intégrés et persistants.

Création d’une carte

Étape 1 : Créer une interface utilisateur personnalisée

• web
• android
• swift

Étape 2 : S’abonner aux mises à jour des cartes

Enregistrez une fonction de rappel pour vous abonner aux mises à jour de données lorsque les cartes sont actualisées. Vous pouvez analyser les objets Content Card et extraire leurs données de payload, telles que title, cardDescription et imageUrl, puis utiliser les données du modèle résultant pour alimenter votre interface utilisateur personnalisée.

Pour obtenir les modèles de données Content Card, abonnez-vous aux mises à jour des Content Cards. Portez une attention particulière aux propriétés suivantes :

• id : Représente la chaîne de caractères de l’ID de la Content Card. Il s’agit de l’identifiant unique utilisé pour enregistrer les analyses à partir de Content Cards personnalisées.
• extras : Englobe toutes les paires clé-valeur du tableau de bord de Braze.

Toutes les propriétés en dehors de id et extras sont optionnelles à analyser pour les Content Cards personnalisées. Pour plus d’informations sur le modèle de données, consultez l’article d’intégration de chaque plateforme : Android, iOS, Web.

• web
• android
• swift

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

braze.subscribeToContentCardsUpdates((updates) => {
  const cards = updates.cards;
// For example:
  cards.forEach(card => {
    if (card.isControl) {
      // Do not display the control card, but remember to call `logContentCardImpressions([card])`
    }
    else if (card instanceof braze.ClassicCard || card instanceof braze.CaptionedImage) {
      // Use `card.title`, `card.imageUrl`, etc.
    }
    else if (card instanceof braze.ImageOnly) {
      // Use `card.imageUrl`, etc.
    }
  })
});

braze.openSession();

Remarque

Les Content Cards ne s’actualisent au démarrage de la session que si subscribeToContentCardsUpdates() est appelé avant openSession(). Vous pouvez également actualiser manuellement le flux à tout moment.

• java
• kotlin

Étape 2a : Créer une variable d’abonnement privée

Pour vous abonner aux mises à jour des cartes, déclarez d’abord une variable privée dans votre classe personnalisée pour conserver votre abonnement :

1
2
// subscriber variable
private IEventSubscriber<ContentCardsUpdatedEvent> mContentCardsUpdatedSubscriber;

Étape 2b : S’abonner aux mises à jour

Ajoutez le code suivant pour vous abonner aux mises à jour des Content Cards depuis Braze, généralement à l’intérieur de la méthode Activity.onCreate() de votre activité Content Cards personnalisée :

1
2
3
4
5
6
7
8
9
10
11
12
13
// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);
mContentCardsUpdatedSubscriber = new IEventSubscriber<ContentCardsUpdatedEvent>() {
    @Override
    public void trigger(ContentCardsUpdatedEvent event) {
        // List of all Content Cards
        List<Card> allCards = event.getAllCards();

        // Your logic below
    }
};
Braze.getInstance(context).subscribeToContentCardsUpdates(mContentCardsUpdatedSubscriber);
Braze.getInstance(context).requestContentCardsRefresh();

Étape 2c : Se désabonner

Désabonnez-vous lorsque votre activité personnalisée quitte la vue. Ajoutez le code suivant à la méthode de cycle de vie onDestroy() de votre activité :

1
Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);

Étape 2a : Créer une variable d’abonnement privée

Pour vous abonner aux mises à jour des cartes, déclarez d’abord une variable privée dans votre classe personnalisée pour conserver votre abonnement :

1
private var contentCardsUpdatedSubscriber: IEventSubscriber<ContentCardsUpdatedEvent>? = null

Étape 2b : S’abonner aux mises à jour

Ajoutez le code suivant pour vous abonner aux mises à jour des Content Cards depuis Braze, généralement à l’intérieur de la méthode Activity.onCreate() de votre activité Content Cards personnalisée :

1
2
3
4
5
6
7
8
9
10
// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).subscribeToContentCardsUpdates(contentCardsUpdatedSubscriber)
Braze.getInstance(context).requestContentCardsRefresh()
  // List of all Content Cards
  val allCards = event.allCards

  // Your logic below
}
Braze.getInstance(context).subscribeToContentCardsUpdates(mContentCardsUpdatedSubscriber)
Braze.getInstance(context).requestContentCardsRefresh(true)

Étape 2c : Se désabonner

Désabonnez-vous lorsque votre activité personnalisée quitte la vue. Ajoutez le code suivant à la méthode de cycle de vie onDestroy() de votre activité :

1
Braze.getInstance(context).removeSingleSubscription(contentCardsUpdatedSubscriber, ContentCardsUpdatedEvent::class.java)

Pour accéder au modèle de données des Content Cards, appelez contentCards.cards sur votre instance braze.

• swift
• objective-c

1
let cards: [Braze.ContentCard] = AppDelegate.braze?.contentCards.cards

De plus, vous pouvez maintenir un abonnement pour observer les changements dans vos Content Cards. Vous pouvez le faire de deux manières :

1. En maintenant un cancellable ; ou
2. En maintenant un AsyncStream.

Cancellable

1
2
3
4
5
6
// This subscription is maintained through a Braze cancellable, which will observe for changes until the subscription is cancelled.
// You must keep a strong reference to the cancellable to keep the subscription active.
// The subscription is canceled either when the cancellable is deinitialized or when you call its `.cancel()` method.
let cancellable = AppDelegate.braze?.contentCards.subscribeToUpdates { [weak self] contentCards in
  // Implement your completion handler to respond to updates in `contentCards`.
}

AsyncStream

1
let stream: AsyncStream<[Braze.ContentCard]> = AppDelegate.braze?.contentCards.cardsStream

1
NSArray<BRZContentCardRaw *> *contentCards = AppDelegate.braze.contentCards.cards;

De plus, si vous souhaitez maintenir un abonnement à vos Content Cards, vous pouvez appeler subscribeToUpdates :

1
2
3
4
// This subscription is maintained through Braze cancellable, which will continue to observe for changes until the subscription is cancelled.
BRZCancellable *cancellable = [self.braze.contentCards subscribeToUpdates:^(NSArray<BRZContentCardRaw *> *contentCards) {
  // Implement your completion handler to respond to updates in `contentCards`.
}];

Étape 3 : Implémenter les analyses

Les impressions, clics et rejets de Content Cards ne sont pas automatiquement enregistrés dans votre vue personnalisée. Vous devez implémenter chaque méthode respective pour enregistrer correctement tous les indicateurs dans les analyses du tableau de bord de Braze.

Étape 4 : Tester votre carte (facultatif)

Pour tester votre Content Card :

1. Définissez un utilisateur actif dans votre application en appelant la méthode changeUser().
2. Dans Braze, accédez à Campaigns, puis créez une nouvelle campagne de Content Cards.
3. Dans votre Campaign, sélectionnez Test, puis saisissez le user-id de l’utilisateur test. Lorsque vous êtes prêt, sélectionnez Send Test. Vous pourrez lancer une Content Card sur votre appareil sous peu.

Placements des Content Cards

Les Content Cards peuvent être utilisées de nombreuses façons différentes. Trois implémentations courantes consistent à les utiliser comme centre de messages, comme publicité d’image dynamique ou comme carrousel d’images. Pour chacun de ces placements, vous assignerez des paires clé-valeur (la propriété extras dans le modèle de données) à vos Content Cards, et en fonction des valeurs, vous ajusterez dynamiquement le comportement, l’apparence ou la fonctionnalité de la carte pendant l’exécution.

Boîte de réception de messages

Les Content Cards peuvent être utilisées pour simuler un centre de messages. Dans ce format, chaque message est sa propre carte contenant des paires clé-valeur qui pilotent les événements au clic. Ces paires clé-valeur sont les identifiants clés que l’application examine pour décider où naviguer lorsque l’utilisateur clique sur un message de la boîte de réception. Les valeurs des paires clé-valeur sont arbitraires.

Exemple

Par exemple, vous pourriez vouloir créer deux cartes de messages : un appel à l’action pour inciter les utilisateurs à activer les recommandations de lecture et un code promotionnel destiné à votre Segment de nouveaux abonnés.

Les clés comme body, title et buttonText peuvent avoir des valeurs de chaîne de caractères simples que vos marketeurs peuvent définir. Les clés comme terms peuvent avoir des valeurs fournissant une petite collection de formulations approuvées par votre service juridique. Les clés comme style et class_type ont des valeurs de chaîne de caractères que vous pouvez définir pour déterminer comment votre carte s’affiche dans votre application ou sur votre site.

• recommandations de lecture
• coupon nouvel abonné

1
2
3
4
5
6
7
8
9
10
11
 private fun createContentCardable(metadata: Map<String, Any>, type: ContentCardClass?): ContentCardable?{
        return when(type){
            ContentCardClass.AD -> Ad(metadata)
            ContentCardClass.MESSAGE_WEB_VIEW -> WebViewMessage(metadata)
            ContentCardClass.NOTIFICATION_CENTER -> FullPageMessage(metadata)
            ContentCardClass.ITEM_GROUP -> Group(metadata)
            ContentCardClass.ITEM_TILE -> Tile(metadata)
            ContentCardClass.COUPON -> Coupon(metadata)
            else -> null
        }
    }

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
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //...
        listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
           when (val card = dataProvider[position]){
                is WebViewMessage -> {
                    val intent = Intent(this, WebViewActivity::class.java)
                    val bundle = Bundle()
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.contentString)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
                is FullPageMessage -> {
                    val intent = Intent(this, FullPageContentCard::class.java)
                    val bundle = Bundle()
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.icon)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.messageTitle)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.cardDescription)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        }
    }

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
private ContentCardable createContentCardable(Map<String, ?> metadata,  ContentCardClass type){
    switch(type){
        case ContentCardClass.AD:{
            return new Ad(metadata);
        }
        case ContentCardClass.MESSAGE_WEB_VIEW:{
            return new WebViewMessage(metadata);
        }
        case ContentCardClass.NOTIFICATION_CENTER:{
            return new FullPageMessage(metadata);
        }
        case ContentCardClass.ITEM_GROUP:{
            return new Group(metadata);
        }
        case ContentCardClass.ITEM_TILE:{
            return new Tile(metadata);
        }
        case ContentCardClass.COUPON:{
            return new Coupon(metadata);
        }
        default:{
            return null;
        }
    }
}

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
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState)
        //...
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id){
               ContentCardable card = dataProvider.get(position);
               if (card instanceof WebViewMessage){
                    Bundle intent = new Intent(this, WebViewActivity.class);
                    Bundle bundle = new Bundle();
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.getContentString());
                    intent.putExtras(bundle);
                    startActivity(intent);
                }
                else if (card instanceof FullPageMessage){
                    Intent intent = new Intent(this, FullPageContentCard.class);
                    Bundle bundle = Bundle();
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.getIcon());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.getMessageTitle());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.getCardDescription());
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        });
    }

Carrousel

Vous pouvez configurer les Content Cards dans un flux de carrousel entièrement personnalisé, permettant aux utilisateurs de faire défiler et de voir des cartes en vedette supplémentaires. Par défaut, les Content Cards sont triées par date de création (les plus récentes en premier), et vos utilisateurs verront toutes les cartes auxquelles ils sont éligibles.

Pour implémenter un carrousel de Content Cards :

1. Créez une logique personnalisée qui observe les changements dans vos Content Cards et gère l’arrivée des Content Cards.
2. Créez une logique côté client personnalisée pour afficher un nombre spécifique de cartes dans le carrousel à tout moment. Par exemple, vous pourriez sélectionner les cinq premiers objets Content Card du tableau ou introduire des paires clé-valeur pour construire une logique conditionnelle.

Conseil

Si vous implémentez un carrousel en tant que flux secondaire de Content Cards, veillez à trier les cartes dans le flux approprié à l’aide de paires clé-valeur.

Image uniquement

Les Content Cards ne doivent pas nécessairement ressembler à des « cartes ». Par exemple, les Content Cards peuvent apparaître comme une image dynamique qui s’affiche de façon persistante sur votre page d’accueil ou en haut de pages désignées.

Pour ce faire, vos marketeurs créeront une Campaign ou une étape Canvas avec un type de Content Card Image Only. Ensuite, définissez des paires clé-valeur appropriées pour utiliser les Content Cards comme contenu supplémentaire.