www.20minutes.fr

Guide des Spécifications Techniques

V1.2 11/02/2014

www.20minutes.fr

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

www.20minutes.fr

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

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

3

Formats Standards

Voir page 10

> Clicktag

[+] de détails

Voir page 09

> Rich Media

[+] de détails

www.20minutes.fr

Oreille Bloc Edito Megamust

Taille 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

Autres contraintes -- -- --

Tracking Tiers Oui Oui Oui

Démo À venir À venir À venir

4

Traffic Drivers

Voir page 10

> Clicktag

[+] de détails

Voir page 09

> Rich Media

[+] de détails

www.20minutes.fr 5

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

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

Formats Premiums

Voir page 10

> Clicktag

[+] de détails

Voir page 09

> Rich Media

[+] de détails

www.20minutes.fr

Flash Transparent + Pavé Interstitiel

Taille 600x600 + 300x250 750x450

Poids Max 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

Autres contraintes Bouton de fermeture obligatoire --

Tracking Tiers Oui Oui

Démo À venir À venir

Formats Fort Impacts

Voir page 10

> Clicktag

[+] de détails

Voir page 09

> Rich Media

[+] de détails

Voir page 12

> Contraintes

[+] de détails

www.20minutes.fr

Arche Header Arche Enrichi

Taille 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)

Autres contraintes -- --

Tracking Tiers Oui Oui (redirect accepté)

Démo À venir À venir

Format Habillage de Page

www.20minutes.fr

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

Formats Mobiles

Tous les détails page 13

> Mobile

[+] de détails

Pour tout autre format, nous contacter

> Contacts

[+] de détails

www.20minutes.fr

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

Formats Innovants Mobiles

Tous les détails page 13

> Mobile

[+] de détails

Pour tout autre format, nous contacter

> Contacts

[+] de détails

www.20minutes.fr

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

Formats Tablette

Tous les détails page 13

> Mobile

[+] de détails

Pour tout autre format, nous contacter

> Contacts

[+] 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%

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

Créations : Les créations à fond perdu blanc ne sont pas acceptées (il faudra impérativement ajouter une bordure).

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 : on (release){ getURL(_root.clicktag,_root.target); }

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

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

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/

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 : Un fichier flash transparent doit obligatoirement comporter un bouton de fermeture anticipée. > Positionnement : en haut à droite. > Code à intégrer sur le bouton :

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

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.

www.20minutes.fr

Contraintes Formats Push Down Unit

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.

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"); }

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

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

Equipe Traffic Web Trafic-web@20minutes.fr