Cartes de contenu

Conditions préalables

Avant de pouvoir utiliser les cartes de contenu, vous devez intégrer le SDK Web de Braze dans votre application. Cependant, aucune configuration supplémentaire n’est nécessaire. Pour 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.

Types de cartes et propriétés

Le modèle de données des cartes de contenu est disponible dans le SDK Web et offre les types de cartes de contenu suivants : 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.

Modèle de carte de base

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

Image uniquement

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

Image avec légende

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

Classique

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

Utilisation de Google Tag Manager

Google Tag Manager fonctionne en injectant le réseau de diffusion de Braze (une version de notre SDK Web) directement dans le code de votre site web, ce qui signifie que toutes les méthodes du SDK sont disponibles comme si vous aviez intégré le SDK sans Google Tag Manager, sauf lors de l’implémentation des cartes de contenu.

Mise en place des cartes de contenu

• google tag manager
• manuel

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

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

Mise à jour des modèles

Pour obtenir la dernière version du SDK Web de Braze, effectuez les trois étapes suivantes dans votre tableau de bord Google Tag Manager :

1. Mise à jour du modèle de balise
   Accédez à la page Modèles de votre espace de travail. Vous devez y voir une icône indiquant qu’une mise à jour est disponible.
   
   
   
   Cliquez sur cette icône et, après avoir révisé la modification, cliquez sur Accepter la mise à jour.
   
   
   
   
2. Mise à jour du numéro de version
   Une fois votre modèle de balise mis à jour, modifiez la balise d’initialisation Braze et mettez à jour la version SDK sur la version la plus récentemajor.minor. Par exemple, si la dernière version est 4.1.2, saisissez 4.1. Vous pouvez consulter la liste des versions du SDK dans notre journal des modifications.
   
   
   
   
3. AQ et publication
   Vérifiez que la nouvelle version du SDK fonctionne à l’aide de l’ outil de débogage de Google Tag Manager avant de publier une mise à jour de votre conteneur d’étiquettes.

Résolution des problèmes{#troubleshooting}

Activer le débogage de balise

Chaque modèle de balise de Braze dispose d’une case à cocher facultative Débogage de balises GTM qui peut être utilisée pour enregistrer les messages de débogage sur la console JavaScript de votre page Web.

Entrer dans le mode débogage

Un autre moyen de déboguer l’intégration de Google Tag Manager est d’utiliser la fonctionnalité de prévisualisation de Google.

Cela permet d’identifier les valeurs envoyées par la couche de données de votre page web à chaque étiquette Braze déclenchée et d’expliquer quelles étiquettes ont été déclenchées ou non.

Activer la jounalisation verbeuse

Pour permettre à l’assistance technique de Braze de soutenir les journaux d’accès lors du test, vous pouvez activer la journalisation verbeuse sur votre intégration de Google Tag Manager. Ces journaux apparaîtront dans l’onglet Console des outils de développement de votre navigateur .

Dans votre intégration Google Tag Manager, accédez à votre balise d’initialisation Braze et sélectionnez Activer la journalisation du SDK Web.