Intégration d’une carte de contenu

Cet article explique comment paramétrer des cartes de contenu pour React Native.

Les SDK Braze incluent un flux de cartes par défaut pour vous permettre de démarrer avec 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.

Personnalisation

Pour créer votre propre interface utilisateur, vous pouvez obtenir une liste des cartes disponibles et écouter des mises à jour des cartes :

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

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

Test affichant l’exemple de carte de contenu

Suivez ces étapes pour tester un exemple de carte de contenu.

1. Définissez un utilisateur actif dans l’application React en appelant la méthode Braze.changeUser('your-user-id').
2. Rendez-vous dans la rubrique Campagnes et suivez ce guide pour créer une nouvelle campagne de cartes de contenu.
3. Composez votre campagne de cartes de contenu de test et accédez à l’onglet Test. Ajoutez le même user-id que l’utilisateur test et cliquez sur Envoyer le test. Vous devriez pouvoir lancer rapidement une carte de contenu sur votre appareil.

Pour plus d’intégrations, suivez les instructions d’intégration Android ou les instructions d’intégration iOS, en fonction de votre plateforme.

Vous trouverez un exemple de mise en œuvre dans BrazeProject au sein du SDK React Native.

Modèle de données de la carte de contenu

Le modèle de données des cartes de contenu est disponible dans le SDK React Native. Pour une référence complète du modèle de données de la carte de contenu, consultez la documentation Android et iOS.

Le SDK React Native de Braze propose trois types de cartes Content Cards uniques qui partagent un modèle de base : image seule, image légendée et classique.

Il existe également un type de carte de contrôle spécial, qui est renvoyé aux utilisateurs qui font partie du groupe de contrôle pour une carte donnée.

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.

Propriétés du modèle de carte de contenu de base

Le modèle de carte de base fournit un comportement fondamental pour toutes les cartes.

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

Propriétés du modèle de carte de contenu pour les images uniquement

Les cartes avec image seulement sont des images cliquables en taille réelle.

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

Image légendée des propriétés du modèle de cartes de contenu

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.

Propriétés du modèle de carte de contenu 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.

Propriétés du modèle de carte de contenu de contrôle

Les cartes de contrôle incluent toutes les propriétés de base, avec quelques différences importantes. Et surtout :

• La propriété isControl est garantie true.
• La propriété extras est garantie vide.

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

Support GIF

• android
• ios