Formats Mobiles

Guide des Spécifications
Techniques
V1.2
11/02/2014
www.20minutes.fr
Sommaire
Contraintes techniques
> Formats Standards
> Formats Traffic Drivers
> Formats Premiums
> Formats Fort Impacts
> Habillage de Page
> Formats Mobiles
> Formats Innovants
p.3
p.4
p.5
p.6
p.7
p.8
p.9
Contraintes Générales
> Généralités
> Intégration du Clicktag
> Formats Intrusifs
> Arches & Habillages
> Formats Mobile
> Formats Tablette
p.10
p.11
p.12
p.14
p.16
p.16
Contacts
p.17
www.20minutes.fr
Formats Standards
Large Bannière
(Leaderboard)
Super Large Bannière
(Super Leaderboard)
Pavé
(MPU)
Grand Angle
(HPU)
728x90
1000x90
300x250
300x600
50ko
50ko
50ko
50ko
HTML, Flash et/ou image
HTML, Flash et/ou image
HTML, Flash et/ou image
HTML, Flash et/ou image
Animation
Nbre de boucles illimité
20 fps max.
Nbre de boucles illimité
20 fps max.
Nbre de boucles illimité
20 fps max.
Nbre de boucles illimité
20 fps max.
Son / Vidéo
Oui
Oui
Oui
Oui
Non
Non
Rollover ou clic
600x500 max.
Gauche/Bas
Rollover ou clic
600x600 max.
Gauche/Bas
--
--
--
--
Oui
Oui
Oui
Oui
À venir
À venir
À venir
À venir
Taille
Poids Max
Fichiers
Expand
Autres contraintes
Tracking Tiers
Démo
> Clicktag
> Rich Media
Voir page 10
Voir page 09
[+] de détails
[+] de détails
3
www.20minutes.fr
Traffic Drivers
Oreille
Bloc Edito
Megamust
100x100
300x150
610x468
Poids Max
50ko
50ko
50ko
Fichiers
Image
Image
HTML, Flash et/ou image
Animation
--
--
Nbre de boucles illimité
20 fps max.
Son / Vidéo
Non
Non
Oui
Expand
Non
Non
Non
--
--
--
Oui
Oui
Oui
À venir
À venir
À venir
Taille
Autres contraintes
Tracking Tiers
Démo
> Clicktag
> Rich Media
Voir page 10
Voir page 09
[+] de détails
[+] de détails
4
www.20minutes.fr
Formats Premiums
Giga Bannière
Masthead
PushDown Unit
PushDown Unit
Premium
1000x150
1000x250
1000x90 > 1000x250
1000x200 > 1000x500
80ko
80ko
80ko
80ko
HTML, Flash et/ou image
HTML, Flash et/ou image
HTML, Flash et/ou image
HTML, Flash et/ou image
Animation
Nbre de boucles illimité
20 fps max.
Nbre de boucles illimité
20 fps max.
Nbre de boucles illimité
20 fps max.
Nbre de boucles illimité
20 fps max.
Son / Vidéo
Oui
Oui
Oui
Oui
Non
Non
Rollover ou clic
1000x250 max.
Bas
Rollover ou clic
1000x500 max.
Bas
--
--
--
--
Oui
Oui
Oui
Oui
À venir
À venir
À venir
À venir
Taille
Poids Max
Fichiers
Expand
Autres contraintes
Tracking Tiers
Démo
> Clicktag
> Rich Media
Voir page 10
Voir page 09
[+] de détails
[+] de détails
5
www.20minutes.fr
Formats Fort Impacts
Flash Transparent + Pavé
Interstitiel
600x600 + 300x250
750x450
50ko + 50ko
80ko
Fichiers
HTML, Flash et/ou Image
HTML, Flash et/ou Image
Animation
Nbre de boucles illimité
20 fps max.
12 sec. max
20 fps max.
Son / Vidéo
Oui
Oui
Expand
Non
Non
Bouton de fermeture obligatoire
--
Oui
Oui
À venir
À venir
Taille
Poids Max
Autres contraintes
Tracking Tiers
Démo
> Clicktag
> Rich Media
> Contraintes
Voir page 10
Voir page 09
Voir page 12
[+] de détails
[+] de détails
[+] de détails
www.20minutes.fr
Format Habillage de Page
Arche
Header Arche Enrichi
1600x1200
1000x200
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)
--
--
Oui
Oui (redirect accepté)
À venir
À venir
Taille
Autres contraintes
Tracking Tiers
Démo
www.20minutes.fr
Formats Mobiles
iPhone
Android
Interstitiel
Bannière
Interstitiel
Bannière
Portrait : 640x960
Paysage : 960x640
640x107
(ou 320x50)
Portrait : 480x800
Paysage : 800x480
480x75
(ou 320x50)
30ko
30ko
30ko
30ko
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
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)
--
Oui
Oui
Oui
Oui
À venir
À venir
À venir
À venir
Taille
Poids Max
Fichiers
Autres contraintes
Tracking Tiers
Démo
> Mobile
> Contacts
Tous les détails page 13
Pour tout autre format, nous
contacter
[+] de détails
[+] de détails
www.20minutes.fr
Formats Innovants Mobiles
iPhone
Android
Newsfeed Banner
Cube 3D
Newsfeed Banner
320x100
(640x200 Retina)
300x250
4 images à cette taille à fournir
320x100
(640x200 Retina)
45ko
45ko chacune
45ko
HTML, Image
Image
HTML, Image
Animation
--
--
--
Son / Vidéo
Oui
Non
Oui*
Expand
Non
Non
Non
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
Taille
Poids Max
Fichiers
Autres contraintes
> Mobile
> Contacts
Tous les détails page 13
Pour tout autre format, nous
contacter
[+] de détails
[+] de détails
www.20minutes.fr
Formats Tablette
iPad
Android
Interstitiel
Bannière
Interstitiel
Bannière
Portrait : 768x1004
Paysage: 1024x748
980x90
(ou 728x90)
Portrait : 800x1280
Paysage: 1280x800
728x90
30ko
30ko
30ko
30ko
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
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)
--
Oui
Oui
Oui
Oui
À venir
À venir
À venir
À venir
Taille
Poids Max
Fichiers
Autres contraintes
Tracking Tiers
Démo
> Mobile
> Contacts
Tous les détails page 13
Pour tout autre format, nous
contacter
[+] de détails
[+] de détails
www.20minutes.fr
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%
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.
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
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.
www.20minutes.fr
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 :
Action Script 3 :
on (release){
getURL(_root.clicktag,_root.target);
}
var clicktag:String=root.loaderInfo.parameters.clicktag;
var target:String=root.loaderInfo.parameters.target;
//fonction excécutée en réponse à l’évènement
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).
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 [email protected] ou à vous rendre sur les sites suivants :
> http://www.adopstools.net/
> http://gapcode.com/banner-tester/
www.20minutes.fr
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 :
Interstitiel :
Un fichier flash transparent doit obligatoirement comporter un bouton de fermeture
anticipée.
> Positionnement : en haut à droite.
> Code à intégrer sur le bouton :
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
www.20minutes.fr
Contraintes Formats Push Down Unit
PDU :
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
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.
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");
}
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 .
www.20minutes.fr
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.
www.20minutes.fr
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
www.20minutes.fr
Contacts
Equipe Traffic Web
[email protected]
Julien Mosbach
Kafui Messan
Revenu / Traffic Manager
01 72 74 53 83
[email protected]
Traffic Manager
01 72 74 53 85
[email protected]
www.20minutes.fr