3.1.2 Création de fragments à utiliser dans votre message

Dans cet exercice, vous allez configurer 2 fragments, 1 pour un en-tête réutilisable et 1 pour un pied de page réutilisable.

Connectez-vous à Adobe Journey Optimizer en allant sur Adobe Experience Cloud. Cliquez sur Journey Optimizer.

Vous serez redirigé vers la vue Accueil dans Journey Optimizer. Tout d’abord, assurez-vous d’utiliser le bon sandbox. Le sandbox à utiliser est appelé --aepSandboxName--.

3.1.2.1 Créer un fragment d’en-tête

Dans le menu de gauche, cliquez sur Fragments. Un fragment est un composant réutilisable dans Journey Optimizer, ce qui évite la duplication et facilite les modifications futures qui devraient avoir un impact sur tous les messages, telles que les modifications apportées à un en-tête ou à un pied de page dans un e-mail.

Cliquez sur Créer un fragment.

Saisissez le --aepUserLdap-- - CitiSignal - Header de nom et sélectionnez le Type : fragment visuel. Cliquez sur Créer.

Tu verras ça. Dans le menu de gauche, vous trouverez les composants de structure que vous pouvez utiliser pour définir la structure de l’e-mail (lignes et colonnes).

Faites glisser et déposez une colonne 1:1 du menu vers la zone de travail. Il s’agira de l’espace réservé pour l’image du logo.

Vous pouvez ensuite utiliser les composants de contenu pour ajouter du contenu à l’intérieur de ces blocs. Faites glisser et déposez un composant Image dans la première cellule de la première ligne. Cliquez sur Parcourir.

Une fenêtre contextuelle s’affiche alors pour vous montrer votre bibliothèque de médias AEM Assets. Accédez au dossier citi-signal-images, cliquez pour sélectionner l’image CitiSignal-Logo-White.png, puis cliquez sur Sélectionner.

Tu verras ça. Votre image est blanche et ne s’affiche pas encore. Vous devez maintenant définir une couleur d’arrière-plan pour que l’image s’affiche correctement. Cliquez sur Styles, puis sur la zone Couleur d’arrière-plan.

Dans la fenêtre contextuelle, modifiez le code couleur Hex en #8821F4 puis changez la sélection en cliquant dans le champ 100 %. La nouvelle couleur appliquée à l’image s’affiche.

L'image est aussi un peu trop grande en ce moment. Changeons la largeur en faisant glisser le sélecteur Largeur à 40 %.

Votre fragment d’en-tête est maintenant prêt. Cliquez sur Enregistrer puis sur la flèche pour revenir à l’écran précédent.

Votre fragment doit être publié avant de pouvoir être utilisé. Cliquez sur Publier.

Au bout de quelques minutes, vous verrez que le statut de votre fragment est passé à Actif.
Vous devez ensuite créer un fragment pour le pied de page de vos e-mails. Cliquez sur Créer un fragment.

3.1.2.2 Créer le fragment de pied de page

Cliquez sur Créer un fragment.

Saisissez le --aepUserLdap-- - CitiSignal - Footer de nom et sélectionnez le Type : fragment visuel. Cliquez sur Créer.

Tu verras ça. Dans le menu de gauche, vous trouverez les composants de structure que vous pouvez utiliser pour définir la structure de l’e-mail (lignes et colonnes).

Faites glisser et déposez une colonne 1:1 du menu vers la zone de travail. Il s’agira de l’espace réservé pour le contenu du pied de page.

Vous pouvez ensuite utiliser les composants de contenu pour ajouter du contenu à l’intérieur de ces blocs. Effectuez un glisser-déposer d’un composant HTML dans la première cellule de la première ligne. Cliquez sur le composant pour le sélectionner, puis sur l’icône </> pour modifier le code source HTML.

Tu verras ça.

Copiez le fragment de code HTML ci-dessous et collez-le dans la fenêtre Modifier HTML de Journey Optimizer.

<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="text-align: center;" ><![endif]-->
<table style="width: auto; display: inline-block;">
  <tbody>
    <tr class="component-social-container">
      <td style="padding: 5px">
        <a style="text-decoration: none;" href="https://www.facebook.com" data-component-social-icon-id="facebook">

        </a>
      </td>
      <td style="padding: 5px">
        <a style="text-decoration: none;" href="https://x.com" data-component-social-icon-id="twitter">

        </a>
      </td>
      <td style="padding: 5px">
        <a style="text-decoration: none;" href="https://www.instagram.com" data-component-social-icon-id="instagram">

        </a>
      </td>
    </tr>
  </tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->

Tu auras alors ceci. Aux lignes 7, 12 et 17, vous devez maintenant insérer un fichier image à l’aide des ressources de votre bibliothèque AEM Assets.

Assurez-vous que votre curseur se trouve à la ligne 7, puis cliquez sur Assets dans le menu de gauche. Cliquez sur Ouvrir le sélecteur de ressources pour sélectionner votre image.

Ouvrez le dossier citi-signal-images et cliquez pour sélectionner l’image Icon_Facebook.png. Cliquez sur Sélectionner.

Assurez-vous que le curseur se trouve à la ligne 12, puis cliquez sur Ouvrir le sélecteur de ressources pour sélectionner votre image.

Ouvrez le dossier citi-signal-images et cliquez pour sélectionner l’image Icon_X.png. Cliquez sur Sélectionner.

Assurez-vous que le curseur se trouve à la ligne 17, puis cliquez sur Ouvrir le sélecteur de ressources pour sélectionner votre image.

Ouvrez le dossier citi-signal-images et cliquez pour sélectionner l’image Icon_Instagram.png. Cliquez sur Sélectionner.

Tu verras ça. Cliquez sur Enregistrer.

Vous serez alors de retour dans l'éditeur. Vos icônes ne sont pas encore visibles car l’arrière-plan et les fichiers image sont tous en blanc. Pour modifier la couleur d’arrière-plan, accédez à Styles, puis cochez la case Couleur d’arrière-plan.

Remplacez le code couleur Hex par #000000.

Modifiez l'alignement pour qu'il soit centré.

Ajoutons d’autres parties au pied de page. Faites glisser et déposez un composant Image au-dessus du composant HTML que vous venez de créer. Cliquez sur Parcourir.

Cliquez pour sélectionner le fichier image CitiSignal_Footer_Logo.png et cliquez sur Sélectionner.

Accédez à Styles et cochez la case Couleur d’arrière-plan, nous allons à nouveau la modifier en noir. Remplacez le code couleur Hex par #000000.

Remplacez la largeur par 20 % et vérifiez que l'alignement est centré.

Ensuite, faites glisser et déposez un composant Texte sous le composant HTML que vous avez créé. Cliquez sur Parcourir.

Copiez et collez le texte ci-dessous en remplaçant le texte d’espace réservé.

1234 N. South Street, Anywhere, US 12345

Unsubscribe

©2024 CitiSignal, Inc and its affiliates. All rights reserved.

Définissez l’Alignement du texte à centrer.

Remplacez la Couleur de police par le blanc, #FFFFFF.

Remplacez Couleur d’arrière-plan par le noir, #000000.

Sélectionnez le texte Se désabonner dans le pied de page, puis cliquez sur l’icône Lien dans la barre de menus. Définissez le Type sur Désinscription/opt-out externe et définissez l’URL sur https://aepdemo.net/unsubscribe.html (le lien de désinscription ne peut pas contenir d’URL vide).

Tu auras alors ceci. Votre pied de page est maintenant prêt. Cliquez sur Enregistrer puis sur la flèche pour revenir à la page précédente.

Cliquez sur Publier pour publier votre pied de page afin de l’utiliser dans un e-mail.

Au bout de quelques minutes, vous verrez que le statut de votre pied de page est passé à Actif.

Étapes suivantes

Accédez à 3.1.3 Création de votre parcours et de votre e-mail

Revenez à Adobe Journey Optimizer : Orchestration

Revenir à Tous les modules