Intégration d’une carte de contenu

Cet article couvre l’intégration d’une carte de contenu pour le Web, y compris les modèles de données de carte de contenu, les options standard d’IU de flux et des méthodes de carte supplémentaires.

Le SDK Braze pour le Web comprend une IU de flux de cartes de contenu pour accélérer vos efforts d’intégration. Si vous préférez créer votre propre interface utilisateur, consultez le Guide de personnalisation des cartes de contenu.

IU de flux standard

Pour utiliser l’IU de cartes de contenu comprise, vous devez spécifier où afficher le flux sur votre site Internet.

Dans cet exemple, nous avons un <div id="feed"></div> dans lequel nous voulons placer le flux de cartes de contenu. Nous utiliserons trois boutons pour masquer, afficher ou basculer le flux (masquer ou afficher en fonction de son état actuel).

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>

Lorsque vous utilisez les méthodes toggleContentCards(parentNode, filterFunction) et showContentCards(parentNode, filterFunction), si aucun argument n’est fourni, toutes les cartes de contenu seront affichées dans une barre latérale à position fixe sur le côté droit de la page. Sinon, l’alimentation sera placée dans les options parentNode de l’appareil.

Consultez la documentation de référence du SDK pour plus d’informations sur la façon de basculer les cartes de contenu.

Modèle de données de cartes de contenu

Le modèle de données de cartes de contenu est disponible dans le SDK Web.

Le SDK Braze pour le Web propose trois types de carte de contenu : ImageOnly, CaptionedImage et ClassicCard. Chaque type hérite des propriétés communes d’un modèle de base Card et possède les propriétés supplémentaires suivantes.

Voir Enregistrer les analyses pour plus d’informations sur l’abonnement aux données de cartes.

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

Toutes les cartes de contenu ont ces propriétés communes :

Propriétés de la carte de contenu pour les images seulement - ImageOnly

Les cartes ImageOnly sont des images cliquables en taille réelle.

Propriétés de la carte de contenu de l’image sous-titrée : CaptionedImage

Les cartes d’images sous-titrées sont des images cliquables en taille réelle accompagnées d’un texte descriptif.

Propriétés de la Classic Content Card : ClassicCard

Le modèle ClassicCard peut contenir une image sans texte ou un texte avec image.

Groupe de contrôle

Si vous utilisez le flux par défaut des cartes de contenu, les impressions et les clics seront automatiquement suivis.

Si vous utilisez une intégration personnalisée pour les cartes de contenu, vous devez enregistrer les impressions lorsqu’une carte de contrôle aurait été vue. Dans ce cadre, veillez à gérer les cartes de contrôle lorsque vous enregistrez des impressions dans un test A/B. Ces cartes sont vierges et, bien qu’elles ne soient pas vues par les utilisateurs, vous devriez tout de même enregistrer les impressions afin de comparer leurs performances à celles des cartes de non-contrôle.

Pour déterminer si une carte de contenu se trouve dans le groupe de contrôle pour un test A/B, vérifiez la propriété card.isControl (SDK Web v4.5.0+) ou vérifiez si la carte est une instance de ControlCard (card instanceof braze.ControlCard).

Méthodes de carte

Pour plus de détails, reportez-vous à la documentation de référence du SDK