Préparer les éléments HTML5 autres que rich media pour Campaign Manager

Ce guide vous aide à préparer les éléments HTML5 à importer dans Campaign Manager pour concevoir une création graphique.

Les bannières HTML5 Campaign Manager sont des créations de base qui utilisent des tags de clic, et non des sorties Rich Media. Pour les créations rich media, reportez-vous plutôt aux Guides HTML5 Rich Media.

Vous n'avez encore jamais utilisé le format HTML5 ? Consultez la section À propos des créations HTML5 présentée ci-dessous pour en savoir plus sur les types de créations qui utilisent le format HTML5.

À propos des créations HTML5

Tout développer   Tout réduire

Principaux avantages du format HTML5

Les créations HTML5 ne nécessitent pas de plug-ins tiers ni de types de fichiers spéciaux. Elles sont par conséquent compatibles avec la plupart des appareils mobiles (iOS, par exemple). En fait, les fonctionnalités HTML5 sont de plus en plus acceptées par les principaux appareils et navigateurs du marché.

Créations utilisant le format HTML5
  • Les créations graphiques sont des créations autres que rich media qui sont conçues avec du code HTML, JavaScript ou CSS. Elles sont compatibles avec les fonctionnalités suivantes :

    • Création de rapports sur les clickTAGs pour chaque sortie
    • Taille du fichier d'élément illimitée
    • Composant polite load
  • Les créations rich media incluent des éléments interactifs tels que des vidéos, des jeux ou des galeries. Elles peuvent également se déplier pour vous permettre de transmettre en grand format le message relatif à votre marque ou pour couvrir la totalité de l'écran entre les pauses naturelles de la diffusion du contenu. Chaque élément peut inclure des statistiques de suivi détaillées vous permettant d'obtenir des informations sur les performances des créations, y compris jusqu'à 100 sorties et 400 événements de suivi au total. Les créations rich media doivent être conçues dans Studio. Leur publication et leur trafficking doivent ensuite avoir lieu dans Campaign Manager.

Ressources destinées à la configuration de créations HTML5 pour Campaign Manager

Utilisez les guides suivants pour configurer des bannières HTML5 ou des créations graphiques en vue d'une importation directe dans Campaign Manager :

Préparer et importer des éléments HTML5

Pour configurer des créations graphiques ou des éléments HTML5, importez votre création HTML5 dans Campaign Manager sous la forme d'un fichier .zip. Ce dernier doit contenir un fichier HTML et tous les fichiers référencés par celui-ci.

  1. Créez un dossier.

  2. Ajoutez le fichier HTML et tous les éléments référencés par celui-ci. N'incluez aucun autre fichier. Vous pouvez organiser vos éléments dans des sous-dossiers non compressés.

    Éléments à inclure dans le fichier .zip

    Éléments requis

    • Fichier HTML : principal élément de la création HTML5. Il correspond au point d'entrée de la création. Il doit s'agir d'un document HTML complet incluant au moins un clickTAG et pouvant être chargé dans un cadre iFrame. Campaign Manager diffuse le cadre iFrame avec les éléments. Les clickTAGs sont décrits plus loin dans cet article.

    • Autres fichiers : ajoutez tous les fichiers référencés par le fichier HTML. N'incluez aucun fichier non référencé.

    Éléments non autorisés

    • Pas de fichiers .zip imbriqués : n'incluez aucun autre fichier .zip dans le fichier .zip de votre création HTML5. En revanche, vous pouvez compresser ensemble plusieurs fichiers .zip de créations HTML5 afin de procéder à une importation groupée dans Campaign Manager.

    • Pas de fichiers non référencés : comme indiqué ci-dessus, n'incluez que des fichiers référencés par le fichier HTML.

    • Pas de stockage local ou par session : les éléments HTML5 faisant appel au stockage local ou par session sont interdits dans Campaign Manager.

    • Pas d'éléments de back-up : seuls les éléments de back-up référencés dans le fichier HTML (le cas échéant) doivent être inclus dans le fichier .zip de la création HTML5.

      • Le trafficker doit importer séparément une image de back-up dans Campaign Manager. Elle sera utilisée à la place des éléments principaux si ces derniers sont incompatibles. N'ajoutez pas cette image de back-up au fichier .zip de votre création HTML5.

      • Notez cependant que certains fichiers HTML peuvent être codés de façon à utiliser leurs propres éléments de back-up si un navigateur ne gère pas toutes les fonctionnalités. Dans ce cas, vous devez inclure une image de back-up dans votre fichier .zip en plus de celle devant être importée séparément par le trafficker.

    Types de fichiers acceptés et limites relatives au fichier .zip
    • Types de fichiers acceptés : HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML et SVG.

    • Nombre maximal de fichiers : le fichier .zip peut comporter jusqu'à 100 fichiers.

    • Taille maximale : celle-ci varie selon les paramètres de compte. 

    Exemple de fichier HTML5 Aide relative aux fichiers .adz

    Dans Campaign Manager, les créations HTML5 sont également acceptées sous la forme d'un fichier .adz. Celui-ci s'utilise exactement comme un fichier .zip. Dans le cadre de l'utilisation que vous souhaitez en faire, les fichiers .zip et .adz ne présentent aucune différence.

  3. Compressez le dossier sous forme de fichier .zip. Vous avez besoin d'aide pour compresser un dossier? Consultez le centre d'aide Windows ou Apple.

  4. Le trafficker peut maintenant importer ce fichier .zip dans Campaign Manager Trafficking.

    Pour en savoir plus sur Trafficking, consultez le centre d'aide Campaign Manager :

Problèmes d'importation

Pourquoi ne puis-je pas sélectionner mon fichier de création HTML5 pour l'importer dans Campaign Manager ?
  1. Vous ne pouvez importer que des fichiers .zip ou .adz. Compressez votre fichier HTML (et tous les fichiers auxquels il fait référence) en un seul fichier .zip, puis essayez à nouveau.

  2. Si vous êtes certain d'avoir créé un fichier .zip, vérifiez tout de même l'extension : cliquez avec le bouton droit sur le fichier et consultez ses propriétés pour vous assurer qu'il porte bien l'extension .zip.

  3. Si vous ne pouvez toujours pas sélectionner votre fichier, contactez l'équipe d'assistance.

Pourquoi l'importation dans Campaign Manager a-t-elle été refusée ?

Le problème peut venir du fait que votre fichier ne contient pas d'éléments HTML5 valides, qu'il inclut plus de 100 fichiers (limite autorisée) ou qu'il dépasse la taille de fichier maximale. Autre possibilité : les éléments HTML5 font appel à des API JavaScript pour le stockage local ou de session. Afin de protéger la vie privée des utilisateurs, ces API ne sont pas autorisées dans Campaign Manager.

Pourquoi les API JavaScript de stockage local/de session ne sont-elles pas autorisées dans Campaign Manager ?

Afin de protéger la vie privée des utilisateurs, Campaign Manager n'accepte pas les éléments HTML5 faisant appel au stockage local ou de session. Si, pour cette raison, votre importation est refusée, demandez à votre développeur de supprimer les API interdites. Réessayez ensuite d'importer l'élément. En particulier, vous ne pouvez pas importer d'éléments HTML5 avec les API JavaScript suivantes :

  • indexedDB
  • localStorage
  • openDatabase
  • sessionStorage

Si vos objectifs publicitaires dépendent de ces API, essayez d'utiliser plutôt les paramètres Campaign Manager. Par exemple, certains annonceurs font appel à ces API pour le ciblage des annonces et la limitation du nombre d'expositions, mais cela n'est pas nécessaire. En effet, vous pouvez utiliser Campaign Manager pour définir de nombreux types de ciblage, ainsi que des limites du nombre d'expositions. Si vous avez besoin d'aide pour mettre en place des solutions de contournement, n'hésitez pas à contacter notre service d'assistance. Gardez simplement à l'esprit que quelle que soit la manière dont vous configurez votre élément, vous ne devez capturer que les données qui respectent les exigences de confidentialité définies dans le contrat que vous avez conclu avec Google Marketing Platform.

Qu'est-ce que le stockage local et de session ? Il existe deux types de stockage Web HTML5 pour stocker des données dans un navigateur. Le stockage local consiste à enregistrer un fichier sur le navigateur pour toutes les sessions. Ce fichier demeure en permanence dans le navigateur, sauf si l'utilisateur le supprime manuellement ou vide le cache. Le stockage de session ne permet de stocker des données dans le navigateur que pendant la durée d'une session spécifique. Lorsque l'utilisateur ferme, puis redémarre le navigateur, ces données sont effacées.

Pourquoi ces types de stockage ne sont-ils pas autorisés ? Le fichier ainsi stocké peut potentiellement inclure du code conçu pour capturer des informations personnelles, suivre l'activité du navigateur sur plusieurs sessions ou envoyer des données à des tiers susceptibles d'enfreindre les conditions de votre contrat avec Google Marketing Platform. Même si le stockage local ou de session ne sert pas uniquement à cette fin, il s'agit d'une utilisation possible, étant donné que le fichier stocké peut inclure n'importe quel type de code.

Consignes destinées aux développeurs

Ressources

IAB et Studio

Dimensions

Consignes relatives aux dimensions

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.

Dans Campaign Manager, les dimensions des créations HTML5 peuvent être fixes (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.

Exemples de balises Meta associées à la taille
  • Saisissez les dimensions fixes comme indiqué ci-dessous.

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

ClickTAGs

Consignes relatives aux variables clickTAG

Insérez une ou plusieurs variables clickTAG dans votre fichier HTML. Elles permettent à Campaign Manager de transmettre une URL de destination à la création et d'effectuer le suivi des clics. Par ailleurs, les traffickers peuvent modifier l'URL de destination une fois que la création a été finalisée et a fait l'objet d'un trafficking.

  • Assurez-vous que votre bannière utilise la variable clickTAG comme destination du clic.

  • Le tag de clic doit pouvoir être lu sans difficulté par le serveur publicitaire : pas de minimisation ni de brouillage. Toutefois, vous pouvez utiliser la minimisation dans le reste du code, ainsi que dans les autres fichiers.

  • Nous vous déconseillons d'utiliser des URL de destination codées en dur dans votre fichier HTML, car cela empêche Campaign Manager d'effectuer le suivi des clics. 

Utiliser Google Web Designer pour les événements de sortie

Le composant Zone cliquable de Google Web Designer est entièrement compatible avec Campaign Manager. Aucun code personnalisé n'est requis.

Pour ajouter un clickTAG à l'aide d'une zone cliquable, procédez comme suit :

  1. Votre annonce doit comprendre un bouton ou un autre élément visuel clair d'incitation à l'action sur lequel l'internaute pourra cliquer ou appuyer.
  2. Faites glisser le composant Zone cliquable depuis le panneau des composants vers l'espace de création, puis placez-le au-dessus de l'incitation à l'action.
  3. Dans le panneau "Événements", cliquez sur le bouton "Nouvel événement".
  4. Dans la boîte de dialogue qui s'affiche, sélectionnez les options suivantes :
    Cible Composant Zone cliquable (gwd-taparea_1)
    Événement Zone cliquable > Appuyer/Cliquer
    Cible Annonce Google > Quitter
    Destinataire gwd-ad
    Configuration

    ID des statistiques :

    un libellé, tel que "Acheter le produit", qui facilitera l'interprétation de vos rapports.

    URL :

    URL de page de destination vers laquelle les internautes sont dirigés lorsqu'ils cliquent sur l'incitation à l'action.

    Réduire en quittant (annonces expand uniquement) :

    Cochez cette case si vous souhaitez que les annonces expand se replient lorsque les internautes appuient sur une sortie.

    Mettre le fichier multimédia en pause à la fermeture :

    Cochez cette case si vous voulez mettre en pause un élément vidéo ou audio lorsque les internautes appuient sur une sortie.

Exemple de clickTAG utilisant JavaScript

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">
  // Remplacez http://www.example.com par votre propre page de destination.
  // N'utilisez PAS http://www.google.com.

  var clickTag = "http://www.example.com"; </script>
</head>
<!-- Insérez le reste du code de la création à cet endroit. -->
</html>

Assurez-vous que la création utilise la variable clickTAG comme URL de destination :

<a href="javascript:window.open(window.clickTag)">
  <img src="images/dclk.png" border=0>
</a>
Exemple avec plusieurs variables clickTAG utilisant JavaScript

Les créations graphiques acceptent plusieurs variables clickTAG. Voici un exemple d'insertion de plusieurs variables clickTAG dans un document HTML :

<html>
<head>
<meta name=”ad.size” content=”width=300,height=250”>
<script type="text/javascript">
  var clickTag = "https://www.example.com";
  var clickTag1 = "https://www.example.com/folder";
  var clickTag2 = "
https://www.example.com/anotherfolder";
</script>
</head>
<!-- Insérez le reste du code de la création à cet endroit. -->
</html>

Assurez-vous que la création utilise la variable clickTAG appropriée comme URL de destination :

<a href="javascript:window.open(window.clickTag)">
  <img src="images/dclk.png" border=0>
</a>
<a href="javascript:window.open(window.clickTag1)">
  <img src="images/dclk.png" border=0>
</a>
<a href="javascript:window.open(window.clickTag2)">
  <img src="images/dclk.png" border=0>
</a> 

Exemples de fichiers

Exemple de document HTML

Voici un exemple de document HTML complet utilisé pour une création HTML5. Le clickTAG et la balise Meta associée à la taille sont indiqués en gras.

La création est tellement simple qu'elle ne requiert aucun autre élément. S'il s'agissait de votre création HTML5, il vous faudrait la compresser sous la forme d'un fichier .zip, remplacer son extension de fichier par adz, puis l'envoyer à votre trafficker Campaign Manager.

Document

<html>
  <head>
    <title>Page HTML (dimensions flexibles)</title>
    <meta name="ad.size" content="height=0,width=0">
    <style>
      html, body {background-color: blue;}
      p { color:white; }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      var clickTag = "http://www.example.com"; // Remplacez-la par une vraie URL.
      function resizeWindow()
      {
        $('p').css({ 'width':'100%', 'text-align':'center' });
        var h1 = $('h1').height();
        var h = h1/2;
        var WinHeight = $(window).height();
        var w = WinHeight/2;
        var m = w - h;
        var WinWidth=$(window).width();
        $('p').css("margin-top",m + "px");
        $("p").text("Size="+WinWidth+"x"+WinHeight);
      }
      $(document).ready(function () {
        resizeWindow();
      });
      $(window).resize(function () {
        resizeWindow();
      });
     </script>
  </head>
<body>
  <a href="javascript:window.open(window.clickTag)"><p>Chargement de la page…</p></a> </body>
</html>
Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?