Guide des Spécifications Techniques

Transcription

1 Guide des Spécifications Techniques V1.2 11/02/2014

2 Sommaire Contraintes techniques > Formats Standards p.3 > Formats Traffic Drivers p.4 > Formats Premiums p.5 > Formats Fort Impacts p.6 > Habillage de Page p.7 > Formats Mobiles p.8 > Formats Innovants p.9 Contraintes Générales > Généralités p.10 > Intégration du Clicktag p.11 > Formats Intrusifs p.12 > Arches & Habillages p.14 > Formats Mobile p.16 > Formats Tablette p.16 Contacts p.17

3 Formats Standards Large Bannière (Leaderboard) Super Large Bannière (Super Leaderboard) Pavé (MPU) Grand Angle (HPU) Taille 728x x90 300x x600 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

4 Traffic Drivers Oreille Bloc Edito Megamust Taille 100x x x468 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

5 Formats Premiums Giga Bannière Masthead PushDown Unit PushDown Unit Premium Taille 1000x x x90 > 1000x x200 > 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

6 Formats Fort Impacts Flash Transparent + Pavé Interstitiel Taille 600x x x450 Poids Max 50ko + 50ko 80ko Fichiers HTML, Flash et/ou Image HTML, Flash et/ou Image Animation 12 sec. max Son / Vidéo Oui Oui Expand Non Non Autres contraintes Bouton de fermeture obligatoire -- Tracking Tiers Oui Oui Démo À venir À venir > Clicktag Voir page 10 > Rich Media Voir page 09 > Contraintes Voir page 12

7 Format Habillage de Page Arche Header Arche Enrichi Taille 1600x x200 Poids Max 150ko 150ko max Fichiers Image Flash ou Image Animation -- Illimitée, Son / Vidéo Non Oui, son off par défaut. Expand Non Non (PDU possible, nous contacter) Autres contraintes Tracking Tiers Oui Oui (redirect accepté) Démo À venir À venir

8 Formats Mobiles iphone Android Interstitiel Bannière Interstitiel Bannière Taille Portrait : 640x960 Paysage : 960x x107 (ou 320x50) Portrait : 480x800 Paysage : 800x x75 (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 un emplacement vide (50x50px) en haut à droite pour intégration du bouton de fermeture (gérée par 20Minutes) -- Prévoir un emplacement vide (50x50px) en haut à droite pour intégration du bouton de fermeture (gérée par 20Minutes) -- 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

9 Formats Innovants Mobiles iphone Android Newsfeed Banner Cube 3D Newsfeed Banner Taille 320x100 (640x200 Retina) 300x250 4 images à cette taille à fournir 320x100 (640x200 Retina) Poids Max 45ko 45ko chacune 45ko Fichiers HTML, Image Image HTML, Image Animation Son / Vidéo Oui Non Oui* Expand Non Non Non Autres contraintes Si ouverture d une vidéo au clic et non redirection vers site de l annonceur, nous fournir une vidéo au format MP4 de 2.5Mo max. -- Si ouverture d une vidéo au clic et non redirection vers site de l annonceur, nous fournir une vidéo au format MP4 de 2.5Mo max. Tracking Tiers Oui Oui Oui Démo ici ici ici > Mobile Tous les détails page 13 > Contacts Pour tout autre format, nous contacter

10 Formats Tablette ipad Android Interstitiel Bannière Interstitiel Bannière Taille Portrait : 768x1004 Paysage: 1024x x90 (ou 728x90) Portrait : 800x1280 Paysage: 1280x x90 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 un emplacement vide (50x50px) en haut à droite pour intégration du bouton de fermeture (gérée par 20Minutes) -- Prévoir un emplacement vide (50x50px) en haut à droite pour intégration du bouton de fermeture (gérée par 20Minutes) -- 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

11 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.

12 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 : > >

13 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

14 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.

15 Nouvelles Contraintes Arches & Habillages de page A compter de la rentrée 2014, 20Minutes arborera un nouveau rendu. Cette nouvelle maquette implique quelques ajustements en termes de contraintes techniques. > 1 seule image de fond à fournir. > Header (vert) : 1000x200px. Possibilité de nous fournir un fichier flash respectant nos contraintes spécifiques, cf. slide suivante. > Colonnes (jaune): concentrer les messages publicitaires écrits (140x800 sur chaque côté) pour maximiser leur visibilité sur des petites résolutions.

16 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 : Url de redirection : iphone : Url de la créa : Url de redirection :

17 Contacts Equipe Traffic Web Julien Mosbach Revenu / Traffic Manager jmosbach@20minutes.fr Kafui Messan Traffic Manager kmessan@20minutes.fr