Guide des Spécifications Techniques V1.2 11/02/2014
Sommaire Contraintes techniques > Formats Standards p.3 > Formats Traffic Drivers p.4 > Formats Premiums p.5 > Formats Fort Impacts p.6 > Formats Mobiles p.7 > Formats Innovants p.8 Contraintes Générales > Généralités p.9 > Intégration du Clicktag p.10 > Formats Intrusifs p.11 > Arches & Habillages p.12 > Formats Mobile p.13 > Formats Tablette p.14 Contacts p.14
Formats Standards Large Bannière (Leaderboard) Super Large Bannière (Super Leaderboard) Pavé (MPU) Grand Angle (HPU) Taille 728x90 1000x90 300x250 300x600 Poids Max 50ko 50ko 50ko 50ko Fichiers HTML, Flash et/ou image HTML, Flash et/ou image HTML, Flash et/ou image HTML, Flash et/ou image Animation Son / Vidéo Oui Oui Oui Oui Expand Non Non Rollover ou clic 600x500 max. Gauche/Bas Rollover ou clic 600x600 max. Gauche/Bas Autres contraintes -- -- -- -- Tracking Tiers Oui Oui Oui Oui Démo À venir À venir À venir À venir > Clicktag Voir page 10 > Rich Media Voir page 09 3
Traffic Drivers Oreille Bloc Edito Megamust Taille 100x100 300x150 610x468 Poids Max 50ko 50ko 50ko Fichiers Image Image HTML, Flash et/ou image Animation -- -- Son / Vidéo Non Non Oui Expand Non Non Non Autres contraintes -- -- -- Tracking Tiers Oui Oui Oui Démo À venir À venir À venir > Clicktag Voir page 10 > Rich Media Voir page 09 4
Formats Premiums Giga Bannière Masthead PushDown Unit PushDown Unit Premium Taille 1000x150 1000x250 1000x90 > 1000x250 1000x200 > 1000x500 Poids Max 80ko 80ko 80ko 80ko Fichiers HTML, Flash et/ou image HTML, Flash et/ou image HTML, Flash et/ou image HTML, Flash et/ou image Animation Son / Vidéo Oui Oui Oui Oui Expand Non Non Rollover ou clic 1000x250 max. Bas Rollover ou clic 1000x500 max. Bas Autres contraintes -- -- -- -- Tracking Tiers Oui Oui Oui Oui Démo À venir À venir À venir À venir > Clicktag Voir page 10 > Rich Media Voir page 09 5
Formats Fort Impacts Flash Transparent + Pavé Interstitiel Arche Taille 600x600 + 300x250 750x450 1600x1200 Poids Max 50ko + 50ko 80ko 150ko Fichiers HTML, Flash et/ou Image HTML, Flash et/ou Image Image Animation 12 sec. max -- Son / Vidéo Oui Oui Non Expand Non Non Non Autres contraintes Bouton de fermeture obligatoire -- -- Tracking Tiers Oui Oui Oui Démo À venir À venir À venir > Clicktag Voir page 10 > Rich Media Voir page 09 > Contraintes Voir page 12
Formats Mobiles iphone Android Interstitiel Bannière Interstitiel Bannière Taille Portrait : 640x960 Paysage : 960x640 640x107 (ou 320x50) Portrait : 480x800 Paysage : 800x480 480x75 (ou 320x50) Poids Max 30ko 30ko 30ko 30ko Fichiers HTML, Image HTML, Image HTML, Image HTML, Image Animation 7 sec. max -- 7 sec. max -- Son / Vidéo Oui Non Oui Non Expand Non Non Non Non Autres contraintes Prévoir l intégration du bouton de fermeture en haut à droite (50x50px) -- Prévoir l intégration du bouton de fermeture en haut à droite (50x50px) -- Tracking Tiers Oui Oui Oui Oui Démo À venir À venir À venir À venir > Mobile Tous les détails page 13 > Contacts Pour tout autre format, nous contacter
Formats Tablette ipad Android Interstitiel Bannière Interstitiel Bannière Taille Portrait : 768x1004 Paysage: 1024x748 980x90 (ou 728x90) Portrait : 800x1280 Paysage: 1280x800 728x90 Poids Max 30ko 30ko 30ko 30ko Fichiers HTML, Image HTML, Image HTML, Image HTML, Image Animation 7 sec. max -- 7 sec. max -- Son / Vidéo Oui Non Oui Non Expand Non Non Non Non Autres contraintes Prévoir l intégration du bouton de fermeture en haut à droite (50x50px) -- Prévoir l intégration du bouton de fermeture en haut à droite (50x50px) -- Tracking Tiers Oui Oui Oui Oui Démo À venir À venir À venir À venir > Mobile Tous les détails page 13 > Contacts Pour tout autre format, nous contacter
Contraintes Générales & Rich Media Dans le cadre d une communication de qualité, et afin de maximiser la réussite des campagnes sur notre site, il est impératif que toutes les publicités diffusées sur 20minutes.fr respectent les lignes directrices énoncées dans ce document, ainsi que le cahier des charges de notre Adserver : SmartAdserver. Un certain nombre de points sont donc à respecter : Poids des créations : > Se référer aux poids définis dans les tableaux. Ce dernier est non extensible afin de garantir une expérience utilisateur de qualité. > Le chargement d une création ne doit pas augmenter la charge CPU utilissateur de +20% Images de remplacement : Les.gif de backup sont obligatoires afin d être diffusés en lieu et place du format.swf (Flash) et de vous permettre d être visible sur un maximum de navigateurs et types d ordinateurs. Délais de livraison : > 3 jours ouvrés pour une campagne classique > 5 jours ouvrés pour une opération spéciale Créations : Les créations à fond perdu blanc ne sont pas acceptées (il faudra impérativement ajouter une bordure). Son & Vidéo : > Exceptés les habillages, tous nos formats acceptent la vidéo. > Le son sera en off par défaut, il se déclenchera soit au roll over, soit avec un bouton on/off. Hébergement : 20Minutes se propose d héberger vos créations sur ses propres serveurs (cf. contraintes de poids évoquées dans ce document). Dans le cadre d un format vidéo, le poids max du fichier vidéo est de 2,5Mo Validation : L éditeur se réserve le droit de suspendre la diffusion de toute création ne respectant pas la législation en vigueur ou faisant la promotion d un message allant à l encontre de sa charte éditoriale.
Contraintes Fichiers Flash Afin de comptabiliser les clics sur les créations en flash (.swf) diffusées, voici le code à implémenter sur l ensemble du déroulement de l animation : Action Script 2 : on (release){ geturl(_root.clicktag,_root.target); } Méthodologie : Le clicktag s intègre sur un calque-bouton transparent recouvrant l intégralité de la zone de la création (cf. taille des formats). Action Script 3 : var clicktag:string=root.loaderinfo.parameters.clicktag; var target:string=root.loaderinfo.parameters.target; //fonction excécutée en réponse à l évènement function onclic(pevt:event):void { var redirect:urlrequest = new URLRequest( clicktag ); navigatetourl (redirect, target); } lebouton_btn.addeventlistener(mouseevent.click, onclic); //lebouton_btn est un exemple de nom de l occurrence du bouton dans la créa Validation : L intégration du clicktag est obligatoire : 20Minutes se doit de comptabiliser les clics pour toute diffusion sur son site afin d être en mesure d analyser & d améliorer les performances de la campagne. Pour tester l intégration du clicktag sur vos créations, n hésitez pas à contacter l équipe trafic-web@20minutes.fr ou à vous rendre sur les sites suivants : > http://www.adopstools.net/ > http://gapcode.com/banner-tester/
Contraintes Formats Intrusifs Les formats dits «intrusifs» doivent respecter des contraintes supplémentaires afin de garantir une navigation de qualité sur le site. Ainsi, merci de bien noter les points suivants : Flash Transparent : Un fichier flash transparent doit obligatoirement comporter un bouton de fermeture anticipée. > Positionnement : en haut à droite. > Code à intégrer sur le bouton : Interstitiel : 20Minutes se charge d intégrer le bouton de fermeture via son template propriétaire. Aucun bouton de fermeture anticipée n est donc à intégrer. Action Script 2 on (release) { flash.external.externalinterface.call(«pub_ist_hd»); } Action Script 3 Import flash.external.externalinterface; //fonction exécutée en réponse à l événement Function onclic(evt:event)void { ExternalInterface.call(«pub_ist_hd»); } leboutonferme_btn.addeventlistener(mouseevent.click, onclic); //leboutonferme_btn est un exemple de nom de l occurrence dans la créa
Contraintes Formats Push Down Unit PDU : Un PDU doit obligatoirement comporter un bouton de fermeture anticipée. Ce bouton fait appel à la fonction de fermeture détaillée ci-dessous. Il faut également impérativement appeler la fonction dès que la souris sort de la zone de la création. > Positionnement : en bas à droite. > Code à intégrer sur le bouton de fermeture : Action Script 2 on (release) { flash.external.externalinterface.call("xclose"); } Push Down Unit (PDU) : Les formats expand n étant pas acceptées pour les déclinaisons horizontales (base LB), 20Minutes autorise néanmoins la diffusion de formats «Push Down» (le contenu du site est poussé à l ouverture du format). Ce dernier doit être programmé en un seul fichier : > Fermé par défaut > Ouverture au passage de la souris > Présence d un bouton de fermeture anticipée positionné en bas à droite de la création (se référer au code ci-contre). > Possibilité d intégrer de la vidéo (son off par défaut), 2.5 Mo max. Action Script 3 import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("xClose"); } leboutonferme_btn.addeventlistener(mouseevent.click, onclic); //leboutonferme_btn est un exemple de nom de l occurrence du bouton dans la création.
Contraintes Arches & Habillages de page Pour maximiser la visibilité de la marque / du message et garantir une expérience utilisateur de qualité, l intégration d un format Arche / Habillage sur nos pages doit respecter les contraintes suivantes : > 1 seule image de fond à fournir. > Concentrer les messages publicitaires écrits dans la zone jaune (140x800 sur chaque côté) pour maximiser leur visibilité sur des petites résolutions. A noter : les habillages de homepage sont généralement couplés aux formats classiques associés (Large Bannière et Pavé) Template : Pour vous guider dans la réalisation de votre création, téléchargez notre template ici.
Contraintes Mobile & Tablette La diffusion sur les supports mobiles (smartphones & tablette) est soumise à des contraintes spécifiques. Ainsi, il faudra respecter les recommandations détaillées ci-après : Pour les éléments livrés en redirects : > Pas de problème dans le cas ou il s'agit de redirect vers des créas statiques. > Lorsqu'il s'agit de redirect HTML5, il y a plusieurs paramètres à prendre en compte : 1/ Pour ipad, sur les formats interstitiels, il faut que la créa soit responsive design et gère le portrait et le paysage via le fichier HTML5 fourni. 2/ Les liens de redirection doivent être remplacés la variable de l'ad-server et le lien transmit en plus afin de pouvoir remonter les clics au sein de nos ad-servers c'est à dire : -(iphone/ipad) : <a href="sas:click">mon lien</a> -(Android) : <a href="adshift://click">mon lien</a> Exemple de redirect HTML5 avec url de redirection : ipad: Url de la créa : http://eu-ad.sam4m.com/27-56-2-6-ru2op/display Url de redirection : http://eu-ad.sam4m.com/27-56-2-6-ru2op/click iphone : Url de la créa : http://eu-ad.sam4m.com/27-56-1-8-lryf4/display Url de redirection : http://eu-ad.sam4m.com/27-56-1-8-lryf4/click
Contacts Equipe Traffic Web Trafic-web@20minutes.fr Julien Mosbach Revenu / Traffic Manager 01 72 74 53 83 jmosbach@20minutes.fr Kafui Messan Traffic Manager 01 72 74 53 85 kmessan@20minutes.fr