Les créations HTML5 sont des annonces contenant du code JavaScript, HTML et CSS, diffusées sur des pages Web ou dans des applications mobiles. Elles peuvent être de type display ou rich media.
- Display : annonces illustrées sur lesquelles vous pouvez cliquer pour accéder au site Web d'un annonceur
- Rich media : annonces comportant des éléments interactifs comme des animations, des galeries d'images, des jeux ou des vidéos intégrées
Dans Display & Video 360, vous pouvez importer directement des bannières display et rich media. Toutefois, si vous souhaitez utiliser des créations dotées de fonctionnalités rich media avancées, au format expand ou interstitiel par exemple, utilisez Studio. Vous pouvez effectuer le trafficking des créations Studio via Campaign Manager 360, puis les synchroniser avec votre compte Display & Video 360.
Vous pouvez affecter les créations HTML5 à des éléments de campagne display.
Types de créations HTML5 compatibles
Display & Video 360 est compatible avec les formats d'annonces HTML5 ci-dessous. Pour obtenir des exemples de chaque type de création, visitez la galerie Rich Media.
Display
Création HTML5 avec une ou plusieurs tailles fixes, et une position fixe sur une page Web ou dans une application mobile.
Fonctionnalités display compatibles :
- Tags de clic : un tag de clic est un extrait de code qui vous permet de mesurer les clics qui ouvrent la page de destination de votre annonceur.
- Créations responsives : pour simplifier l'attribution des créations, vous pouvez regrouper plusieurs tailles de bannière display dans une même création responsive.
Rich Media
Terme de publicité numérique désignant une annonce qui intègre des fonctionnalités avancées telles qu'une vidéo, de l'audio ou d'autres éléments engageants. Les annonces rich media acceptent davantage de métriques pour enregistrer des interactions avancées, ce qui vous donne une idée plus précise de la manière dont les utilisateurs interagissent avec votre annonce. Par exemple, les annonces rich media peuvent comporter des compteurs et des timers qui vous indiquent combien de fois ou combien de temps les internautes ont joué à un jeu dans votre annonce.
Fonctionnalités et formats rich media compatibles :
- Métriques rich media : comptabilisez les clics, les sorties, les interactions, la durée de lecture des vidéos et plus encore à l'aide des métriques rich media.
- Vidéo InBanner : annonces intégrant des lecteurs vidéo. Vous pouvez inclure des vidéos dans n'importe quel format rich media, à l'exception des créations basées sur les données.
- Expand plein écran : annonces qui peuvent se développer pour remplir l'écran d'un appareil mobile. Il peut s'agir de créations Swirl 3D, par exemple.
- Créations basées sur les données : utilisez des créations basées sur les données pour personnaliser votre message selon différents segments de clients.
- Créations au format parallaxe : utilisez cet effet d'animation dans vos créations rich media pour créer l'illusion de profondeur avec des calques d'images. Lorsque l'utilisateur fait défiler la page vers le haut ou vers le bas sur un appareil mobile, les images de premier plan et de fond se déplacent à des vitesses différentes.
Concevoir une création HTML5
Créer une bannière display HTML5
Google Web Designer
Éditeur HTML5
Si vous préférez écrire votre propre code, vous pouvez créer une bannière à l'aide de n'importe quel éditeur HTML5.
(avancé) Créer entièrement une bannière HTML5
- Créez un fichier HTML valide en incluant les tags
<html>,<head>,<title>et<body>. - Ajoutez un tag
<meta>pour indiquer la taille souhaitée pour votre création :
<meta name="ad.size" content="width=[x],height=[y]"> - Ajoutez un tag de clic :
-
Ajoutez ce tag de script et remplacez
https://www.google.compar la page de destination de votre annonceur :<script type="text/javascript">
var clickTag = "https://www.google.com";
</script> - Encapsulez le tag
<div>de votre image principale ou de votre conteneur d'annonce avec un tag<a>pour le rendre cliquable :<a href="javascript:window.open(window.clickTag)">
<div id="container">
<img src="image.png" />
</div>
</a>
-
Créer une bannière rich media
Le composant Enabler de Studio est obligatoire dans les bannières rich media. Utilisez-le pour :
- Charger des vidéos et des images de manière sécurisée avec
Enabler.getUrl(). - Ouvrir la page de destination de l'annonceur avec
Enabler.exit(). Utilisez des sorties au lieu de tags de clic dans vos bannières rich media.
Pour éviter tout retard lié à un refus de création, suivez les consignes relatives aux créations rich media lorsque vous concevez une création.
Contenu du fichier ZIP d'une création HTML5
Le fichier ZIP d'une création HTML5 peut inclure jusqu'à 100 fichiers et sa taille n'est soumise à aucune limite. Toutefois, pour répondre aux exigences de l'éditeur, efforcez-vous de minimiser la taille de votre fichier ZIP.
Attribuer un nom au fichier ZIP
Le nom que vous attribuez au fichier ZIP de la création HTML5 ne doit pas comporter plus de 50 caractères (extension ".zip" comprise). Si votre nom de fichier est plus long, vous ne pourrez pas l'importer.
Types de fichiers compatibles
- HTML/texte : HTML, HTM, CSS, JS
- Images : JPG, JPEG, GIF, PNG, SVG
- Polices : DFONT, EOT, OTF, TTE, TTF, WOFF, WOFF2
Contenu à inclure dans le fichier ZIP d'une création HTML5
- Fichier HTML : principal élément de la création HTML5. Le fichier doit inclure au moins une sortie ou un tag de clic et doit pouvoir être chargé dans un cadre iFrame. Display & Video 360 diffuse le cadre iFrame avec les éléments.
- Autres fichiers : fichiers image, CSS et JavaScript utilisés dans votre fichier HTML. Les créations rich media sont également compatibles avec les types de fichiers suivants (toutefois, les vidéos doivent être hébergées sur un serveur externe, ou la création doit être conçue avec Studio) :
.avi, .mov, .mp4, .m4v, .mpeg, .mpg, .oga, .ogg, .ogv, .webm, .wmv
Contenu à ne pas inclure dans le fichier ZIP d'une création HTML5
- Autres fichiers ZIP : n'ajoutez pas d'autres fichiers ZIP dans le fichier ZIP de votre création HTML5.
- Fichiers inutilisés : n'ajoutez pas d'autres fichiers que ceux effectivement utilisés par le fichier HTML. N'ajoutez pas de fichiers sources ou de développement.
- Stockage local ou de session : Display & Video 360 n'accepte pas les éléments HTML5 qui utilisent un stockage local ou de session.
- Image de back-up : n'incluez pas d'images de back-up dans le fichier ZIP de votre création HTML5. Importez séparément les images de back-up dans la section "Images de back-up".
- Fichiers avec des noms longs : les noms des fichiers vidéo et audio ne doivent pas comporter plus de 50 caractères codés sur un octet. Les autres noms de fichiers doivent comporter un maximum de 200 caractères codés sur un octet. (Par exemple, le chinois, le coréen et le japonais utilisent des caractères codés sur deux octets. Dans ces langues, les limites sont de 25 et de 100 caractères.)
(Facultatif) Images de back-up
Les images de back-up sont facultatives et ne sont diffusées que si vos éléments de création ne sont pas compatibles avec la plate-forme ou le navigateur de l'internaute, par exemple, lorsque celui-ci utilise Internet Explorer 8 et que votre création a recours à des animations CSS.
Importez vos images de back-up séparément du fichier ZIP de votre création. Si vous n'importez pas d'image de back-up, une image vierge générée par le système sera automatiquement affichée.
Importer une création HTML5
Avant de commencer, assurez-vous d'avoir empaqueté les éléments de votre création dans un fichier ZIP. En savoir plus sur les éléments à inclure dans le fichier ZIP d'une création HTML5
-
Accédez à un annonceur, puis cliquez sur Créations dans le menu de gauche.
-
Cliquez sur Nouvelle, sur Importer, puis sur HTML5 ou image.
-
Attribuez un nom à la création dans Display & Video 360.
-
Pour ajouter les fichiers de votre création, déposez un fichier ZIP de votre ordinateur sur le texte "Déposer le fichier ici". Vous pouvez également cliquer sur Importer, puis sélectionner un fichier ZIP.
Si votre importation HTML5 est refusée, suivez cette procédure de dépannage. -
Sélectionnez une ou plusieurs dimensions pour la diffusion de votre création. Display & Video 360 accepte les créations de taille unique, ou les créations HTML5 responsives compatibles avec plusieurs tailles.
-
Dans la section "Événements", vous pouvez examiner et modifier les sorties détectées dans la création. Pour chaque sortie (ou tag de clic), vous pouvez modifier l'URL de la page de destination, commençant par
http://ouhttps://. Pour modifier l'URL ou le libellé de rapport, passez la souris sur la ligne concernée, puis cliquez sur Modifier.
Remarque : Une fois la création enregistrée, quelques minutes peuvent s'écouler avant que la page de destination actualisée s'affiche dans l'aperçu ou dans le compte d'annonceur Campaign Manager 360 synchronisé. -
Enregistrez la création.
Display & Video 360 examine manuellement et automatiquement vos créations pour s'assurer qu'elles fonctionnent correctement. Nous vérifions également que les créations respectent les règles de Google relatives aux annonces ainsi que les règles des places de marché sur lesquelles elles peuvent être diffusées. Vous pouvez vérifier l'état de vos créations dans l'onglet État de la création.
Paramètres avancés
Les paramètres suivants sont facultatifs :
-
Si votre annonce interstitielle ne s'adapte pas à l'écran sur mobile, Display & Video 360 la redimensionnera. Pour empêcher la mise à l'échelle, activez l'option "Ne pas redimensionner pour ajuster à la largeur de l'appareil".
-
Ajoutez une image de back-up et un libellé de rapport. Si vous importez une création responsive, vous ne pouvez importer qu'une seule image de back-up par taille.
-
Importez une image polite load. Celle-ci apparaît en cas de retard lors du chargement des fichiers de votre création principale ou si la connexion réseau est lente.
- Si votre annonceur Display & Video 360 est associé à un compte Campaign Manager 360, ajoutez une annonce de suivi afin de pouvoir générer des rapports dans l'annonceur Campaign Manager 360 associé. Remarque : cette option n'est disponible que pour les créations rich media, les créations Swirl et les créations personnalisées basées sur les données.
- Cliquez sur Propriétés de diffusion.
- Recherchez une annonce de suivi Campaign Manager 360 existante. Pour qu'elle ait le temps d'être synchronisée, créez une annonce de suivi dans Campaign Manager 360 avant de concevoir votre création dans Display & Video 360.
Conseil : Pour trouver l'annonce de suivi appropriée plus facilement, n'attribuez qu'une annonce de suivi par annonce et par emplacement dans Campaign Manager 360.
-
Cliquez sur Informations supplémentaires pour ajouter une balise de suivi, un code d'intégration ou des commentaires.
Partager un aperçu
Vous pouvez partager des créations HTML5 avec d'autres personnes afin qu'elles les examinent ou les approuvent au moyen d'un lien de prévisualisation. Toute personne avec laquelle vous partagez ce lien pourra accéder à ces créations. Aucune connexion n'est requise.
Questions fréquentes
Pourquoi la taille indiquée pour la création est-elle incorrecte après l'importation du fichier ?Voici des problèmes fréquents qui peuvent vous empêcher d'importer un élément de création :
- Nom de fichier trop long : pour la plupart des types de fichiers, la longueur maximale est de 200 caractères codés sur un octet, ou de 100 caractères codés sur deux octets. Pour les fichiers audio et vidéo, la longueur maximale est de 50 caractères codés sur un octet, ou de 25 caractères codés sur deux octets.
- Fichiers ZIP imbriqués dans d'autres fichiers ZIP : vous ne pouvez pas inclure un fichier ZIP compressé dans un autre fichier ZIP.
- Création sans clic : toutes les créations doivent inclure au moins une sortie menant à la page de destination d'un annonceur.
- Création Google Web Designer nécessitant une mise à jour : si votre création a été conçue dans Google Web Designer, l'erreur "Les métadonnées présentes dans le code HTML Google Web Designer ne sont pas valides" peut s'afficher. Cela signifie que la création a été conçue avec une version obsolète de Google Web Designer et qu'elle doit être mise à jour. Effectuez la mise à jour vers la dernière version de Google Web Designer, puis ouvrez et republiez la création.
Pour obtenir de l'aide supplémentaire, consultez Résoudre les problèmes d'importation des créations.
