Recommandations Techniques

Transcription

Recommandations
Techniques
Sommaire
Remise des éléments
techniques
5 jours ouvrés avant la date de lancement de votre
campagne
Agriaffaires / MachineryZone
Agritel
1. Bannières Web
1. Bannières Web
formats
HTML 5
HTML 5 cas général
HTML 5 canvas
flash - image de remplacement
flash - Click-Tag
2. Bannière Mobile / Newsletter
3. Rich Media
Contact : [email protected]
Conditions générales :
Nous vous remercions de respecter le délai de
remise de vos éléments.
Ce délai permet de nous assurer du bon
fonctionnement de votre bannière : poids, lien
2
Recommandations techniques
de redirection, intégration du clicktag.
Tout non respect du délai pourra engendrer un
retard dans la diffusion de la campagne à la
charge de l’annonceur.
formats
vidéo
habillage
formats
HTML 5
HTML 5 canvas
flash - Click-Tag
Annonces
pleinchamp com
1. Bannières Web
formats
HTML 5
HTML 5 canvas
flash - Click-Tag
3
Bannières web
Formats
SITES
Agriaffaires
MachineryZone
Agriaffaires
MachineryZone
FORMATS
DIMENSIONS
(PIXELS)
Méga Bannière
1240x90
Pavé colonne
300x250
Pavé annonce
300x250
Pavé Page Accueil
207x173
Grand Angle
300x600
Habillage
POIDS
MAXIMUM
50 ko
A FOURNIR
URL / Lien de
redirection
plus de détails
Durée conseillée : 15 secondes maximum
Technologies supportées
///
///
///
///
///
HTML 5
Gif animé
Gif ou Jpeg
Script agence
Flash
Poids autorisé : 50 ko
Tout dépassement du poids autorisé engendrera une surfacturation
4
5
Bannières web
Bannières web
HTML 5
HTML 5 - Cas général
Cas général
Comment insérer un click-tag ?
Pour les URL absolues (ex. bibliothèques de code), mettre un appel en HTTPS et non HTTP
et s’assurer que la plateforme hébergement est compatible avec ce protocole.
/// Ajouter avant la fermeture de la balide </head> :
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-2.0.js">
</script>
/// Ajouter juste après la balise <body> le code suivant en renseignant l’url de redirection :
Pourquoi insérer un click-tag ?
Afin de gérer le nombre de clics, vous devez insérer un code Javascript dans votre création.
Quels sont les éléments à fournir ?
/// Un fichier zip contenant les éléments de la bannière (html, css, js, images...).
/// Ou le lien vers la bannière hébergée.
<script type="text/javascript">
var clickTag ="http://www.url.com";
</script>
/// Insérer un id « clickarea » sur la div contenant l’animation. Si il existe déjà un id passer
au point suivant.
/// Ajouter juste avant la balise </body> le code suivant :
<script>
var clickArea1 = document.getElementById("clickarea");
clickArea1.onclick = function(){
window.open(clickTag, "blank")}
</script>
Mettre l’id de la balise contenant l’animation à la place de « clickarea » si celui-ci est
différent.
Télécharger un exemple
mégaban
1240x90
6
7
Bannières web
Bannières web
HTML 5 - canvas
Flash - image de remplacement
obsolète
HTML 5 recommandé
/// Ajouter avant la fermeture de la balide </head> le code suivant en renseignant l’url de
redirection :
Le plugin flash risque à court ou moyen terme d’être définitivement
bloqué sur les navigateurs. Il est donc recommandé d’utiliser la technologie
html5 pour assurer une bonne diffusion des bannières.
</script>
</script>
/// Ajouter une balise <a> autour de la balise <canvas> avec les paramètres suivant :
<a id="click-area1" style="display:block" target="_blank">
Pour toutes vos créations Flash, vous devez impérativement nous fournir une
image/bannière de remplacement afin d’assurer la diffusion de votre campagne.
<canvas id="canvas" width="1240" height="90"></canvas>
</a>
<script>
var clickArea1 = document.getElementById("click-area1");
</script>
mégaban
1240x90
Qu’est ce qu’une image de remplacement ?
Une image de remplacement sert en effet à remplacer une création de type Flash ou Script
agence dans l’un des cas suivants :
///
///
///
///
Accès au site depuis un mobile ou une tablette
Le player Flash n’est pas disponible sur le navigateur de l’utilisateur
La version du player Flash est antérieure à celle de la création
Le JavaScript est désactivé sur le navigateur de l’utilisateur
Format : Jpeg ou Gif
flash
flash
affichage de l’image de remplacement
8
9
Bannières web
Flash - Click-Tag
obsolète
Créer un calque au dessus et de la longueur de l’animation
Le nommer « bouton »
Créer un symbole qui couvre toute la surface de la bannière
Passer son opacité à 0
Mettre « btn_click » pour le nom de l’occurence
Le nommer « as »
Insérer le code AS3 - page suivante - dans la fenêtre action (raccourci - F9)
Télécharger les gabarits des bannières
mégaban
1240x90
pavé colonne
pavé annonce
300x250
pavé accueil
207x173
grand angle
300x600
obsolète
import flash.external.ExternalInterface;
import flash.net.URLRequest;
import flash.net.navigateToURL;
btn_click.mouseChildren = false;
btn_click.buttonMode = true;
btn_click.addEventListener(MouseEvent.MOUSE_UP, click);
10
Flash - Click-Tag
ActionScript 3
Afin de gérer le nombre de clics, vous devez insérer un code Action Script dans votre
création.
///
///
///
///
///
///
///
///
Bannières web
var target = root.loaderInfo.parameters.target;
var clicktag = root.loaderInfo.parameters.clicktag;
function click(e:MouseEvent)
{
var browserName : String = getBrowserName();
if(browserName == "IE") {
ExternalInterface.call("function setWMWindow() {window.open('"+ clicktag +
"');}");
}
else {
navigateToURL(new URLRequest(clicktag), target);
}
}
function getBrowserName():String
{
var browser : String;
try{
var browserAgent : String = ExternalInterface.call("function getBrowser()
{return navigator.userAgent;}");
}
catch(error : Error){
trace(error);
return 'Undefined';
}
if(browserAgent.indexOf("Firefox") >= 0) {
browser = "Firefox";
}
else if(browserAgent.indexOf("Safari") >= 0) {
browser = "Safari";
}
else if(browserAgent.indexOf("MSIE") >= 0) {
browser = "IE";
}
else if(browserAgent.indexOf("Opera") >= 0) {
browser = "Opera";
}
else {
browser = "Undefined";
}
return browser;
}
11
Bannière Mobile /Newsletter
Rich Media
Les formats
SITES/NEWSLETTER
Agriaffaires
MachineryZone
FORMATS
Pavé
DIMENSIONS
(PIXELS)
POIDS
MAXIMUM
A FOURNIR
25 ko
URL / Lien de
redirection
300x250
SITES
Agriaffaires
MachineryZone
FORMATS
Vidéo
Habillage
POIDS
MAXIMUM
50 ko /
bannière
A FOURNIR
URL / Lien de
redirection / fichier HTML
/// Gif animé
/// Gif ou Jpeg
/// HTML 5
Poids autorisé > 25 ko
12
///
///
///
///
Gif animé
Gif ou Jpeg
Script agence
HTML 5
13
Rich Media
Rich Media
Vidéo
Habillage
CODEC
EXTENSION
DÉBIT
VIDÉO
DÉBIT
AUDIO
DURÉE
CONSEILLÉE
POIDS MAXIMUM
CONSEILLÉ
h264, vp9,
theora
mp4, webm, ogv
300 kbits/s
96 kbits/s
15 secondes
max.
2 mo
SITES
FORMATS
/// Le fichier HTML avec l’intégration des éléments (vidéo, poster, url de redirection, pixel d’impression si necessaire).
/// La vidéo en mp4, webm et ogv pour assurer une compatibilité sur l’ensemble des
navigateurs et des mobiles.
/// L’image de remplacement à lier dans le paramètre poster de la balise vidéo.
POIDS
MAXIMUM
A FOURNIR
100 ko
Background au format
JPEG
+
Préciser le background
color (par défaut :
blanc)
50 ko /
bannière
Bannière au format
HTML
+
URL /
Lien de redirection
L : 1920 px
Background
DIMENSIONS
Agriaffaires
MachineryZone Page accueil
Autre page
H : 650 à 700 px
maximum
Méga bannière :
1240 x 90 px
Grand angle :
300 x 600 px
Méga bannière :
1240 x 90 px
Pavé colonne :
300 x 250 px
Télécharger les gabarits d’intégration des bannières
mégaban
1240x90
pavé colonne
pavé annonce
300x250
Télécharger le zoning pour l’habillage
Zoning
habillage
Pixel d’impression
Pour compatibiliser le nombre de survol de la bannière insérer l’url qui vous sera fournie.
(ligne 103 dans le gabarit)
document.getElementById("pixel").innerHTML="<img src="url" />";
Son au survol uniquement
14
Spécifications techniques
Paramètres CSS imposés :
background-repeat : no-repeat;
background-color : selon créa;
vertical-position : top;
horizontal-position : center;
vertical-offset : 0;
background-attachement : not-actived;
15
Bannières web
Formats
SITES
Agritel
FORMATS
DIMENSIONS
(PIXELS)
Méga Bannière
1240x90
Grand Angle
300x600
Pavé
300x250
POIDS
MAXIMUM
A FOURNIR
50 ko
URL / Lien de
redirection
Agritel
///
///
///
///
///
HTML 5
Gif animé
Gif ou Jpeg
Script agence
Flash
16
17
Bannières web
Bannières web
HTML 5
Cas général
</script>
</script>
au point suivant.
<script>
</script>
différent.
mégaban
1240x90
18
19
Bannières web
Bannières web
HTML 5 - canvas
obsolète
HTML 5 recommandé
redirection :
</script>
</script>
</a>
<script>
</script>
mégaban
1240x90
///
///
///
///
flash
flash
20
21
Bannières web
obsolète
Flash - Click-Tag
Le nommer « as »
mégaban
1240x90
grand angle
300x600
mégaban
468x80
carré
250x250
obsolète
22
Flash - Click-Tag
ActionScript 3
création.
///
///
///
///
///
///
///
///
Bannières web
pavé colonne
pavé annonce
300x250
{
"');}");
}
else {
}
}
{
try{
}
trace(error);
return 'Undefined';
}
}
browser = "Safari";
}
browser = "IE";
}
browser = "Opera";
}
else {
}
return browser;
}
23
Bannières web
Formats
SITES
Annonces
pleinchamp
Annonces
pleinchamp com
FORMATS
DIMENSIONS
(PIXELS)
Méga Bannière
728x90
Pavé
300x250
POIDS
MAXIMUM
50 ko
A FOURNIR
URL / Lien de
redirection
Durée : 15 secondes maximum
///
///
///
///
///
HTML 5
Gif animé
Gif ou Jpeg
Script agence
Flash
HTML 5 recommandé
24
25
Bannières web
Bannières web
HTML 5
Cas général
</script>
</script>
au point suivant.
<script>
</script>
différent.
mégaban
1240x90
26
27
Bannières web
Bannières web
HTML 5 - canvas
obsolète
HTML 5 recommandé
redirection :
</script>
</script>
</a>
<script>
</script>
mégaban
1240x90
///
///
///
///
flash
flash
28
29
Bannières web
Flash - Click-Tag
obsolète
Le nommer « as »
30
obsolète
mégaban
728x90
Flash - Click-Tag
ActionScript 3
création.
///
///
///
///
///
///
///
///
Bannières web
pavé
300x250
{
"');}");
}
else {
}
}
{
try{
}
trace(error);
return 'Undefined';
}
}
browser = "Safari";
}
browser = "IE";
}
browser = "Opera";
}
else {
}
return browser;
}
31

Recommandations Techniques

Transcription

Documents pareils

Programme de formation Flash Action Script 3 perfectionnement

Pop Up - Yazo.net

Chavatanak Ving - IESA > Network

WEbDEsigNEr

PROGRAMME DU LOGICIEL FLASH

Programme de formation Flash Action Script Initiation

Web Technos : Flash MX

Support de cours Dreamweaver CS5 flash et plug-ins

Flash perfectionnement

Technical specifications for Online Advertising