Mise en page
1. Lorsque tout est configuré dans la version HTML de l’e-mail, extrayez la version texte à partir du menu principal « Actions ».
2. Tout comme n’importe quel e-mail, l’extraction de la version texte supprimera toutes les balises HTML, à l’exception des sections. Nous devons l’adapter de façon à ce que le message soit clair pour le contact et y insérer des capteurs :
- Supprimez les balises DIV de la version web, mais pas le contenu entre les balises DIV. Ajoutez le capteur de la version web sur une nouvelle ligne en dessous du texte « Afficher cet e-mail dans votre navigateur ».
- Ajoutez le capteur « Désinscription » dans le bas de la version texte.
- Les attributs de style (MATABLE_TDCLASS, MATABLE_TDSTYLE, MATABLE_VALIGN, MATABLE_CLASS, MATABLE_COLCOUNT, MATABLE_STYLE) peuvent être supprimés du DIV du conteneur d’articles. Ne supprimez pas les DIV mêmes.
- Assurez-vous que MAHIDEDIV="TRUE" est un attribut de chaque DIV.
- Les DIV MAHEADER, MAFOOTER et MANOMATCH peuvent être supprimés, ils n’ont aucun contenu. Laissez le DIV MAITEM et son contenu.
- Ajouter le capteur d’article dans MAITEM.
Du texte à la place d’images ou de HTML
Nous ne pouvons pas utiliser la section HERO_IMAGE dans la version texte car cela restituerait une image au format HTML. Nous ne verrions pas une image dans l’e-mail envoyé, mais son code HTML affiché en texte brut (version texte). Au lieu de simplement l’enlever, nous voulons quand même afficher les informations de contact sur l’offre en question. Il doit cependant s’agir de texte. Nous allons donc ajouter un composant Texte dynamique que l’utilisateur d’Express peut compléter et utiliser dans la version texte.
Cela s’applique également au composant HTML dynamique et à tous les champs d’article dont le paramètre « Utilisation » est défini sur « Contenu au format HTML ».
3. Dans la fenêtre Composants, cliquez sur le composant Texte dynamique et sélectionnez « Créer ».
4. Nommez le composant « HERO_TEXT ». Définissez l’alias « Bannière version texte ». Cet alias sera utilisé dans Express. Si vous le souhaitez, dans l’onglet « Contenu », vous pouvez définir du texte par défaut. Le texte sera ajouté par défaut avec chaque nouveau bulletin d’information créé dans Express. Nous laisserons ce champ vide. Cliquez sur « OK » lorsque vous avez terminé. Le composant Texte dynamique apparaît sous « Utilisé dans cet e-mail » dans l’onglet « Composants ».
5. Modifiez simplement la valeur MAPARAMETER de la section Image dynamique dans la version texte en remplaçant « HERO_IMAGE » par « HERO_TEXT ».
Vous pouvez également utiliser ~DYNCONTENT.HERO_TEXT~ au lieu de la section (DIV). Cela vaut uniquement pour les composants Texte dynamique.
6. Nous allons maintenant faire de même pour le capteur de clic de la bannière. Créez un deuxième composant Texte dynamique, nommez-le « HERO_LINK » et son alias « Lien bannière ».
7. Créez un nouveau capteur dans la fenêtre Capteurs et nommez-le « Version texte bannière ». Il s’agit du nom utilisé dans les rapports. Sélectionnez la première option « Envoyer le contact vers un emplacement externe » et saisissez ~DYNCONTENT.HERO_LINK~.
8. Ajoutez le capteur juste en dessous de la section Texte dynamique de la version texte. La version texte finale se présente comme suit :
Paramètres définis pour les utilisateurs d’Express
Dans Express, l’utilisateur ne peut pas voir ou modifier la version texte même. Nous devons cependant donner à l’utilisateur d’Express la possibilité de définir le contenu des composants Texte dynamique « HERO_TEXT » et « HERO_LINK ». Nous ajouterons une Section dynamique à la version HTML de l’e-mail que seuls les utilisateurs d’Express verront. Cette section ne sera pas ajoutée aux éventuels bulletins d’information envoyés. Ici, l’utilisateur d’Express peut modifier le contenu pour les composants Texte dynamique « HERO_TEXT » et « HERO_LINK ».
9. À partir de la fenêtre Composants, faites glisser une Section dynamique et déposez-la devant tout le contenu de l’e-mail.
10. Vous devriez maintenant avoir une Section dynamique en haut de l’e-mail. Survolez la Section dynamique dans l’e-mail ; lorsque les 3 petites icônes d’édition apparaissent, survolez l’icône du milieu en forme de flèche. Sélectionnez « Propriétés » dans le menu déroulant.
11. Ajoutez une contrainte de visibilité « ID=0 ». La section pourra être vue uniquement par les utilisateurs d’Express. Cette section ne sera pas ajoutée aux éventuels bulletins d’information envoyés.
Pour les éventuels bulletins d’information envoyés, tous les contacts auront un ID>0. Un utilisateur d’Express n’a pas de champ ID (ID=0). Une Section dynamique avec cette contrainte dans le haut du template permet aux utilisateurs d’Express d’avoir un encadré « paramètres » où ils peuvent saisir des valeurs pour les composants Texte dynamique qui sont utilisés dans l’e-mail. Exemple : un fond d’une couleur donnée que l’utilisateur d’Express peut remplir. La valeur peut être utilisée dans la source du template comme ~DYNCONTENT.BGCOLOR~ où BGCOLOR est le nom du composant Texte dynamique. Le champ d’application DYNCONTENT vaut uniquement pour les valeurs Texte dynamique.
12. Dans l’onglet « Style », activez la case « Inclure un cadre de style (DIV) » et saisissez un style personnalisé « border-bottom: ridge #a0a0a0; padding:20px; font-family: Helvetica, Arial, sans-serif; font-size:13px; ». Nous voulons qu’il apparaisse dans Express comme un élément de niveau bloc, avec une belle bordure grise.
13. Enfin, placez le curseur à l’intérieur de la Section dynamique, saisissez le texte « Hero Text version: » et « Hero Link: ». Faites glisser les composants Texte dynamique « HERO_TEXT » et « HERO_LINK » à partir de la fenêtre Composants et déposez-les dans cette Section dynamique derrière chaque ligne de texte. De cette façon, les utilisateurs d’Express pourront modifier les valeurs pour les deux composants Texte dynamique. La Section dynamique en haut de l’e-mail se présente maintenant comme suit :
Retour à l’exemple : Un template, étape par étape
