Créer des cartes de contenu

Cet article présente l’approche de base pour mettre en œuvre des cartes de contenu 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 cartes de contenu 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 cartes de contenu personnalisées.

Création d’une carte

Étape 1 : Créer une IU 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 des données lorsque les cartes sont actualisées. Vous pouvez analyser les objets de cartes de contenu et extraire leurs données utiles, telles que title, cardDescription et imageUrl, puis utiliser les données du modèle résultant pour alimenter votre IU personnalisée.

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

• id : Représente la chaîne de caractères d’ID de la carte de contenu. Il s’agit de l’identifiant unique utilisé pour enregistrer les analyses des cartes de contenu 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 facultatives pour les cartes de contenu 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();

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

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

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

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

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)

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

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

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

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

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

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 : Mettre en œuvre les analyses

Les impressions, clics et fermetures de cartes de contenu ne sont pas automatiquement enregistrés dans votre vue personnalisée. Vous devez mettre en œuvre chaque méthode correspondante pour enregistrer correctement tous les indicateurs dans les analyses du tableau de bord de Braze.

Étape 4 : Tester votre carte (facultatif)

Pour tester votre carte de contenu :

1. Définissez un utilisateur actif dans votre application en appelant la méthode changeUser().
2. Dans Braze, accédez à Campagnes, puis créez une nouvelle campagne de cartes de contenu.
3. Dans votre campagne, sélectionnez Test, puis saisissez le user-id de l’utilisateur test. Lorsque vous êtes prêt, sélectionnez Envoyer le test. Vous pourrez bientôt lancer une carte de contenu sur votre appareil.

Placements des cartes de contenu

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

Boîte de réception de messages

Les cartes de contenu 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 alimentent les événements au clic. Ces paires clé-valeur sont les identifiants clés que l’application examine pour décider où rediriger l’utilisateur lorsqu’il clique sur un message de la boîte de réception. Les valeurs des paires clé-valeur sont arbitraires.

Exemple

Par exemple, vous pouvez créer deux cartes de message : un appel à l’action pour inciter les utilisateurs à activer les recommandations de lecture, et un code de coupon destiné à votre nouveau segment d’utilisateurs abonnés.

Les clés telles que body, title et buttonText peuvent comporter des valeurs de chaînes de caractères simples que vos marketeurs peuvent définir. Les clés telles que terms peuvent avoir des valeurs fournissant une petite collection de phrases approuvées par votre service juridique. Les clés telles que style et class_type ont des valeurs de chaînes de caractères que vous pouvez définir pour déterminer le rendu de votre carte sur votre application ou votre site.

• reading recommendations
• new subscriber coupon

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 intégrer des cartes de contenu dans un flux de carrousel entièrement personnalisé, permettant aux utilisateurs de balayer l’écran pour découvrir d’autres cartes en vedette. Par défaut, les cartes de contenu sont triées par date de création (la plus récente en premier), et vos utilisateurs verront toutes les cartes auxquelles ils ont droit.

Pour mettre en place un carrousel de cartes de contenu :

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

Image seule

Les cartes de contenu n’ont pas besoin de ressembler à des « cartes ». Par exemple, elles peuvent prendre la forme d’une image dynamique affichée en permanence sur votre page d’accueil ou en haut de pages spécifiques.

Pour y parvenir, vos marketeurs créeront une campagne ou une étape du canvas avec une carte de contenu de type Image Only. Définissez ensuite les paires clé-valeur appropriées pour utiliser les cartes de contenu en tant que contenu supplémentaire.