Transcript Interstitiel

Spétechs Mobile
Février 2014
Appli iOS
Appli Android
Site Mobile
Web Mobile
Les clicks URL
Appli iOS
• Créa en dur
• HTML5
Banner
Interstitiel
Bouncing / traveling Image
Interstitiel Vidéo
Bouncing / traveling Vidéo
Créa en dur
Banner
Description
Une image rectangulaire animée ou statique en haut ou
bas de page
Orientation (optionnelle)
• Portrait
• Landscape
Note : ce template gère l’orientation et affiche une créa
pour le portrait et une autre pour le paysage.
Taille
• iPhone Portrait : 640x106
• iPhone Landscape : 960x106
• iPad Portrait : 1536x180
• iPad Landscape : 2048x180
Format
• JPG
• GIF
• PNG
Son
OFF par défaut
Poids
50 Ko max
Créa en dur - Banner
Interstitiel
Description
Une image plein écran qui apparaît tandis
que la page Web charge
Orientation (optionnelle)
• Portrait
• Landscape
Note : ce template gère l’orientation et affiche
une créa pour le portrait et une autre pour
le paysage.
Taille
• iPhone Portrait : 640x960 ou 640x920
• iPhone Landscape : 960x640 ou 960x600
• iPad Portrait : 1536x2048 ou 1536x2008
• iPad Landscape : 2048x1536 ou 2048x1496
Format
• JPG
• GIF
• PNG
Son
OFF par défaut
Poids
50 Ko max
Pour voir un exemple, cliquez ici :
Créa en dur - Interstitiel
Interstitiel Vidéo
Description
Une vidéo qui apparaît sur un fond tandis que la page
web charge
Orientation (optionnelle)
• Portrait
• Landscape
Note : Le calque vidéo est automatiquement adapté
à la largeur de l’écran. La hauteur est ajustée en
gardant l’aspect ratio de l’image.
En mode paysage, la vidéo sera élargie pour s’adapter
à la hauteur de l’écran.
Si une image de fond est téléchargée, elle sera affichée
en mode portrait seulement.
Taille
• iPhone Background Portrait : 640x690
• iPad Background Portrait : 1536x2048
• Vidéo : ratio 4:3 ou 16:9
Format
Background + vidéo
• JPG, GIF statique ou PNG
• MP4, encodé en H.264
Son
OFF par défaut
Poids
• Background : 100 Ko max
• Vidéo : 500 Ko max
Pour voir un exemple, cliquez ici :
Créa en dur – Interstitiel Vidéo
Bouncing / Traveling image
Description
•
Bouncing : c’est une image fixe qui rebondit
aléatoirement sur les bords de l’écran en
fonction de la position du mobile.
•
Traveling : C’est une image fixe qui se
déplace de façon prédéfinie à travers l’écran.
Taille
• iPhone écran non rétina : 200x200
• iPhone écran rétina : 400x400
• iPad écran non rétina : 400x400
• iPad écran rétina : 600x600
Format
• GIF fixe
• JPG
• PNG
Poids
50 Ko max
Pour voir un exemple, cliquez ici :
Créa en dur – Bouncing / Traveling image
Bouncing / Traveling vidéo
Description
• Bouncing : C’est une vidéo qui rebondit
aléatoirement sur les bords de l’écran en
fonction de la position du mobile.
•
Traveling : C’est une vidéo qui se déplace de
façon prédéfinie à travers l’écran.
Taille
Aspect ratio 4:3 ou 16:9
Format
Vidéo MP4, encodé en H.264
Son
Off par défaut
Poids
500 Ko max
Pour voir un exemple, cliquez ici :
Créa en dur – Bouncing / Traveling vidéo
Banner
Interstitiel
Html5
Interstitiel Vidéo
Banner
Description
Une image rectangulaire animée ou statique en haut
ou en bas de page
Orientation (optionnelle)
• Portrait
• Landscape
Taille
Autoresize dans le HTML5
Format
HTML5, CSS, javascript
(voir « onglet HTML5 »)
Son
OFF par défaut
Poids
100 Ko max
Html5 - Banner
Interstitiel
Description
Une image plein écran qui apparaît tandis que
la page Web charge
Orientation (optionnelle)
• Portrait
• Landscape
Taille
Autoresize dans le HTML5
Format
HTML5, CSS, javascript
(voir « onglet HTML 5 »)
Son
OFF par défaut
Poids
200 Ko max
Durée
5 secondes max
Pour voir un exemple, cliquez ici :
Html5 - Interstitiel
Interstitiel Vidéo
Description
Une vidéo qui apparaît sur un fond tandis que la page
web charge
Orientation (optionnelle)
• Portrait
• Landscape
Taille
Autoresize dans le HTML5
Format
HTML5, CSS, javascript
(voir « onglet HTML5 »)
Son
OFF par défaut
Poids
200 Ko max
Durée
5 secondes max
Pour voir un exemple, cliquez ici :
Html5 – Interstitiel Vidéo
*L’url d’hébergement de la créa doit être envoyée ainsi que son clic commande associé.
CONTRAINTES TECHNIQUES
• Url de redirection : 150 caractères max !
• Attention, certaines applications ne reconnaissent pas les URLs traquées, ce qui rend la redirection avec l’Appstore
impossible.
• Bien respecter le paramètre post-click URL avec href=« sas:click » indiqué dans la documentation.
• Une seule redirection est acceptée (impossible d’intégrer des redirections multiples).
• La créa doit être capable de s’adapter (format) à l’ensemble des écrans iPhone.
• La créa doit être capable de s’orienter en portrait et paysage par elle-même.
• Nous ne pouvons pas diffuser des créas du type Adobe EDGE, HYPE, etc…
• Nous acceptons des créas développées seulement en langage HTML-CSS3.
ELEMENTS A ENVOYER
• Soit nous hébergeons le tout : envoyer un fichier ZIP avec la créa index.html + les autres fichiers associés.
Les tailles sont les mêmes que les créas classiques.
• Soit vous hébergez le tout : on ne doit recevoir qu’une URL qui va récupérer la créa animée hébergée.
Html5*
Appli Android
• Créa en dur
• HTML5
Banner
Interstitiel
Créa en dur
Interstitiel Vidéo
Banner
Description
Une image rectangulaire animée ou statique en haut ou
en bas de page
Orientation (optionnelle)
• Portrait
• Landscape
Note : ce template gère l’orientation et affiche une créa
pour le portrait et une autre pour le paysage.
Taille
• Smartphone Portrait : 720x120
• Smartphone Landscape : 1200x120
• Tablette Portrait : 1536x256
• Tablette Landscape : 2560x256
Format
• JPG
• GIF
• PNG
Son
OFF par défaut
Poids
• Smartphone : 50 Ko max
• Tablette : 100 Ko max
Créa en dur - Banner
Interstitiel
Description
Une image plein écran qui apparaît tandis que la page
Web charge
Orientation (optionnelle)
• Portrait
• Landscape
Note : ce template gère l’orientation et affiche une créa
pour le portrait et une autre pour le paysage.
Taille
• Smartphone Portrait : 720x1280
• Smartphone Landscape : 1280x720
• Tablette Portrait : 1536x2048
• Tablette Landscape : 2048x1536
Format
• JPG, GIF ou PNG
Son
OFF par défaut
Poids
• Smartphone : 100 Ko max
• Tablette : 200 Ko max
Pour voir un exemple, cliquez ici :
Créa en dur - Interstitiel
Interstitiel Vidéo
Description
Une vidéo qui apparaît sur un fond tandis que
la page web charge
Orientation (optionnelle)
• Portrait
• Landscape
Note : Le calque vidéo est automatiquement
adapté à la largeur de l’écran.
La hauteur est ajustée en gardant
l’aspect ratio de l’image.
En mode paysage, la vidéo sera élargie
pour s’adapter à la hauteur de l’écran.
Si une image de fond est téléchargée,
elle sera affichée en mode portrait seulement.
Taille
• Smartphone Background Portrait : 720x1200
• Tablette Background Portrait : 1536x2048
• Tablette Background Landscape : 2048x1536
• Vidéo : aspect ratio 16:9
Format
Background + vidéo
• JPG, GIF statique ou PNG
• MP4, encodé en H.264
Son
OFF par défaut
Poids
• Smartphone Background : 100 Ko max
• Tablette Background : 200 Ko max
• Vidéo : 500 Ko max
Pour voir un exemple, cliquez ici :
Créa en dur – Interstitiel Vidéo
Banner
Interstitiel
Html5
Interstitiel Vidéo
Banner
Description
Une image rectangulaire animée ou statique en haut
ou en bas de page
Taille
Autoresize dans le HTML5
Format
HTML5, CSS, javascript
(voir « onglet HTML5 »)
Orientation optionnelle
• Portrait
• Landscape
Son
OFF par défaut
Poids
100 Ko max
Html5 - Banner
Interstitiel
Description
Une image plein écran qui apparaît tandis que la page
Web charge
Orientation (optionnelle)
• Portrait
• Landscape
Taille
Autoresize dans le HTML5
Format
HTML5, CSS, javascript
(voir « onglet HTML5 »)
Son
OFF par défaut
Poids
200 Ko max
Durée
5 secondes max
Pour voir un exemple, cliquez ici :
Html5 - Interstitiel
Interstitiel Vidéo
Description
Une vidéo qui apparaît sur un fond tandis que la page
web charge
Orientation (optionnelle)
• Portrait
• Landscape
Taille
Autoresize dans le HTML5
Format
HTML5, CSS, javascript
(voir « onglet HTML5 »)
Son
OFF par défaut
Poids
200 Ko max
Durée
5 secondes max
Pour voir un exemple, cliquez ici :
Html5 – Interstitiel Vidéo
*L’url d’hébergement de la créa doit être envoyée ainsi que son clic commande associé.
Dans le cas contraire, l’hébergement vous sera facturé 1€ du CPM.
CONTRAINTES TECHNIQUES
• Url de redirection : 150 caractères max !
• Attention, certaines applications ne reconnaissent pas les URLs traquées, ce qui rend la redirection avec le Play Store
impossible.
• Contrairement à la partie iPhone, pour remonter les clics dans les terminaux Android, nous avons besoin d’une balise <a
href=" "></a> pour toute la création.
• Une seule redirection est acceptée (impossible d’intégrer des redirections multiples).
• La créa doit être capable de s’adapter (format) à l’ensemble des écrans Android.
• La créa doit être capable de s’orienter en portrait et paysage par elle-même.
• Nous ne pouvons pas diffuser des créas du type Adobe EDGE, HYPE, etc…
• Nous acceptons des créas développées seulement en langage HTML-CSS3.
ELEMENTS A ENVOYER
• Soit nous hébergeons le tout : envoyer un fichier ZIP avec la créa index.html + les autres fichiers associés.
Les tailles sont les mêmes que les créas classiques.
• Soit vous hébergez le tout : on ne doit recevoir qu’une URL qui va récupérer la créa animée hébergée.
Html5*
WEB
Site Mobile
• Créa en dur
• HTML5
Banner
Interstitiel
WEB
Créa en dur
Banner
Description
Une image rectangulaire statique en haut (top), au
milieu (middle) ou en bas (bottom) de l’écran
Taille
 Petits écrans :
• 320x53
Navigateurs supportés
• iOS – Safari
• Android browsers – Firefox, Chrome
• Mango – Internet explorer
 Grands écrans :
• 320x75
Orientation
Portrait
Format
• JPG, GIF ou PNG
Poids
50 Ko max
Note : ce template gère l’orientation portrait.
La même créa peut être diffusée en portrait et en
paysage (landscape).
WEB
Créa en dur - Banner
Interstitiel
Description
Une image plein écran qui apparaît tandis que la page
Web charge
Navigateurs supportés
• iOS – Safari
• Android browsers – Firefox, Chrome
• Mango – Internet explorer
Taille
 Smartphone portrait :
320x416 ou 320x358
 Smartphone landscape :
480x268 ou 480x208
 iPad portrait :
768x1004 ou 768x946
 iPad landscape :
1024x748 ou 1024x690
Orientation
• Portrait
• Landscape
Format
• JPG, BMP ou PNG
Note : ce template gère l’orientation et affiche une créa
pour le portrait et une autre pour le paysage.
Son
OFF par défaut
Poids
100 Ko max
WEB
Créa en dur - Interstitiel
Banner
Interstitiel
WEB
Html5
Banner
Description
Une image rectangulaire animée ou statique en haut
(top), au milieu (middle) ou en bas (bottom) de l’écran
Taille
 Petits écrans :
• 320x53
Navigateurs supportés
• iOS – Safari
• Android browsers – Firefox, Chrome
• Mango – Internet explorer
 Grands écrans :
• 320x75
Orientation
Portrait
Note : ce template gère l’orientation portrait. La même
créa peut être diffusée en portrait et en paysage
(landscape).
WEB
Html5 - Banner
Format
HMTL5, sous réserve de test
(voir slide « HTML5 »)
Son
OFF par défaut
Interstitiel
Description
Une image plein écran qui apparaît tandis que la page
Web charge
Navigateurs supportés
• iOS – Safari
• Android browsers – Firefox, Chrome
• Mango – Internet explorer
Orientation
• Portrait
• Landscape
Taille
 Smartphone Portrait :
320x416 ou 320x358
 Smartphone Landscape :
480x268 ou 480x208
 iPad Portrait :
768x1004 ou 768x946
 iPad Landscape :
1024x748 ou 1024x690
Format
HTML5, sous réserve de test
(voir slide « HTML5 »)
Note : ce template gère l’orientation et affiche une créa
pour le portrait et une autre pour le paysage.
WEB
Html5 - Interstitiel
Son
OFF par défaut
*L’url d’hébergement de la créa doit être envoyée ainsi que son clic commande
associé. Dans le cas contraire, l’hébergement vous sera facturé 1€ du CPM.
•
•
•
•
•
•
•
•
Url de redirection : 150 caractères max !
Attention, certaines applications ne reconnaissent pas les URLs traquées, ce qui rend la redirection avec l’Appstore/le Play Store
impossible.
Pour remonter les clics dans les terminaux Android, nous avons besoin d’une balise <a href=" "></a> pour toute la création.
Une seule redirection est acceptée (impossible d’intégrer des redirections multiples).
La créa doit être capable de s’adapter (format) à l’ensemble des écrans Android.
La créa doit être capable de s’orienter en portrait et paysage par elle-même.
Nous ne pouvons pas diffuser des créas du type Adobe EDGE, HYPE, etc…
Nous acceptons des créas développées seulement en langage HTML-CSS3.
• Soit nous hébergeons le tout : envoyer un fichier ZIP avec la créa index.html + les autres fichiers associés.
Les tailles sont les mêmes que les créas classiques.
• Soit vous hébergez le tout : on ne doit recevoir qu’une URL qui va récupérer la créa animée hébergée.
Attention :
Pour les formats iPad, il faut que le HTML5 gère le format portrait et landscape.
Pour Android, le HTML5 doit gérer les dimensions en fonction de la taille d’écran du Mobile.
WEB
Html5*
Web Mobile
• Le Web Mobile est adservé sur AppNexus.
• Ce sont les mêmes formats IAB que pour le display mais consultables sur smartphone ou tablette.
• Les formats sont les mêmes que pour le web mais il faut garder en tête que ce sera diffusé sur des plus petits
écrans dans le cas des smartphones, L’idéal est de faire des créa pas trop chargées et avec peu d’écriture.
• Le script agence n’est pas possible.
Créa
MegaBanner
Pavé
Interstitiel
Taille
728x90
300x250
550x350
Poids
40Ko
40Ko
40Ko
Format
Gif, Jpeg, Html5
Gif, Jpeg, Html5
Gif, Jpeg, Html5
• Dans le html5, pour l'interstitiel :
- les clics seront comptés grâce à la macro ${CLICK_URL}.
- impossible de faire plusieurs redirections.
- le bouton « fermer » est géré de notre côté.
- gestion du resize de la créa à faire dans le html5 pour l’interstitiel (selon résolution et portrait/paysage).
Web Mobile
Exemples de créas non optimisées pour le Web Mobile
(trop d’écritures, pas lisibles)
Web Mobile
Exemples de créas optimisées pour le Web Mobile
Web Mobile
Les clicks URL
Click
URL iOS
Click URL
Android
Click to web…………………http://www.mysite.com
Lorsqu’il clique sur la bannière, l’internaute est dirigé vers le site web de l’annonceur.
Click to call…………………tel:my_phone_number
Le clic de l’internaute entraine un appel téléphonique.
Click to SMS…………………tel:my_SMS_number
En cliquant, l’internaute est invité à envoyer un sms.
Click to app…………………http://itunes.apple.com/ OU https://play.google.com/store
Le clic renvoie l’internaute vers l’application de l’annonceur.
Click to maps………………maps:my_maps_url OU http://maps.google.com/
Après son clic, l’internaute est invité à se rendre sur un plan/carte .
Click to mail…………………mailto:my_email_address
L’internaute est invité à envoyer un mail suite au clic.
Click to youtube……………http://www.youtube.com
Le clic dirige l’internaute vers la lecture d’une vidéo.
Les clicks URL