Bannering HTML5

Docs externes

Aide DoubleClick Campaign Manager

Aide DoubleClick Campaign Manager

Google Web Designer vous donne le pouvoir de créer des contenus HTML5. Utiliser l'animation et des éléments interactifs, apporter votre vision créative à la vie, et profiter de l'intégration transparente avec d'autres produits Google, tels que Google Drive, DoubleClick Studio et AdWords...

Méthode

1. Création du fichier, choisir l’environnement « Display&Video360 »

2. Ne pas oublier de définir la répétition de l’animation sur chaque calque d’objet

3. Animation des éléments.

4. Rendre la bannière cliquable.

Ajouter un libellé au début de l’animation. Renommer en (AnimationStart)
Ajouter un évènement à la fin de la durée d’animation. Renommer en (AnimationEnd)
Double cliquer sur l’évènement / Timeline => GoAndPlay => page1 => Label (AnimationStart) => OK
Drag and Dropper un composant « Zone cliquable » sur la zone qui doit être cliquable.
Clique droit sur la zone précédemment ajoutée puis Ajouter un évènement => Zone cliquable => Appuyer/Cliquer => Annonce Google => Quitter l’annonce => Destinataire gwd-ad (le nom du calque de la zone cliquable) => Ajouter l’url de redirection => OK

5. Une fois l’animation de la bannière terminée, il faut cliquer sur Publier et un .zip sera généré.

Note: Pour vérifier si votre fichier .zip est conforme, rendez-vous à cette url => https://h5validator.appspot.com/dcm

Max: 1Mo (dossier .zip décompressé).

Création d'un fichier HTML5

Une fois l'animation de la bannière terminée, veuillez ajouter les lignes de code suivantes dans le fichier index.html

1. Après la balise <title></title>


<meta name="ad.size" content="height=0,width=0">

Remplacer les deux 0 par les valeurs de la bannière si c'est un format fixe et non expand. Voir la partie sur Size meta tag

2. Script à ajouter pour le clickTag avant le <body>


<script type="text/javascript">
    var clickTag = "//www.athome.lu";
</script>

3. Entourer votre code qui se trouve entre <body></body>


<a href="javascript:window.open(window.clickTag)">  ...  </a>

4. Avoir le curseur en forme de main. Ajouter les lignes suivantes avant le <body>


<style>
    body, #Stage {
        cursor:pointer;
    }
</style>

Note: Pour vérifier si votre fichier .zip est conforme, rendez-vous à cette url => https://h5validator.appspot.com/dcm

Max 1Mo (dossier .zip décompressé).

Création d'un fichier HTML5 Canvas

Une fois l'animation de la bannière terminée, veuillez ajouter les lignes de code suivantes dans le fichier index.html

1. Après la balise <title></title>


<meta name="ad.size" content="height=0,width=0">

Remplacer les deux 0 par les valeurs de la bannière si c'est un format fixe et non expand. Voir la partie sur Size meta tag

2. Script à ajouter pour le clickTag avant le <body>


<script type="text/javascript">
    var clickTag = "//www.athome.lu";
</script>

Afin de rendre toute la bannière cliquable

3. L’attribut onclick="javascript:window.open(window.clickTag)" sur la balise <canvas></canvas>


onclick="javascript:window.open(window.clickTag)"

Exemple


<canvas id="canvas" width="840" height="250" style="background-color:#FFFFFF; width:840px; height:250px" onclick="javascript:window.open(window.clickTag)"></canvas>

4. Avoir le curseur en forme de main. Ajouter les lignes suivantes avant le <body>


<style>
    body, #canvas {
        cursor:pointer;
    }
</style>

Note: Pour vérifier si votre fichier .zip est conforme, rendez-vous à cette url => https://h5validator.appspot.com/dcm

Max 1Mo (dossier .zip décompressé).

Size meta tag

Servez-vous de la balise Meta suivante pour définir les dimensions de votre création dans le fichier HTML :
<meta name="ad.size" content="width=[x],height=[y]">.

Contrairement aux images et aux vidéos, les documents HTML n'ont pas de dimensions propres. C'est pour cette raison que vous devez utiliser la balise Meta associée à la taille afin d'indiquer la taille souhaitée pour votre création. Bien qu'il s'agisse d'un paramètre facultatif de votre document HTML, elle constitue le meilleur moyen de s'assurer que la création sera diffusée avec les dimensions appropriées.

Les dimensions des créations HTML5 peuvent être fixes ou flexibles.

Les créations à dimensions fixes ont une taille standard (300 x 250 ou 400 x 400, par exemple). Les traffickers ne peuvent attribuer ce type de création qu'à un emplacement de même taille.

Les créations à dimensions flexibles s'ajustent à la taille de l'emplacement. Ce type de dimension est indiqué par un zéro dans DCM (0 x 0, 300 x 0 ou 0 x 250, par exemple). Les traffickers peuvent attribuer les créations flexibles aux emplacements, sans tenir compte de la taille de ces derniers.

Exemples

Fixe: pour les dimensions fixes, (comme 300x250), entrez les dimensions comme indiqué ci-dessous.

    
<meta name="ad.size" content="width=300,height=250">

Flexible: pour les dimensions flexibles, entrez un 0 pour la largeur et un 0 pour la hauteur.

    
<meta name="ad.size" content="width=0,height=0">

Largeur flexible: pour une largeur flexible et une hauteur fixe, entrez un 0 pour la largeur et une valeur fixe (comme 250) pour la hauteur.

    
<meta name="ad.size" content="width=0,height=250">

Hauteur flexible: pour une hauteur flexible et une largeur fixe, entrez une valeur fixe (comme 300) pour la largeur et un 0 pour la hauteur. 

    
<meta name="ad.size" content="width=0,height=250">