Exigences relatives aux créations HTML5

Lorsque vous configurez votre dossier zip HTML5, veuillez respecter les consignes ci-dessous.

  • Si vous utilisez Google Web Designer pour concevoir des créations HTML5, veillez à sélectionner l'environnement "DoubleClick".
  • La galerie Rich Media contient des exemples de fichiers HTML5.
  • Les consignes suivantes s'appliquent normalement à tous les navigateurs compatibles avec HTML5. Toutefois, il se peut que certaines créations ne fonctionnent pas comme prévu dans tous les environnements. Veillez donc à tester minutieusement le code de votre création HTML5.

Confirmez que votre dossier est compatible avec la norme SSL

Les créations HTML5 doivent être compatibles avec la norme SSL pour être diffusées sur des sites HTTPS.

Suivez les consignes relatives aux dimensions

  • Contrairement aux images et aux vidéos, les documents HTML n'ont pas de dimensions propres. Vous devez donc recourir à la balise Meta associée à la taille afin d'indiquer la taille souhaitée pour votre création et de vous assurer qu'elle est diffusée avec les dimensions appropriées : <meta name="ad.size" content="width=[x],height=[y]">.
  • Les dimensions des créations HTML5 doivent être fixes (par exemple, 300 x 250, 400 x 400, 728 x 90, etc.). Les tailles dynamiques (telles que "Fluide") ne sont pas acceptées.
  • Pour les fichiers HTML de créations dans des dossiers Google Web Designer, les propriétés minWidth et minHeight du paramètre creativeProperties doivent être différentes de zéro. Par exemple, "creativeProperties":{"minWidth":0,"minHeight":0,"maxWidth":0,"maxHeight":0} génère une erreur.

Exemple de balise Meta associée à la taille

Voici un exemple de balise Meta pour une taille fixe (telle que 300 x 250) :

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

Suivez les consignes relatives aux clickTAGs

Les clickTAGs définissent les URL de destination pour chaque sortie de votre création HTML5. Une sortie est une zone sur laquelle l'internaute peut cliquer et qui redirige le navigateur vers une page de destination.

  • Pour en savoir plus sur l'ajout de sorties HTML5 (y compris de sorties utilisant Google Web Designer), consultez le Centre d'aide DoubleClick Creative Solutions. Ce centre d'aide est destiné aux concepteurs de créations.

Lorsque l'utilisateur clique sur une sortie, la création appelle DFP pour obtenir l'URL de destination associée à cette sortie.

  • Vous pouvez définir cette URL dans votre création ou annonce, selon vos besoins et selon le type de création.
  • Si vous définissez des clickTAGs à la fois au niveau de la création et de l'annonce, le paramètre défini au niveau de l'annonce prévaut sur celui défini au niveau de la création.

DFP détecte les clickTAGs lorsque vous importez les éléments. Vous pouvez modifier l'URL de destination d'un clickTAG à tout moment, même après avoir exporté vos tags. Voici quelques bonnes pratiques à observer en matière de clickTAGs :

  • Assurez-vous que votre création utilise la variable clickTAG comme destination du clic.
  • Le clickTAG doit pouvoir être lu sans difficulté par l'ad server. Les mécanismes de réduction de taille et de brouillage sont donc à éviter. Toutefois, vous pouvez utiliser les techniques de réduction de taille dans le reste du code, ainsi que dans les autres fichiers.
  • Nous déconseillons l'utilisation d'URL de destination codées en dur dans vos éléments, car cela empêche DFP d'effectuer le suivi des clics et les traffickers de mettre à jour l'URL. Après l'importation, DFP vous avertit en cas de présence d'URL codées en dur dans vos éléments.

Exemple d'insertion d'un clickTAG

Voici un exemple d'insertion de clickTAG dans un document HTML :

<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[Insérez le reste du code de la création à cet endroit.] </html>

Votre création doit utiliser la variable clickTAG en tant qu'URL de destination :

<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>
Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?