Utilisation de widgets personnalisés
Objectifs de formation
Une fois cette unité terminée, vous pourrez :
- Expliquer les concepts de base de la création de widgets personnalisés
- Créer un bouton fléché vers le haut à l’aide du widget personnalisé de Marketing Cloud Intelligence
- Créer un en-tête personnalisé à l’aide du widget personnalisé de Marketing Cloud Intelligence
Que sont les widgets personnalisés ?
La bibliothèque de widgets de Marketing Cloud Intelligence propose une large gamme de widgets pour que vous puissiez créer des cartes thermiques, des barres d’état, des jauges d’objectif et même des diagrammes de dispersion. Comment procéder si vous voulez créer quelque chose de très spécifique ? Vous souhaitez par exemple un tableau qui se réduit en fonction de caractéristiques spécifiques que vous avez déterminées. C’est là que les widgets personnalisés entrent en jeu. En utilisant les langages CSS, JS et HTML, vous pouvez créer un widget personnalisé à partir de zéro. Si vous ne savez pas coder, ne vous inquiétez pas. Vous pouvez également créer des widgets personnalisés qui ne nécessitent pas de connaissances en codage.
Ajout d’un widget personnalisé
Supposons que vous souhaitiez ajouter un bouton fléché vers le haut à votre page, de sorte que chaque fois que l’utilisateur clique dessus, il se retrouve en haut de la page.
Pour créer un widget personnalisé, accédez d’abord à la page de tableau de bord et cliquez sur Ajouter un widget (1), puis, sous la bibliothèque d’éléments, cliquez sur Personnalisé (2).
Définissez ensuite sa classification (1). Dans cet exemple, vous créez un bouton fléché vers le haut, sélectionnez donc Bouton (2). Vous pouvez maintenant entrer dans l’éditeur (3).
L’écran de l’éditeur est divisé en différentes sections.
Vous pouvez voir un aperçu du widget et de son fonctionnement (1). Vous pouvez appliquer du code HTML (2) du code JS (3) ou du code CSS (4).
La bibliothèque d’extraits de code (5) contient des extraits de code prêts à l’emploi et d’autres sources externes à utiliser dans votre code.
Création d’un bouton fléché vers le haut
Créons maintenant le bouton. Dans l’éditeur, ajoutez les extraits de code suivants.
Dans la section HTML, ajoutez les éléments suivants :
<img src="https://datorama-freshdesk-success-center.s3.amazonaws.com/Other/img_72329.png" onclick="gototop()" width="82" height="86" alt="Up">
Dans la section JS, ajoutez :
function gototop(){
DA.navigation.dashboard.scrollToTop();
}Dans la section CSS, ajoutez :
img {
cursor: pointer;
}Une fois tous les extraits de code ajoutés, cliquez sur Appliquer.
Si vous revenez sur votre page, vous pouvez voir le bouton fléché vers le haut que vous venez de créer.
Passons en revue chaque extrait de code, afin que vous puissiez comprendre comment manipuler le code selon vos besoins plus tard.
HTML
Le code HTML détermine l’apparence du bouton. Examinons chaque partie de ce code.
-
img src="https://datorama-freshdesk-success-center.s3.amazonaws.com/Other/img_72329.png"Il s’agit de la source de l’image. Vous pouvez insérer n’importe quelle adresse publiquement disponible.
-
onclick="gototop() »Il s’agit de l’action qui doit avoir lieu lorsque l’utilisateur clique sur le bouton. Il s’agit en fait d’un nom de fonction, qui est décrit en détail dans la section JavaScript ou JS.
-
width="82" height="86"Cela définit la largeur et la hauteur de l’image.
-
alt="Up"Il s’agit du texte alternatif qui apparait si l’image ne s’affiche pas.
JavaScript
Le code JavaScript (JS) décrit l’action qui a lieu lorsque l’utilisateur clique sur le bouton. Dans ce cas, l’action consiste à revenir en haut de la page. Cependant, si vous souhaitez la changer, aucun problème ! C’est là que la bibliothèque d’extraits de code entre en jeu. Accédez simplement à la bibliothèque JavaScript et ouvrez les API de navigation. Vous avez juste à remplacer la ligne de code entre accolades { } par l’action que vous souhaitez effectuer, et à suivre les instructions.
Supposons que vous souhaitiez accéder à un widget spécifique sur la page. Depuis la bibliothèque JavaScript (1) cliquez sur API Navigation (2), et sélectionnez Faire défiler jusqu’au widget (3).
Remplacez l’extrait de code placé entre les accolades et insérez l’ID du widget qui se trouve dans le menu des options sous Widget | Info.
CSS
Le code CSS ajoute des éléments de conception à votre code. Vous pouvez par exemple modifier la police et la couleur du bouton. Dans cet exemple, le bouton est très simple, vous pouvez donc le laisser tel quel.
Ajout d’un widget d’en-tête
Votre page commence à prendre forme ! Mais ne serait-ce pas formidable si vous pouviez ajouter un en-tête qui peut vous aider à naviguer facilement sur la page ?
Heureusement, il n’est pas nécessaire de partir de zéro. L’équipe de Marketing Cloud Intelligence a créé un modèle reposant sur des widgets personnalisés : il vous suffit juste de le modifier légèrement. Aucune connaissance en codage n’est requise.
Sur la page de tableau de bord, cliquez sur le signe + pour ajouter un widget (1), et sous la bibliothèque d’éléments, cliquez sur En-têtes (2).
Vous avez le choix entre plusieurs options de conception. Sélectionnez celle qui convient le mieux à vos besoins.
Cliquez sur l’éditeur et commencez à personnaliser votre en-tête.
Ne soyez pas intimidé par l’apparence : il vous suffit de modifier le code JavaScript (1). Dans cet éditeur, vous trouverez des instructions spécifiques pour vous guider tout au long du processus (2).
Suivez simplement les instructions et adaptez l’en-tête à vos besoins spécifiques, et le tour est joué !
Regardez cette vidéo pour en savoir plus sur les widgets personnalisés.
Dans ce module, vous avez appris à créer des pages de tableau de bord professionnelles afin de pouvoir organiser et gérer vos données. Vous avez également appris à transformer vos pages de tableau de bord en de superbes rapports à l’image de votre marque, à parcourir vos pages et à les partager avec différentes parties prenantes, et à créer des widgets personnalisés sans aucune connaissance préalable en matière de codage.
Félicitations, vous savez maintenant visualiser vos données dans Marketing Cloud Intelligence !
Ressources