Utiliser l'outil de création de campagnes HTML personnalisées

Avec ActiveCampaign, vous pouvez créer une campagne qui utilise un code HTML personnalisé. Cette option convient mieux à ceux qui souhaitent avoir plus de contrôle sur la conception de leur e-mail et qui sont à l'aise avec l'utilisation du langage HTML.

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

Prenez note

Notre Équipe Expérience Client n'est pas en mesure de vous aider à résoudre un code HTML personnalisé

Créer une campagne HTML personnalisée

1. Allez sur Campagnes et cliquez sur "Créer une campagne".
2. Sur la page Type de campagne :
   • Fournissez un nom pour votre campagne
   • Sélectionnez votre type de campagne
   • Cliquez sur le bouton "Suivant"
3. Sur la page de résumé de la campagne, fournissez les détails de votre campagne. Vous pouvez sauter cette étape et commencer à créer votre dessin. Cependant, vous devrez fournir les détails de la campagne avant d'envoyer votre e-mail.
4. Cliquez sur la flèche vers le bas à côté du bouton "Créer avec l'éditeur d'e-mail". Sélectionnez "HTML builder"
5. Sélectionnez un modèle (le cas échéant) ou cliquez sur le bouton "Start from Scratch".
6. Le générateur HTML s'ouvre. Ajoutez votre HTML personnalisé au constructeur sur la gauche. Au fur et à mesure que vous ajoutez du code, vous le verrez apparaître dans l'écran de prévisualisation situé dans le volet de droite.
7. Pour insérer un contenu personnalisé, un contenu conditionnel, une image, un flux RSS ou un 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.
8. Pour passer à l'éditeur visuel, cliquez sur l'icône de l'éditeur visuel.
   
   
   
   
9. Cliquez sur l'icône des paramètres (engrenage) pour mettre à jour votre objet, ajouter/mettre à jour le texte de l'en-tête, mettre à jour vos informations "De" et "Répondre à", et tester votre e-mail.
10. Cliquez sur le bouton "Suivant". Vous serez redirigé vers la page de résumé de la campagne.
11. Une fois que tout semble correct, vous pouvez cliquer sur "Envoyer maintenant" pour envoyer la campagne, cliquer sur le bouton "Planifier" pour envoyer la campagne à une date et une heure ultérieures, ou cliquer sur "Enregistrer et quitter" pour revenir à la campagne plus tard.

Conseils pour la 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 les problèmes ou à créer un code pour votre e-mail.

Mise en page

• largeur de conception de 650px ou moins
  La règle générale pour la taille des e-mails est de garder une largeur de 650px ou moins. Cela permet à l'e-mail de s'afficher correctement dans la plupart des clients d'e-mail et des configurations.
• Les mises en page simples sont les meilleures
  En matière de conception d'e-mails, la simplicité est la meilleure solution. Si vous essayez de faire un design compliqué, vous rencontrerez beaucoup de tests et de débogage avec des problèmes de clients d'e-mail. Si vous souhaitez réaliser une conception plus avancée, soyez prêt à utiliser de nombreux tableaux et à consacrer un temps raisonnable aux essais.
• 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 CSS flottantes et de mise en page n'auront pas un rendu correct sur tous les clients d'e-mail.
• Faites attention à la marge intérieure des cellules du tableau
  Outlook appliquera la marge intérieure de n'importe quelle cellule d'une ligne à toutes les cellules de la ligne. Cela pourrait entraîner des changements visuels que vous ne souhaitez pas. Le mieux serait d'essayer d'appliquer la même marge intérieure à toutes les cellules d'une rangée ou de placer un div ou un tableau interne (qui a une marge intérieure) dans la cellule ou vous souhaitez ajouter une marge intérieure. (Plus d'informations)
• Évitez d'utiliser des colspans="" dans vos tableaux
  Certains clients d'e-mail ne les prennent pas entièrement en charge et d'autres auront des problèmes d'affichage pour les autres cellules si vous avez un colspan.

CSS

• N'utilisez pas de feuilles de style externes
  Elles ne fonctionneront que dans quelques clients d'e-mail, et vous devez inclure toutes vos CSS en utilisant les CSS en ligne dans votre HTML. 
• N'utilisez pas de classes CSS - utilisez toujours le CSS en ligne 
  De nombreux clients d'e-mail ne prennent pas en charge les classes CSS. Au lieu de déclarer des classes CSS, vous devez utiliser le CSS en ligne. Un exemple serait
  contenu
  au lieu de
  contenu
• N'utilisez pas de raccourcis CSS
  CSS vous permet de définir des propriétés en groupes normalement. 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 d'e-mail ne tiennent pas compte des options CSS float et position. Essayez plutôt d'utiliser des tableaux.

Images et vidéo

• Utiliser les URL absolues des sources d'images 
  Au lieu d'inclure une image telle que (), vous devez inclure l'URL absolue du fichier telle que () 
• Utilisez toujours les tags alt () 
  La plupart des clients d'e-mail désactivent les images par défaut. Si vous n'avez pas de tags alt, vos abonnés ne verront qu'une boîte vide. Avec une tag alt, vos abonnés verront le texte que vous avez mis dans la tag. 
• N'intégrez pas de vidéos ou de Flash
  Intégrer directement des vidéos ou du Flash dans votre e-mail n'est pas une bonne idée. De nombreux clients d'e-mail 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 étant un spam/malveillant. Au lieu d'intégrer votre vidéo ou votre flash dans votre e-mail, faites une capture d'écran de ce à quoi ressemble la vidéo ou le 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. Alors que la plupart des clients d'e-mail prennent en charge les GIF animés, Outlook 2007 ne le fait pas. Les clients d'e-mail 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 épissées
  Si vous avez épissé une image plus grande et l'avez placée dans votre HTML en utilisant des cellules de tableau ou des tags img juste à côté les unes des autres, vous devrez faire des tests approfondis. Certains clients d'e-mail peuvent ajouter un espace supplémentaire entre vos images et donner un mauvais aspect à votre e-mail.
• Évitez d'utiliser des images pour faciliter votre mise en page
  Certaines personnes utilisent des images de 1 ou 2 pixels pour faciliter l'alignement des éléments dans leur mise en page. Certains clients d'e-mail ou filtres penseront qu'il s'agit d'une image de suivi de lecture ou d'ouverture potentielle et pénaliseront l'e-mail.
• Testez votre e-mail avec des images désactivées
  Comme la plupart des clients d'e-mail affichent les e-mails avec des images désactivées par défaut, vous devez vérifier le rapport de votre e-mail avec des images désactivées.
• Surveillez la taille de vos fichiers
  Comme pour la conception de sites web traditionnels, vous devez être attentif à la taille des fichiers d'image pour votre e-mail. Essayez de les maintenir à un niveau bas afin de garantir un téléchargement rapide pour vos abonnés.

Contexte

• Les images d'arrière-plan ne sont pas entièrement prises en charge
  Si vous utilisez une image d'arrière-plan, n'oubliez pas que certains clients d'e-mail ne les affichent pas. Si vous souhaitez toujours utiliser une image d'arrière-plan, utilisez les options d'arrière-plan HTML au lieu d'utiliser les CSS pour déclarer un arrière-plan.
• Couleurs d'arrière-plan du corps principal 
  De nombreux clients d'e-mail (tels que Gmail) n'affichent pas la couleur d'arrière-plan que vous avez définie pour le corps principal (tag). Si vous paramétrez une couleur d'arrière-plan dans la tag body, vous devez également disposer d'une div d'habillage 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 obtiendrez quelque chose de similaire.

Divers

• Ne mettez rien au-dessus du tag d'ouverture
  Tout ce que vous mettez au-dessus du tagsera probablement supprimé et inutilisé.
• N'incluez pas le javascript
  . Il est probablement supprimé dans la plupart des clients d'e-mail, et les filtres anti-spam peuvent le détecter comme un code malveillant.
• Évitez Microsoft Office
  l'éditeur HTML généré garantit presque toujours des problèmes. De plus, lorsque vous copiez et collez à partir d'Office, vous collerez leur formatage et vous aurez probablement des problèmes de conception.