Comment préparer une bannière HTML5 pour l’ad server

Une bannière peut paraître parfaite à l’écran et être tout de même refusée par l’ad server. Le motif est presque toujours le même : un détail technique que personne n’a vérifié. Ce guide passe en revue, dans l’ordre, ce qu’il faut contrôler avant d’envoyer une bannière HTML5.

Avant de commencer

Demandez à la personne qui publie (ou consultez la documentation de la plateforme de destination) trois choses : quels formats elle accepte, combien pèse au maximum chaque élément et si elle autorise les ressources externes. Ces trois données déterminent tout le reste, et chaque plateforme a les siennes.

Le paquet : un .zip avec un index.html à la racine

La bannière est livrée sous forme de fichier .zip. À l’intérieur, le index.html doit se trouver à la racine (et non dans un dossier), et les ressources, comme les images ou les polices, sont placées à côté de lui ou dans des sous-dossiers. Une erreur très fréquente consiste à compresser le dossier entier au lieu de son contenu : l’ad server ouvre le .zip, ne trouve pas le index.html à la racine et le rejette.

Si vous avez plusieurs formats ou langues, chaque combinaison est une pièce distincte avec son propre .zip. BannerMotion les empaquette ainsi par défaut (« Un .zip par pièce ») et peut aussi regrouper les langues dans des dossiers (« Un .zip par format »).

La taille déclarée

La bannière indique sa taille avec une balise meta dans le <head>. La plateforme la lit pour savoir comment l’afficher et vérifier qu’elle correspond à l’emplacement acheté.

<meta name="ad.size" content="width=300,height=250">

La taille de la balise, celle du conteneur de la bannière et celle de l’emplacement acheté doivent correspondre au pixel près. Une bannière de 300×250 placée dans un emplacement de 300×600 est une erreur de production, et non de la plateforme.

Le clickTag : le lien de destination

Le lien de destination n’est pas écrit en dur dans la bannière. Celle-ci lit une variable nommée clickTag, que la plateforme définit, et l’utilise lorsqu’on clique. Ainsi, l’ad server peut compter chaque clic avant de rediriger vers votre page.

<script>
  var clickTag = "https://votre-site.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

Trois détails souvent oubliés : la variable doit s’écrire exactement clickTag (la casse compte) ; l’adresse que vous laissez dans le fichier est une adresse de test, car de nombreuses plateformes la remplacent au moment de diffuser la publicité ; et la bannière doit avoir une seule action de clic, qui couvre toute la pièce. Certaines plateformes utilisent leur propre bibliothèque ou un autre nom : consultez leur guide.

Le poids maximal du .zip

Chaque plateforme fixe un maximum pour le .zip. Mesurez toujours le .zip final, et non le dossier non compressé, et gardez une marge : il est plus facile de réduire avant l’envoi que de corriger un rejet. Certaines plateformes distinguent aussi le chargement initial du chargement total (appelé le polite load).

BannerMotion mesure le poids de chaque pièce lors de l’export et le compare à une limite configurable ; cette limite ne remplace pas celle de votre plateforme. Les bannières n’incluent pas de bibliothèques tierces, ce qui aide à garder un poids réduit. [PLACEHOLDER : poids typique mesuré d’une pièce, lorsqu’il existera une mesure publiable.]

Ce qui pèse le plus, du plus au moins : les vidéos, les images (surtout en double résolution pour les écrans retina), les polices avec beaucoup de styles et les bibliothèques. Pour l’alléger : utilisez du texte et des formes vectorielles (SVG) plutôt que des images lorsque c’est possible, regroupez les petites icônes dans un sprite, compressez les photos et ne chargez que les graisses de police que vous utilisez.

Aucune ressource externe

Tout ce dont la bannière a besoin doit se trouver dans le .zip : images, polices et bibliothèques. De nombreuses plateformes bloquent ou pénalisent les fichiers demandés à un autre serveur (une police provenant d’un CDN, une bibliothèque hébergée ailleurs), car elles ne peuvent pas garantir qu’ils seront disponibles ni qu’ils sont sûrs. Dans BannerMotion, le paquet est autonome : il n’envoie aucune requête vers d’autres domaines.

Animation, durée et répétitions

Les plateformes limitent généralement la durée de l’animation et le nombre de répétitions (souvent 30 secondes au maximum et un nombre réduit de boucles). La valeur exacte dépend de chaque plateforme. L’exportateur de BannerMotion part d’une durée maximale de 30 secondes dans son préréglage générique.

Deux bonnes pratiques qui ne dépendent de personne : que le message et le bouton soient complets sur la dernière image (puisqu’elle reste à l’écran), et utiliser des courbes d’easing douces sur peu d’images clés bien choisies, plutôt que de nombreux mouvements saccadés.

Image de secours

Certaines plateformes demandent une image de secours (JPG, PNG ou GIF) aux mêmes dimensions, affichée si le navigateur n’exécute pas le HTML5. L’usage courant est d’utiliser la dernière image de l’animation. Vérifiez si votre plateforme l’exige, si elle doit se trouver dans le paquet ou à part, et avec quel poids maximal. Dans BannerMotion, la version statique de secours apparaît comme « Bientôt disponible » sur l’écran d’export.

Tester avant l’envoi

Décompressez votre .zip dans un nouveau dossier et ouvrez le index.html dans le navigateur. Vérifiez que l’animation se joue en entier, que le texte n’est pas coupé, que le clic ouvre l’adresse attendue et qu’aucune erreur n’apparaît dans la console du navigateur. Répétez le test avec le plus petit et le plus grand format de la campagne.

Une bannière qu’on ne peut pas tester n’est pas terminée.

Liste de contrôle

• Le .zip contient le index.html à la racine.
• La balise ad.size correspond à la taille de la bannière et à l’emplacement acheté.
• Le clic utilise clickTag et il n’existe qu’une seule action de clic.
• Le .zip pèse moins que la limite de la plateforme (BannerMotion vous prévient avec la limite que vous configurez).
• Aucune ressource externe : rien n’est demandé à un autre domaine.
• La durée et les répétitions restent dans ce que permet la plateforme.
• La dernière image contient le message complet et le bouton.
• Testé dans le navigateur, au plus petit et au plus grand format.

À l’envoi : ce qu’est le trafficking

Envoyer la bannière et l’assigner à sa campagne, à ses dates et à ses emplacements relève du trafficking. Lorsque le paquet arrive bien préparé, cette étape se résume à envoyer, tester dans l’aperçu de la plateforme et assigner. Après la publication, vérifiez dans les rapports de l’ad server que les clics sont bien comptés.

BannerMotion exporte chaque pièce avec la taille déclarée, le clickTag inclus et le poids validé, et signale ce qui manque. L’envoi direct vers les ad servers figure dans la feuille de route du produit : pour l’instant, vous téléchargez le paquet et l’envoyez manuellement.