Utiliser le générateur de campagnes HTML personnalisé

Avec ActiveCampaign, vous pouvez créer une campagne utilisant du code HTML personnalisé. Cette option est idéale pour ceux qui souhaitent avoir plus de contrôle sur la conception de leurs e-mails et qui sont à l'aise avec l'utilisation du HTML.

Dans cet article, vous apprendrez comment accéder au générateur HTML et recevrez des conseils sur les meilleures pratiques en matière de conception.

Remarque

• Notre équipe Customer Experience n'est pas en mesure de vous aider à résoudre les problèmes liés au code HTML personnalisé
• Les iframes ne sont pas pris en charge dans les campagnes e-mail

Créer une campagne HTML personnalisée

1. Accédez à E-mail dans le menu de gauche.
2. Cliquez sur « Partir de zéro à la place. »
3. Sur la page Type de campagne :
   • Saisissez un nom pour votre campagne.
   • Sélectionnez votre type de campagne
   • Cliquez sur le bouton « Suivant ».
4. Sur la page Récapitulatif de la campagne, renseignez les détails de votre campagne. Veuillez noter que vous pouvez ignorer cette étape et commencer à créer votre design. Cependant, vous devrez renseigner les détails de la campagne avant d'envoyer votre e-mail.
5. Cliquez sur la flèche vers le bas à côté du bouton « Créer avec le concepteur d'e-mails ». Sélectionnez « Générateur HTML ».
6. Sélectionnez un modèle (le cas échéant) ou cliquez sur le bouton « Partir de zéro ».
7. Le générateur HTML s'ouvrira. Ajoutez votre HTML personnalisé dans le générateur à gauche. Au fur et à mesure que vous ajoutez du code, vous le verrez s'afficher dans l'écran d'aperçu du panneau de droite.
8. Pour insérer du contenu personnalisé, du contenu conditionnel, une image, un flux RSS ou du contenu provenant d'une URL, cliquez sur l'option « Insérer » puis sélectionnez l'élément que vous souhaitez ajouter. Ensuite, suivez les instructions pour ajouter cet élément.
9. Pour passer à l'éditeur visuel, cliquez sur l'icône de l'éditeur visuel.
   
   
   
10. Cliquez sur l'icône Paramètres (engrenage) pour mettre à jour votre ligne d'objet, ajouter ou modifier le texte de pré-en-tête, mettre à jour vos informations « De » et « Répondre à », et tester votre e-mail.
11. Cliquez sur le bouton « Suivant ». Vous serez redirigé vers la page Résumé de la campagne.
12. Une fois que tout vous semble correct, vous pouvez cliquer sur « Envoyer maintenant » pour envoyer la campagne, cliquer sur le bouton « Planifier » pour envoyer à une date et une heure ultérieures, ou cliquer sur « Enregistrer et quitter » pour revenir à la campagne plus tard.

Conseils de conception HTML

Vous trouverez ci-dessous des conseils généraux pour l'utilisation du générateur HTML. Pour rappel, notre équipe Customer Experience n'est pas en mesure de vous aider à résoudre les problèmes liés à votre code ou à le développer pour votre e-mail.

Mise en page

• Largeur de conception de 650 px ou moins
  La règle générale pour la taille des e-mails est de ne pas dépasser 650 px en largeur. Cela permet à l'e-mail de s'afficher correctement dans la plupart des clients de messagerie et des configurations.
• Les mises en page simples sont les meilleures
  En matière de conception d'e-mails, la simplicité est de mise. Si vous essayez de réaliser une conception complexe, vous devrez effectuer de nombreux tests et résoudre de nombreux problèmes liés aux clients de messagerie. Si vous souhaitez réaliser une conception plus avancée, préparez-vous à utiliser de nombreux tableaux et prévoyez suffisamment de temps pour les tests.
• Utilisez des tableaux HTML de base
  Vous devrez utiliser des tableaux HTML standard pour créer la mise en page générale. Les techniques de mise en page et de flottement CSS ne s'afficheront pas correctement dans tous les clients de messagerie.
• Faites attention au rembourrage des cellules de tableau
  Outlook appliquera le rembourrage de n'importe quelle cellule d'une ligne à toutes les cellules de cette ligne. Cela pourrait entraîner des modifications visuelles indésirables. Il serait préférable d'appliquer le même rembourrage à toutes les cellules d'une ligne, ou de placer une div ou un tableau interne (avec rembourrage) dans la cellule à laquelle vous souhaitez appliquer un rembourrage. (Plus d'informations)
• Évitez d'utiliser colspans="" dans vos tableaux
  Certains clients de messagerie ne prennent pas entièrement en charge les colspans, et d'autres peuvent rencontrer des problèmes d'affichage pour les autres cellules.

CSS

• N'utilisez pas de feuilles de style externes
  Elles ne fonctionneront que dans quelques clients de messagerie, et vous devez inclure tout votre CSS en utilisant du CSS en ligne dans votre HTML.
• N'utilisez pas de classes CSS — utilisez toujours du CSS en ligne
  De nombreux clients de messagerie ne prennent pas en charge les classes CSS. Au lieu de déclarer des classes CSS, vous devez utiliser du CSS en ligne. Par exemple, <div style="color:#cccccc;">content</div> au lieu de <div class="cssclassa">content</div>
• N'utilisez pas de raccourcis CSS
  Le CSS vous permet normalement de définir des propriétés en groupes. Par exemple, style="font: 12px, Arial". Au lieu de regrouper ces attributs, vous devez définir chaque partie individuellement. Par exemple, style="font-size:12px; font-family:Arial"
• Évitez d'utiliser les options CSS float ou position
  Certains clients de messagerie ignorent à la fois les options CSS float et position. Essayez plutôt d'utiliser des tableaux.

Images et vidéos

• Utilisez des URL sources d'images absolues
  Au lieu d'inclure une image telle que (<img src= "img.gif">), vous devez inclure l'URL absolue du fichier, par exemple (<img src= "http://site.com/img.gif">)
• Utilisez toujours des balises alt (<img src="http://site.com/img.gif" alt="Company ABC">)
  La plupart des clients de messagerie désactivent les images par défaut. Sans balises alt, vos abonnés ne verront qu'une case vide. Avec une balise alt, vos abonnés verront le texte que vous avez inséré dans la balise.
• N'intégrez pas de vidéos ni de Flash
  Intégrer directement des vidéos ou du Flash dans votre e-mail n'est pas recommandé. De nombreux clients de messagerie ne prennent pas en charge ce type de code, et de nombreux programmes de détection des spams et des virus signaleront votre e-mail comme spam ou malveillant. Plutôt que d'intégrer votre vidéo ou votre animation Flash directement dans votre e-mail, faites une capture d'écran de la vidéo ou du lecteur Flash et intégrez-la à la place. Vous pouvez faire en sorte que la vidéo ou l'animation Flash s'ouvre dans le navigateur de l'utilisateur lorsqu'il clique dessus.
• Les GIF animés ne sont pas entièrement pris en charge
  Demandez-vous si une animation est vraiment nécessaire dans votre e-mail. Bien que la plupart des clients de messagerie prennent en charge les GIF animés, Outlook 2007 ne le fait pas. Les clients de messagerie qui ne prennent pas en charge les GIF animés afficheront probablement la première image de votre séquence d'animation.
• Soyez prudent avec les images découpées
  Si vous avez une image de grande taille découpée et intégrée dans votre HTML à l'aide de cellules de tableau ou de balises img placées côte à côte, vous devrez effectuer des tests approfondis. Certains clients de messagerie peuvent ajouter un espace supplémentaire entre vos images et nuire à l'apparence de votre e-mail.
• Évitez d'utiliser des images pour structurer votre mise en page
  Certaines personnes utilisent des images d'1 ou 2 pixels pour aligner des éléments dans leur mise en page. Certains clients de messagerie ou filtres peuvent l'interpréter comme une image de suivi des lectures ou des ouvertures et pénaliser l'e-mail.
• Testez votre e-mail avec les images désactivées
  La plupart des clients de messagerie affichent les e-mails avec les images désactivées par défaut. Il est donc indispensable de vérifier l'apparence de votre e-mail dans cette configuration.
• Surveillez la taille de vos fichiers
  Comme en conception web traditionnelle, il est important de prêter attention à la taille des fichiers image utilisés dans votre e-mail. Essayez de les maintenir à un niveau réduit afin de garantir un téléchargement rapide pour vos abonnés.

Arrière-plan

• Les images d'arrière-plan ne sont pas entièrement prises en charge
  Si vous utilisez une image d'arrière-plan, gardez à l'esprit que certains clients de messagerie ne l'afficheront pas. Si vous souhaitez tout de même utiliser une image d'arrière-plan, privilégiez les options HTML dédiées plutôt que le CSS pour la déclarer.
• Couleurs d'arrière-plan sur l'ensemble du corps
  De nombreux clients de messagerie (tels que Gmail) n'affichent pas la couleur d'arrière-plan définie pour le corps principal (balise <body>). Si vous définissez une couleur d'arrière-plan dans la balise body, vous devriez également inclure une div englobante avec une couleur d'arrière-plan qui entoure votre contenu. Ainsi, même si la couleur d'arrière-plan du corps n'est pas prise en charge, vous disposerez d'un rendu similaire.

Divers

• Ne placez rien au-dessus de la balise d'ouverture <body>
  Tout ce que vous placez au-dessus de la balise body sera probablement supprimé et ignoré.
• N'incluez pas de JavaScript
  Il est susceptible d'être supprimé par la plupart des clients de messagerie, et les filtres anti-spam peuvent le détecter comme un code malveillant.
• Évitez Microsoft Office
  Le code HTML généré entraînera presque inévitablement des problèmes. De plus, lorsque vous copiez-collez du contenu depuis Office, vous importez également sa mise en forme, ce qui risque de provoquer des problèmes de design.