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 Expérience client n'est pas en mesure de vous aider à résoudre les problèmes liés au code HTML personnalisé
• Les iframes ne sont pas prises en charge dans les campagnes e-mail

Créer une campagne HTML personnalisée

1. Accédez à Campagnes dans le menu de gauche.
2. Cliquez sur « Partir de zéro à la place ».
3. Sur la page Type de campagne :
   • Donnez un nom à 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. Notez que vous pouvez ignorer cette étape et commencer à créer votre design. Cependant, vous devrez fournir 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 l'éditeur 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 code 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 volet 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/mettre à jour 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 Expérience client n'est pas en mesure de vous aider à résoudre des problèmes ou à créer du code pour votre e-mail.

Mise en page

• Largeur de conception de 650 px ou moins
  La règle générale concernant la taille des e-mails est de maintenir une largeur de 650 px ou moins. 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 un design complexe, vous rencontrerez de nombreux problèmes de test et de débogage liés aux clients de messagerie. Si vous souhaitez réaliser une conception plus avancée, soyez prêt à utiliser de nombreux tableaux et à consacrer un temps raisonnable aux 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 applique le rembourrage de n'importe quelle cellule d'une ligne à toutes les cellules de cette ligne. Cela pourrait entraîner des modifications visuelles que vous ne souhaitez pas. Il serait préférable d'appliquer le même rembourrage pour toutes les cellules d'une ligne ou de placer un div ou un tableau interne (avec rembourrage) dans la cellule à laquelle vous souhaitez appliquer un rembourrage. (Plus d'informations)
• Évitez d'utiliser colspan="" 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. Vous devez inclure l'ensemble de votre CSS en utilisant du CSS inline 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. Un exemple serait <div style="color:#cccccc;">content</div> au lieu de <div class="cssclassa">content</div>
• N'utilisez pas de raccourcis CSS
  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. Tel que style="font-size:12px; font-family:Arial"
• Évitez d'utiliser les options CSS float ou position
  Certains clients de messagerie ignorent les options CSS float et position. Essayez plutôt d'utiliser des tableaux.

Images et vidéo

• 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. Si vous n'avez pas de balises alt, vos abonnés ne verront qu'une case vide. Avec un attribut alt, vos abonnés verront le texte que vous avez saisi dans la balise.
• N'intégrez pas de vidéos ou de Flash
  Intégrer des vidéos directement ou du Flash dans votre e-mail n'est pas une bonne idée. 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. Au lieu d'intégrer votre vidéo ou votre animation Flash dans votre e-mail, faites une capture d'écran de la vidéo ou du lecteur Flash et intégrez-la. Vous pouvez faire en sorte que la vidéo ou le flash s'ouvre dans leur navigateur lorsqu'ils cliquent dessus.
• Les GIF animés ne sont pas entièrement pris en charge
  Demandez-vous si vous avez besoin d'une animation 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.
• Faites attention aux images découpées
  Si vous avez une image de grande taille découpée et insérée dans votre HTML à l'aide de cellules de tableau ou de balises img placées les unes à côté des autres, vous devrez effectuer des tests approfondis. Certains clients de messagerie peuvent ajouter un espace supplémentaire entre vos images et donner un mauvais aspect à 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 considérer cette image comme un potentiel pixel 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. Vous devez donc vérifier l'apparence de votre e-mail lorsque les images sont désactivées.
• Surveillez la taille de vos fichiers
  Comme pour la conception web traditionnelle, vous devez être attentif à la taille des fichiers image de votre e-mail. Essayez de les garder à une taille réduite 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, sachez que certains clients de messagerie ne les afficheront pas. Si vous souhaitez tout de même utiliser une image d'arrière-plan, utilisez les options d'arrière-plan HTML plutôt que d'utiliser le CSS pour déclarer un arrière-plan.
• Couleurs d'arrière-plan du corps entier
  De nombreux clients de messagerie (tels que Gmail) n'affichent pas la couleur d'arrière-plan que vous définissez pour le corps principal (balise <body>). Si vous définissez une couleur d'arrière-plan dans la balise body, vous devez également avoir un div englobant 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 aurez quelque chose de 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 inutilisé.
• N'incluez pas de javascript
  Il est probable qu'il soit 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é causera presque inévitablement des problèmes. De plus, lorsque vous copiez et collez du contenu depuis Office, vous importez également sa mise en forme, ce qui peut entraîner des problèmes de conception.