Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS

Transcription

1 Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS

2 QUI EST MAXIWEB? Maxiweb est une agence digitale pas comme les autres. Un seul objectif : faire de vous le ROI Pôle Consulting Pôle Création Pôle Acquisition Accompagnement stratégique pour toute votre communication digitale Design, élaboration et intégration de supports performants pour tous formats et leviers Opérations de collecte de leads qualifiés en fonction des objectifs de nos clients 2

3 LEVIERS CONCERNÉS PAR L OPTIMISATION Moteurs de recherche Display Partenariats Mailing Social Media Coregistration Kit , bannières et landing page optimisées Offre avant abandon Display Retargeting Retargeting Formulaire Recovery SOURCES DE TRAFIC OPTIMISATION DE LA CONVERSION 3

4 VOS GARANTIES TRANSPARENCE Sources Statistiques Résultats IMPLICATION Pilotage quotidien Bilan hebdomadaire Analyse, conseils et suivi PERFORMANCE Atteinte des objectifs Résultats toujours croissants Toujours plus de ROI 4

5 POURQUOI OPTIMISER LES VISUELS 5

6 ATTENTION Les recommandations présentées ici présentent notre point de vue, développé à partir de nombreuses expériences, et ne sont valables que pour le marché de l affiliation telle que vous pouvez la travailler avec une agence de webmarketing à la performance. Concernant les autres marchés, type affiliation intra-infopreneurs, ces recommandations ne sont pas forcément adaptées. 6

7 DEUX INTÉRÊTS DIFFÉRENTS ANNONCEUR A VOLUME OBTENU RESEAU R Opération non rentable Opération rentable Rentabilité Annonceur CPL < Valeur par contact (ou ARPU) Rentabilité Réseau ecpm > 2 7

8 IL FAUT FAIRE UN CHOIX A R A R A R Rentabilité de l Annonceur ecpm du Réseau à donc Volume à Insatisfaction A, R A Satisfaction A, R R A court terme Maintien Maintien Coupure A long terme Coupure Maintien Choix effectué Qualité sans volume Qualité et volume Volume sans qualité 8

9 FORMULE DE L ECPM ecpm = Tarif x Taux d ouverture x Taux de clic x Taux de transformation ecpm = 1,25 x 6% x 6% x 60% = 2,70 ecpm = 2,00 x 5% x 5% x 30% = 1,50 ecpm = 5,00 x 3% x 2% x 20% = 0,60 9

10 AGIR SUR L ECPM CPL Tarif en accord avec le marché Kit Message impactant Offre à valeur ajoutée Accent sur mal-être ou bénéfice ecpm = Tarif x Taux d ouverture x Taux de clic x Taux de transformation Délivrabilité et ouverture Objet accrocheur Sender intéressant Qualité du codage du kit Landing page Même identité visuelle Réassurance Champs peu nombreux Pré-remplissage 10

11 POUVEZ-VOUS CONTINUER À PERDRE 42% DE VOTRE AUDIENCE? 82% 42% 41% 34% des gens utilisent leurs portables pour regarder leurs s des inscrits suppriment les s qui ne s affichent pas correctement sur le téléphone des s sont ouverts sur un dispositif mobile des consommateurs ont déjà acheté via mobile ET POURTANT, 25% DES MARKETEURS SEULEMENT OPTIMISENT LEUR POUR LE MOBILE 11

12 COMMENT OPTIMISER LE KIT 12

13 - Règles de codage HTML Bonjour [prenom], VISUELS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam, ante nec dignissim bibendum, turpis nisl vehicula justo, a interdum urna metus non libero. Nullam sed mi at mi dapibus finibus nec Image (ou non ) vel velit. Suspendisse ante lorem, tristique sit amet erat ac, vehicula volutpat felis Nullam sed mi at mi dapibus finibus nec Donec vel auctor ipsum. Vestibulum sed est vitae diam vehicula imperdiet. Ut sodales tincidunt sem, in ornare ex lacinia interdum. Vivamus pharetra dapibus ante ut euismod. Duis in sagittis leo, molestie tristique massa. Proin posuere pretium leo, a maximus sem vulputate ut. Etiam magna lorem, ornare nec felis non, faucibus dictum metus. Curabitur sit amet dui mi. Nullam sed mi at mi dapibus finibus nec Les s type utilisés sur vos listes ou celles de vos partenaires ne sont pas recommandées : les grands médias refusent pour la plupart de les diffuser, et des AB tests avec certains de nos clients nous ont permis de constater un plus grand taux de conversion s envoyés / leads, et leads / ventes avec des s visuels, plus adatées à ce qu ont l habitude de recevoir les internautes «lambda», non inscrits sur des listes d infopreneurs. Il est donc recommandé pour notre marché d utiliser des s visuels. 13

14 - Règles de codage HTML VISUELS 14

15 - Règles de codage HTML EXEMPLES DE MISE EN PAGE 15

16 - Règles de codage HTML ASTUCES Un kit trop beau ne cliquera pas Un kit trop long ne cliquera pas L internaute doit comprendre en un coup d œil ce dont il s agit 16

17 - Règles de codage HTML RÈGLES À SUIVRE Attention, ces règles ne sont pas une vérité absolue, mais un condensé de recommandations reçues et émises de différents eurs sur le marché du web. 1. Dimension et poids 600 px de large maximum pour toucher efficacement Gmail, AOL et Yahoo, alors 530 px max. 800 px de long maximum (hors texte en petit en dessous) 80 Ko de poids total des images. 150 Ko de poids maximum 2. Règles basiques Le code doit commencer par <html> et finir par </html> En début de code, placez un <!DOCTYPE HTML PUBLIC> L encodage du fichier HTML doit respecter celui donné dans l entête du code HTML Le charset doit être défini dans la balise <meta> Le corps du message doit être intégré dans <body></body> Pensez à la balise <Title> 17

18 - Règles de codage HTML RÈGLES À SUIVRE 3. Structure Utilisez des tableaux : <table><tr><td> etc... </td></tr></table> Astuces Editez la taille de chaque cellule, et non du tableau dans son intégralité. Utilisez la largeur <width> dans chaque balise <td> et non pas dans <table>. Utilisez un tableau «conteneur» pour la couleur d arrière plan. Evitez les espaces blancs non nécessaires dans vos cellules. A eviter Les balises HTML, Body, Media sont inutiles Les commentaires sont à éviter Pas de taille négative dans les attributs de la balise font Pas de polices de taille extrême ( < 24px, et < 8px) Les balises span, coldspan, div, p, script, etc sont à proscrire Les liens miroir et de désabonnement : le réseau est en charge de les inclure. 18

19 - Règles de codage HTML RÈGLES À SUIVRE 4. Pas de CSS classique Gmail par exemple supprime tout lien vers du CSS. Il faut donc que le CSS soit «inline», c est-à-dire imbriqué dans les balises. Il faut donc que chaque balise du kit comporte les paramètres de style qui lui sont associés. Il existe des outils pour placer le contenu CSS en inline : par exemple, Pr er. Pas de CSS, java, avascript, ActiveX, ASP, PHP, caches ou frames, ni Dynamic HTML. 5. Le plus important doit être sur les 300 premiers pixels Les outils de prévisualisation de nombreux logiciels et webmails n affichent que la partie haute de l . Assurez-vous que votre message soit explicite dans les 300 pixels du haut de votre . 19

20 - Règles de codage HTML RÈGLES À SUIVRE 6. Règles pour les images partie 1/2 Par défaut, les images ne s afficheront pas. Evitez d utiliser une seule grosse image, découpez-la en plusieurs parties. Créez vos images en.gif ou en.jpg (jamais en png). Il faut les enregistrer en mode RVB et non en CMJN. Réglez la hauteur et la largeur de vos images afin que votre garde sa structure même si les images ne s affichent pas. Testez votre design dans une fenêtre de prévisualisation, en plein écran et sans les images, et ajustez votre structure en conséquence. Pas d image en fond, de cellule, il faut utiliser une couleur de fond Utilisez une couleur d arrière plan à la fois dans le body et dans vos tableaux, afin de vous assurer que votre couleur s affiche dans tous les webmails et logiciels. 20

21 - Règles de codage HTML RÈGLES À SUIVRE 6. Règles pour les images partie 2/2 Alt tags, avec les avantages internautes. ou les descriptifs Les Alt doivent idéalement être Styled Alt, afin d être davantage perçues. Pour vos destinataires utilisant Gmail, il est important de se souvenir que Gmail affiche le texte du début de votre dans la ligne de prévisualisation. Si le début de votre est une image, c est le «alt tag» qui sera affiché. Si des lignes blanches apparaissent notamment sur Outlook, c est qu il manque la balise style= display:block. <img src=monimage.jpg alt= texte width= x height= y border= O style= display:block > Le call to action doit être en HTML, afin de s afficher même lorsque les images ne le sont pas. Utilisez l outil Bulletproof buttons pour optimiser. 21

22 - Règles de codage HTML RÈGLES À SUIVRE 7. Ratio 50% texte, 50% image Une image en tant que kit mail est une aberration. Mettez autant de texte que possible : tout le texte doit être écrit «en dur», en HTML sur fond uni, et non pas en tant qu image. Ajouter un long paragraphe de texte sous le kit permet d augmenter le ratio texte/image et donc la délivrabilité 8. Kit responsive 50% des s sont ouverts sur un autre terminal que l ordinateur! Assurez-vous que l apparait correctement sur un terminal mobile. 9. Tests Avant d envoyer le kit , assurez-vous systématiquement qu il apparait correctement sur Gmail et Outlook, version ordinateur et mobile. 10. Maxiweb propose un service de création de kit + landing page. 22

23 COMMENT OPTIMISER LA LANDING PAGE 23

24 - Pré-remplissage LANDING PAGE 24

25 - Pré-remplissage LANDING PAGE 25

26 - Pré-remplissage EXEMPLE DE MISE EN PAGE 26

27 - Pré-remplissage COHÉRENCE DE L IDENTITÉ VISUELLE OFFERT Contenu du ebook 1 Contenu du ebook 2. Envie de XXX? Prénom Recevoir par maintenant Paul Phrase opt-in Cliquez ici Découvrez le guide gratuit.. 27

28 - Pré-remplissage PRÉ-REMPLISSAGE Pré-remplissage Technique qui permet de pré-remplir les champs du formulaire grâce aux paramètres entrés dans l'url : les données du formulaire s'adaptent et sont déjà remplies avec les informations Qui pré-remplit? L annonceur se charge de créer une landing page avec une url qui contient des XXX et qui met à jour les contenus des champs. Le réseau remplacera les XXX par des variables remplies automatiquement selon le destinataire de l Caractéristiques Augmente la transformation clic-lead Augmente l implication de l internaute, qui reçoit un message personnalisé Il faut s assurer que les données pré-remplies du réseau sont correctes. Ainsi, il ne faut pré-remplir que le nom, prénom, ; jamais le téléphone! 28

29 - Pré-remplissage PRÉ-REMPLISSAGE Exemple Technique Il s agit de PHP. Une partie du code doit ressembler à ça pour le champ par exemple : <input text="text" name="mail" size="38" value="<?php $_POST[ ']?>"> Pour aller plus loin Cf cours de Open Classrooms sur le PHP et le pré-remplissage 29

30 POUR RÉSUMER Tarif juste Tarif bas Mauvais codage Créa non attractive Landing page plate Le réseau pourri fournit du volume Bon codage, responsive Créa attractive Le réseau qualitatif fournit du volume Landing page optimisée 30

31 Christopher FABRE Dirigeant MAXIWEB 26 rue George Sand Paris 31