Le conteneur d’articles

Créer le conteneur

1. Cliquez sur le composant Conteneur d’articles dans l’onglet Composants et sélectionnez « Créer nouveau ». La fenêtre des propriétés du conteneur d’articles s’ouvre.

2. Nommez le composant « WEEKLY_PRODUCTS ». Utilisez l’alias « Produits hebdomadaires ». Cet alias sera utilisé dans Express.

3. Dans l’onglet « Sélection du contenu », sélectionnez la liste d’articles créée précédemment à partir de la liste déroulante « Source ». Campaign ira alors chercher les articles et les enregistrera dans cette liste d’articles. Vous pouvez laisser tels quels les autres paramètres. « Inclure uniquement les articles sélectionnés » indique que les utilisateurs sont tenus d’ajouter des articles et « Autoriser le tri manuel » ajoutera des flèches Haut et Bas dans Express pour que l’utilisateur d’Express puisse déplacer les articles vers le haut et vers le bas.

REMARQUE IMPORTANTE : Si l’option « Inclure uniquement les articles sélectionnés » n’est pas activée, tous les articles de la liste qui correspondent au filtre appliqué seront chargés pour chaque e-mail qui est généré pour chaque contact. Si aucun filtre n’est défini ou si le filtre ne limite pas suffisamment le nombre d’articles chargés (environ 5 000 articles), cela chargera considérablement le système, et la génération des e-mails se compliquera. Si vous n'activez pas l'option « Inclure uniquement les articles sélectionnés », définissez TOUJOURS un filtre dans le conteneur d'articles afin de limiter le nombre d'articles à charger. Par exemple, utilisez un champ DELIVERY_AFTER_DATE pour filtrer la sélection, avec DELIVERY_AFTER_DATE <=GETDATE() comme filtre. GETDATE() renvoie la date du jour.

4. Cliquez sur « OK » lorsque vous avez terminé. Le conteneur d’articles apparaît sous « Utilisé dans cet e-mail » dans l’onglet « Composants ».

Configurez les champs dans le conteneur.

Nous devons déterminer de quelle manière les champs des articles peuvent être utilisés dans Express : comme image, texte seul, hyperlien, etc.

5. Cliquez sur le conteneur d’articles sous « Utilisé dans cet e-mail » dans l’onglet « Composants » pour voir les noms des champs.

6. Faites un clic droit sur CREATED_TD et sélectionnez « Propriétés ». Ici, vous pouvez déterminer le comportement des champs sous « Utilisation » (image, texte seul, hyperlien, etc.) et définir un alias. Cet alias sera utilisé comme nom de champ dans Express :

  • CREATED_DT, MODIFIED_DT et TAXONOMY peuvent être définis comme « Non éditables ». Les champs ne s’afficheront pas dans Express. Un alias n’est pas nécessaire.
  • IMAGE : Définissez l’alias et l’utilisation : « Image ». Si vous définissez l’utilisation, les boutons de détail seront actifs. Cliquez dessus pour définir les autres paramètres de l’image :
    • autorisez l’utilisateur Express à charger des images locales ;
    • déterminez un dossier dans lequel les images seront enregistrées par défaut ;
    • définissez la taille minimale et maximale de l’image. Pour cette création, l’image doit toujours avoir une largeur de 180 px. La hauteur peut varier entre 150 px et 210 px. La taille idéale est �180 x 180 px
    • Autorisez les utilisateurs d’Express à redimensionner les images à la taille autorisée.

  • TITLE : Alias « Titre », utilisation « Ligne de texte unique »
  • PRICE : Alias « Prix », utilisation « Chiffre »
  • LINK : Alias « Lien », utilisation « Hyperlien »

Ajoutez le conteneur d’articles au template.

7. Assurez-vous que l’option « Afficher les bordures de la table » est activée dans la barre d’édition principale.

8. Cette partie est un peu plus complexe. Survolez la bordure de la table donnée en exemple ; lorsque les 2 petites icônes d’édition apparaissent, survolez l’icône de gauche en forme de flèche. Sélectionnez « Sélectionner » dans le menu déroulant.

9. Avec la table de l’exemple sélectionnée, faites un clic droit sur le conteneur d’articles sous « Utilisé dans l’e-mail » dans la fenêtre « Composants » et sélectionnez « Insérer ». Le conteneur d’articles devrait alors s’enrouler autour de la table de l’exemple. La mise en page de l’article doit TOUJOURS être à l’intérieur de la section « ITEM » (MAITEM).

���

Seul le contenu dans MAITEM se répétera pour chaque article.

10. Vous pouvez aussi aller dans le code source, couper la table d’exemple, juste en dessous de l’en-tête « Favoris hebdomadaires », insérer le conteneur d’articles et coller la table de l’exemple dans la section MAITEM dans le conteneur. Le code HTML qui en résulte se présente comme suit (partie droite de la table coupée sur l’image) :

11. À la place du contenu de l’exemple, nous devons utiliser les champs du conteneur d’articles :

  • Les attributs de l’image doivent rester, seule sa source doit être remplacée par le champ IMAGE et l’autre balise par le champ TITLE. Survolez l’image et sélectionnez « Propriétés » à partir du menu déroulant d’édition. Pour le type « Source » ~ITEM.IMAGE~, et pour l’autre texte ~ITEM.TITLE~

    ��

    Dans notre template, la hauteur doit être variable. Elle a été définie précédemment dans les propriétés du champ entre 150 px et 210 px. La valeur liée à la hauteur ne peut donc pas être définie dans le code source. Lorsque vous avez édité les propriétés de l’image, Selligent Campaign exigeait une taille d’image qu’il a définie par défaut.

    Cliquez sur l’onglet « Source » et cherchez l’image. Faites ctrl+F et tapez ITEM.IMAGE. Vous devriez voir la balise de l’image. Supprimez « width: 180px; height: 180px; » de la balise de style. La balise complète de l’image est comme suit :
    <img alt="~ITEM.TITLE~" class="mobile-100" style="display: block; border: none;" width="180" src="~ITEM.IMAGE~" />

La classe mobile-100 est utilisée pour rendre l’image réactive. La classe écrasera la largeur et la hauteur attribuées à l’image, mais pas les paramètres de style « width: 180px; height: 180px; », parce que le style aligné a une priorité plus élevée que les balises de style définies dans le haut de l’e-mail.

  • Dans le code source, trouvez le titre de l’exemple « Polariod cube » juste en dessous de l’image. Remplacez-le par ~ITEM.TITLE~ mais laissez la balise « a » (hyperlien) qui entoure le titre. Au lieu de le saisir, vous pouvez aussi faire un clic droit sur le champ dans l’onglet Composants sous « Utilisé dans l’e-mail » et sélectionner « Insérer ».
  • Faites de même pour le prix de l’exemple. Cherchez "&euro; 145.00" dans le code source juste en-dessous du titre et remplacez-le par ~ITEM.PRICE~.
  • Pendant l’importation du code HTML, chaque élément de l’article a reçu un capteur qui lui est lié à l’aide d’une URL fixe : l’image, le titre, le prix et le bouton « Plus d’infos ». Nous avons besoin d’un capteur avec une URL qui varie en fonction de l’article. Nous créerons un capteur pour l’article et nous l’utiliserons avec différents éléments de l’article.
    • Créez un nouveau capteur dans la fenêtre Capteurs, nommez-le « Produits hebdomadaires » et sélectionnez la première option « Envoyer le contact vers un emplacement externe ». Pour une URL, utilisez ~ITEM.LINK~. Le champ LINK du conteneur d’articles ne peut être utilisé que si le capteur est utilisé dans la section ITEM (MAITEM).


    • Trouvez l’ID du nouveau capteur créé dans la fenêtre Capteurs. Dans cet exemple, il s’agit de 206. Nous remplacerons l’URL des hyperliens existants par une nouvelle pour le capteur. Sélectionnez un élément de l’article et cliquez sur l’icône « Link » dans la barre d’édition principale. Modifiez l’URL en ~PROBE(206)~, 206 étant l’ID du nouveau capteur créé. Le « Protocole » doit être « <Other> » (« <Autre> »). Faites de même pour chaque élément de l’article : image, titre, prix, et bouton « Plus d’infos ».

En remplaçant l’URL du lien existant, nous nous assurons que tous les autres attributs du projet initial restent les mêmes pour ce lien (style, etc.).

    • Les capteurs originaux, maintenant inutilisés, peuvent être supprimés de la fenêtre Capteurs. Faites un clic droit dans la fenêtre (pas sur un capteur) et sélectionnez « Supprimer des capteurs inutilisés ». Il s’agit des liens restants dans cet exemple :


    • Dans le rapport, nous devrions voir le nom du capteur « Produits hebdomadaires » avec tous les clics de tous les articles. En définissant le champ TITLE du conteneur d’articles comme « Champ de rapport », le nom du capteur apparaît comme une liste déroulante dans le rapport, avec chaque titre d’article et les clics par article. Faites un clic droit sur le champ TITLE du conteneur d’articles sous « Utilisé dans cet e-mail » dans l’onglet Composants et sélectionnez « Définir comme champ de rapport ».

Faites en sorte que les articles couvrent plusieurs colonnes (COLCOUNT)

Nous devons afficher trois articles les uns à côté des autres sur plusieurs colonnes au lieu de les afficher les uns en dessous des autres. Pour ce faire, nous pouvons utiliser l’option « Disposition en tableau » sur le conteneur d’articles.

12. Survolez la bordure du conteneur d’articles 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.

13. Dans la fenêtre des Propriétés de la section, sélectionnez le deuxième onglet « Tableau ». Activez la case « Étendre ce conteneur sur plusieurs colonnes » et définissez les colonnes sur 3. Un tableau supplémentaire est créé autour des articles dans l’e-mail final, fractionnant les articles en 3 colonnes. Nous voulons que chaque article soit aligné sur le haut de chaque cellule du tableau généré. Sélectionnez « Haut » dans la liste déroulante « Align. vert. ».

Afin de préserver la réactivité de notre création, nous allons ajouter une classe et un style de tableau ainsi qu’une classe et un style de cellule au tableau généré :

  • Classe de tableau CSS : mobile-100
  • Style de tableau : width:600px;
  • Classe de cellule CSS : mobile-col
  • Style de cellule : width:180px;

Lorsque vous définissez ces propriétés, d’autres attributs sont ajoutés à la section MACONTAINER dans le code source. Le HTML du conteneur d’articles se présente maintenant comme suit (le tableau des articles dans MAITEM est réduit aux balises de tableau) :

<div id="MACONTAINER" macontenteditable="true" maparameter="WEEKLY_PRODUCTS" mashowalllanguages="FALSE" matable_colcount="3" matable_class="mobile-100" matable_style="width:600px;" matable_tdclass="mobile-col" matable_tdstyle="width:180px;" matable_halign="" matable_valign="Top" mahidediv="true">
<div id="MAHEADER" macontenteditable="true"></div>
<div id="MAITEM" macontenteditable="true">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-100" width="180">...</table>
</div>
<div id="MAFOOTER" macontenteditable="true"></div>
<div id="MANOMATCH" macontenteditable="true"></div>
</div>

14. Pour créer des espaces blancs de 30 px entre les cellules du tableau, nous pouvons ajouter des sections « Séparateur » au conteneur d’articles. Elles doivent être ajoutées dans le code source. Ces sections créeront des colonnes et des lignes supplémentaires dans le tableau généré, entre les cellules qui contiennent les articles.

  • Allez dans l’onglet « Source » et recherchez (ctrl+F) le DIV MAITEM.
  • Juste derrière DIV MAITEM et devant DIC MAFOOTER, saisissez les lignes suivantes :

<div id="MASEPTD" macontentEditable="true" mahidediv="true">
<img border="0" class="mobile-5" height="30" width="30" style="border: none; display: block;" src="YOURIMAGELOCATION/spacer.png" />
</div>
<div id="MASEPTR" macontentEditable="true" mahidediv="true">
<img border="0" class="mobile-5" height="30" width="30" style="border: none; display: block;" src="YOURIMAGELOCATION/spacer.png" />
</div>

Remplacez YOURIMAGELOCATION par l’emplacement de votre image (p. ex. http://SUBDOMAIN.emsecure.net/images/)

Lorsque ces sections de séparation de colonnes (MASEPTD) et de lignes (MASEPTR) seront ajoutées, Selligent Campaign ajoutera les classes « SEPTD » et « SEPTR » aux cellules supplémentaires (TD) dans l’e-mail généré. Vous pouvez utiliser ces classes pour donner un style aux cellules. Dans cet exemple, les classes ont déjà été définies dans le HTML original que vous avez importé pour préserver la réactivité de la création.

L’e-mail ressemble maintenant à ceci dans l’Éditeur :

Retour à l’exemple : Un template, étape par étape

 

Consultez la rubrique Conteneur d'articles pour une documentation plus détaillée sur le sujet.