Articles

HTML5 et vidéo dans les e-mails

Posted on

Article publié pour la première fois en octobre 2009, mis à jour en mai 2019

Le paysage du marketing par e-mail devenant de plus en plus concurrentiel, les spécialistes du marketing cherchent des moyens d’améliorer l’expérience des lecteurs. Après tout, si vos lecteurs apprécient vos e-mails, ils seront plus enclins à accepter votre offre, ce qui se traduira par des taux de conversion élevés (et une augmentation des revenus).

L’une des façons d’offrir une meilleure expérience à vos lecteurs est d’intégrer une vidéo HTML5 dans vos e-mails. L’utilisation de la vidéo dans le marketing est en hausse, et la combiner avec le marketing par email peut être une recette pour le succès.

Mise à jour pour 2019 : la meilleure utilisation de la vidéo dans les emails

Si vous avez été sur le circuit du marketing par email au cours des dernières années, vous comprenez probablement à quel point il a changé. D’abord, inciter les abonnés à s’inscrire à votre liste de courriels n’est pas aussi facile qu’avant. Et, une fois que vous avez réussi à en faire signer quelques-uns, les garder engagés peut être difficile.

C’est pourquoi la vidéo est devenue si populaire dans l’email.

Cependant, le HTML5 et l’email vidéo ne sont pas nouveaux dans le marketing par email. Les marketeurs ont essayé de marier ces deux éléments dans le passé, mais avec des résultats mitigés (désastreux sur certains clients de messagerie). Mais, avec les progrès de la technologie, on assiste à une résurgence de l’utilisation du HTML5 et de la vidéo dans les e-mails. Il est juste important de faire attention à la façon dont vous le faites, car cela pourrait ruiner votre campagne si ce n’est pas fait de la bonne façon.

Gardez les éléments suivants à l’esprit lorsque vous utilisez la vidéo dans vos emails.

Prévenir les lecteurs qu’il y a une vidéo dans l’email

Prévenir vos lecteurs que votre email contient une vidéo est un bon moyen d’augmenter vos taux d’ouverture. Faites-le en incluant le mot « vidéo » dans la ligne d’objet pour piquer l’intérêt de vos lecteurs.

Créer une série

Une excellente façon de garder les lecteurs engagés est de créer une série de vidéos pour votre email. Veillez simplement à ce qu’elle soit informative et divertissante. Une façon d’y parvenir est de montrer à vos abonnés ce qui se passe dans les coulisses de votre entreprise.

Créer des témoignages vidéo

Rien n’inspire plus l’action qu’un témoignage. Demandez à vos meilleurs clients s’ils peuvent vous fournir des témoignages vidéo. Ceux-ci peuvent être facilement réalisés sans aller dans un studio professionnel. Le marketing par email vidéo ne peut pas faire mieux que des témoignages vidéo réels et authentiques.

Mini tutoriels

Y a-t-il des questions que vos clients posent constamment ? Essayez de créer des tutoriels ou des vidéos éducatives autour de ces sujets et incluez-les dans vos emails. C’est un excellent moyen de montrer ce que votre produit peut faire et d’éduquer vos clients sur les meilleures pratiques.

Partager l’histoire de votre marque

Tout le monde aime une bonne histoire, et vos clients aimeraient connaître la vôtre. Intégrez une vidéo de l’histoire de votre marque dans vos emails, en particulier dans votre email de bienvenue. C’est un moyen simple et efficace d’établir une connexion avec votre public.

Avec autant de bons usages de la vidéo dans les emails, il n’y a aucune raison pour que vous n’adoptiez pas l’email marketing vidéo pour votre prochaine campagne. Heureusement, il n’est pas difficile d’intégrer la vidéo dans l’email.

Approches de la vidéo dans l’email

Ce n’est pas la première fois que nous examinons de près le support de la vidéo dans l’email. Dans nos recherches précédentes, nous cherchions une approche qui permettrait la vidéo dans les clients de messagerie qui la prennent en charge et une image de repli cliquable pour ceux qui ne le font pas (qui lirait alors la vidéo dans le navigateur).

Les résultats étaient décevants. Seul Mail supportait une lecture vidéo décente via Flash, et il n’y avait pas de moyen cohérent de fournir un contenu de repli pour les clients qui ne supportent pas Flash. Cela semble être le nœud du problème. Si la vidéo ne fonctionne pas, vous avez intérêt à avoir un plan de secours qui fonctionne bien pour tous les autres. Parce que la plupart des clients de messagerie dépouillent la balise <objet> utilisée pour insérer la vidéo, un plan de secours n’était pas disponible.

Une approche simple utilisant HTML5

En prenant comme point de départ le très cool Video for Everybody de Kroc Camen, il était clair que l’approche pour le navigateur serait très différente de celle pour les clients de messagerie.

La technique de Kroc fournissait plusieurs couches de support (vu ici). Ainsi, si le HTML5 <vidéo> n’est pas disponible, vous pouvez vous rabattre sur QuickTime ou Flash et presque toujours garantir que la vidéo fonctionnera. Parce que nous savons que Flash et QuickTime sont universellement bloqués dans les e-mails, ces options de sauvegarde peuvent être dépouillées pour rester simple.

En raison de la bataille des codecs mentionnée précédemment, vous devez fournir votre vidéo à la fois en H.264 (supporté par Apple et Google) et en Ogg Theora (supporté par Mozilla et Opera). Ce n’est pas le cas pour le courrier électronique. Le seul client de messagerie populaire qui utilise Gecko (le moteur de rendu de Firefox) est Thunderbird, qui choisit actuellement de ne pas afficher la vidéo HTML5. Ainsi, tout comme la solution de repli Flash/Quicktime, Ogg Theora est également exclu. Si un grand nombre de vos destinataires cliquaient sur la version web de vos emails, alors vous pourriez envisager de le rajouter pour tous les abonnés utilisant Firefox.

Le code final

Après avoir supprimé toutes les options vidéo rendues superflues par l’email, voici le code final qui a donné les meilleurs résultats.

Comme vous pouvez le voir, vous fournissez une image de repli (qui est commodément chargée comme l’affiche du film avant de jouer pour les clients de messagerie qui prennent en charge la vidéo) dans la balise <video> ainsi que la largeur et la hauteur de la vidéo. Dans la balise <video>, vous appelez la vidéo encodée en H.264 à l’aide de la balise <source>, en n’oubliant pas de référencer complètement le fichier sur votre serveur.

Enfin, ajoutez le contenu de sauvegarde que vous souhaitez afficher dans tout client de messagerie qui ne prend pas en charge le HTML5 à l’intérieur des balises <video>. Il s’agirait normalement d’une capture d’écran cliquable de la vidéo qui jouerait la vidéo dans le navigateur lorsqu’on clique dessus.

Les résultats

Travaillant sur un Mac, mon premier arrêt a été Apple Mail. Le rendu de la vidéo était parfait. Elle a également été jouée à merveille sur le client de messagerie de l’iPhone.

Je me suis ensuite tourné vers les clients de messagerie populaires basés sur le Web : Yahoo !, Gmail et Hotmail. Malheureusement, il semble que les clients de messagerie basés sur le Web choisissent de désactiver la lecture des vidéos HTML5. Bien que cela soit décevant, les nouvelles ne sont pas toutes mauvaises. À la place de la vidéo, j’ai pu afficher le contenu de secours fourni, en l’occurrence une image de repli cliquable permettant de créer un lien vers la vidéo sur mon site Web. Cette possibilité n’était jamais disponible avec l’une des tentatives précédentes de véritable vidéo dans les courriels et constituait une amélioration bienvenue.

En poursuivant mes tests, j’ai obtenu les mêmes résultats sur les clients de messagerie de bureau sur le PC. La vidéo n’a pas été lue, mais l’option de repli est apparue dans chaque client que j’ai testé. Voici les résultats complets :

.

.

Clients de messagerie de bureau Résultat
Apple Mail La vidéo joue
Entourage 2008 La vidéo joue
Lotus Notes 6, 7 et 8.5 ✘ Contenu de Fallback affiché
Outlook 2007 ✘ Contenu de Fallback affiché
Outlook 2003 ✘ Contenu de Fallback affiché
Thunderbird ✘ Contenu de rappel affiché
Windows Mail ✘ Contenu de rappel affiché
Clients de messagerie basés sur le Résultat
AOL Web ✘ Contenu de repli affiché
Gmail ✘ Contenu de repli affiché
Hotmail ✘ Contenu de repli affiché
MobileMe Lecture de la vidéo
MySpace ✘ Contenu de repli affiché
Clients de messagerie mobiles Résultat
iPhone La vidéo joue

Voir en action

Pour vous donner une idée du rendu de la vidéo HTML5 dans quelques clients de messagerie populaires, voici quelques captures d’écran issues de mes tests.

Apple Mail 4

Lorsque j’ai ouvert le courriel dans Apple Mail, l’image de repli que j’ai spécifiée dans l’attribut poster s’est affichée pendant que la vidéo commençait à être diffusée en continu. Après quelques secondes, les contrôles vidéo sont apparus et j’ai pu voir la progression du chargement du film et commencer à le regarder.

iPhone 3.1.2

L’iPhone ne prend pas en charge le streaming vidéo dans le navigateur ou le client de messagerie et, au lieu de cela, fournit un message clair indiquant que cliquer sur l’image de l’affiche vous permettra de regarder le film. Cliquer sur l’image permet ensuite de charger le film dans le lecteur QuickTime de l’iPhone. À la fin du film, vous êtes ramené à l’e-mail.

Outlook 2007

Comme tous les clients de messagerie qui ne prennent pas en charge la vidéo HTML5, Outlook 2007 affiche le contenu de repli que nous spécifions dans la balise vidéo. Cela peut être n’importe quel HTML que vous voulez et n’est pas limité à une seule image. Dans la plupart des cas, il s’agirait probablement d’une capture d’écran du film et peut-être d’une icône de lecture superposée pour inciter le destinataire à cliquer sur l’image et à visionner la vidéo dans son navigateur.

Le résultat était le même pour tous les clients de messagerie qui ne prenaient pas en charge la vidéo HTML5, ce qui en fait un moyen pratique d’offrir une expérience cohérente à chaque destinataire.

Pouvez-vous intégrer la vidéo dans Campaign Monitor ?

En tant que client de Campaign Monitor, pouvez-vous intégrer efficacement la vidéo HTM5 dans les e-mails ? Oui, et c’est assez facile.

Dans notre nouveau constructeur d’email par glisser-déposer facile à utiliser, cliquez sur le bloc de contenu vidéo et faites-le glisser à l’endroit où vous souhaitez intégrer une vidéo dans votre email. Ensuite, ajoutez l’URL de votre vidéo, comme le montre l’exemple ci-dessous :

Source : Campaign Monitor

Ces deux étapes simples sont tout ce qu’il faut pour intégrer une vidéo HTML5 dans votre courriel.

Devriez-vous utiliser cette technique ?

Cette approche est probablement la meilleure option disponible pour inclure une vidéo dans un courriel, car vous pouvez fournir de manière fiable un contenu de repli qui fonctionne dans chaque client de messagerie. La limitation évidente est que, pour le moment, elle ne fonctionne que pour vos abonnés utilisant des produits liés à Apple.

Prendre une décision sur la pertinence de cette approche revient vraiment à votre liste d’abonnés. Par exemple, 50 % de notre propre liste de clients ouvre notre newsletter mensuelle en utilisant l’un des clients de messagerie pris en charge (vous pouvez le découvrir pour votre propre liste en utilisant nos rapports pratiques sur les clients de messagerie). Si nous voulions inclure une vidéo dans un e-mail, cette technique signifierait que la moitié de nos abonnés peuvent regarder la vidéo directement dans leur client de messagerie, et l’autre moitié verra une image de repli parfaitement acceptable sur laquelle ils peuvent cliquer pour la regarder dans leur navigateur.

Wrap up

Utiliser une vidéo HTML5 dans un e-mail n’est pas du tout difficile, surtout si vous êtes un client de Campaign Monitor. Gardez ces approches et les résultats des tests à l’esprit la prochaine fois que vous envisagerez d’ajouter de la vidéo à vos campagnes.

Pour en savoir plus sur la façon dont vous pouvez utiliser la vidéo dans les e-mails, consultez notre article Comment utiliser la vidéo dans le marketing par e-mail.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *