Préparer les éléments display HTML5 pour Campaign Manager 360

Ce guide vous aide à préparer les éléments display HTML5 à importer dans Campaign Manager 360.

À propos des créations HTML5

Les créations HTML5 peuvent être des créations display ou rich media. Pour en savoir plus sur chaque type de création, consultez les informations ci-dessous.

Créations display

Les créations display correspondent aux créations qui ne sont pas rich media et qui peuvent utiliser le format image ou HTML5. Les créations display offrent les avantages suivants :

• Rapports sur les tags de clic pour chaque sortie
• Composant polite load
• Possibilité d'inclure des éléments HTML5 responsifs

Créations rich media

Les créations rich media sont des créations HTML5 qui peuvent inclure des vidéos InBanner, être développées dans un format plus grand ou inclure des éléments interactifs comme des jeux. Les créations rich media offrent les avantages suivants :

• Rapports sur plusieurs sorties, compteurs et timers permettant d'obtenir des données sur les interactions
• Format extensible jusqu'en plein écran
• Possibilité d'inclure du son et des vidéos InBanner
• Composant polite load

Préparer et importer les éléments de vos créations display HTML5

Pour configurer des créations display avec HTML5, importez votre création HTML5 dans Campaign Manager 360 sous forme de fichier .zip. Ce dernier doit contenir un fichier HTML et tous les fichiers auxquels il fait référence.

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 : il s'agit de l'élément principal de votre création display 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 tag de clic et pouvant être chargé dans un cadre iFrame. Le cadre iFrame et les éléments sont diffusés par Campaign Manager 360. Les tags de clic 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 360.

   • 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 de session : les éléments HTML5 faisant appel au stockage local ou de session sont interdits dans Campaign Manager 360.

   • Pas de % dans le nom : veillez à ne pas inclure de symbole de pourcentage (%) dans les noms de fichier de l'élément.

   • Pas d'assets de back-up

     • (Facultatif) Le trafficker peut importer une image de back-up distincte dans Campaign Manager 360. Elle s'affiche si Campaign Manager 360 ne peut pas utiliser vos assets principaux, car ils ne sont pas compatibles. N'ajoutez pas d'image de back-up dans le fichier ZIP de votre création HTML5.

   Types de fichiers acceptés et limites concernant le fichier ZIP

   • Types de fichiers acceptés : HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF, WOFF2

   • Nombre maximum de fichiers par .zip : 100

   • Taille maximale : 10 Mo

   Exemple de fichier .zip de création HTML5

   Télécharger un exemple de fichier ZIP

   Aide relative aux fichiers .adz

   Campaign Manager 360 accepte également les créations HTML5 sous forme de 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 en fichier .zip. Vous avez besoin d'aide pour compresser un dossier ? Consultez le centre d'aide Windows ou Apple.

4. Le trafficker peut désormais importer ce fichier .zip dans Campaign Manager 360.

   En savoir plus sur le trafficking :

   • Procédure permettant d'ajouter des créations dans Campaign Manager 360

   • Configuration d'une création display

Problèmes d'importation

Utilisez l'outil de validation HTML5 pour vérifier que les fichiers .zip sont compatibles avec Campaign Manager 360.

Je ne parviens pas à sélectionner ma création display HTML5 en vue de l'importer dans Campaign Manager 360. Pourquoi ?

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 360 a-t-elle été refusée ?

Si vous rencontrez des difficultés pour importer votre fichier, le problème peut être dû au fait que votre fichier ne contient pas d'éléments HTML5 valides ou qu'il inclut plus de 100 fichiers (maximum autorisé). 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, Campaign Manager 360 n'autorise pas ces API.

Pourquoi les API JavaScript avec stockage local ou par session ne sont-elles pas autorisées dans Campaign Manager 360 ?

Afin de protéger la vie privée des utilisateurs, Campaign Manager 360 n'accepte pas les éléments HTML5 faisant appel au stockage local ou par 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 360 360. Par exemple, certains annonceurs utilisent ces API pour le ciblage des annonces et la limitation du nombre d'expositions, mais ce n'est pas nécessaire : vous pouvez utiliser Campaign Manager 360 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 reste dans le navigateur en permanence, sauf si l'utilisateur vide le cache ou supprime ce fichier manuellement. Le stockage de session ne stocke 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 inclure du code conçu pour capturer des informations personnelles, effectuer le suivi de l'activité du navigateur sur plusieurs sessions ou envoyer des données à des tiers susceptibles d'enfreindre les conditions d'utilisation définies dans votre contrat Google Marketing Platform. Même si le stockage local ou par 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

• Consignes de l'IAB relatives au format HTML5

Définir la taille d'une création

Consignes relatives aux dimensions

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. Vous pouvez saisir les dimensions comme indiqué ci-dessous :

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

Tags de clic

Consignes relatives aux tags de clic

Les tags de clic servent à définir les pages de destination correspondant à chaque sortie sur votre création avec des éléments HTML5. Une sortie est une zone cliquable qui redirige l'internaute vers une page de destination. Chaque tag de clic identifie la page de destination d'une sortie spécifique.

Lorsqu'un internaute clique sur une sortie, celle-ci appelle Campaign Manager 360 pour obtenir la page de destination qui lui est associée. Vous pouvez définir cette page de destination dans la création ou l'annonce, en fonction de vos besoins.

Campaign Manager 360 détecte les tags de clic lors de l'importation des éléments. Vous pouvez modifier la page de destination d'un tag de clic à tout moment, même après avoir exporté les tags. En effet, le tag de clic correspond à une variable standard : il s'agit d'un espace réservé pour la page de destination, et non d'une valeur codée en dur.

Voici quelques bonnes pratiques que nous vous conseillons de respecter lors de la configuration des tags de clic, sachant que les paramètres au niveau de l'annonce supplantent ceux qui sont définis au niveau de la création :

• Assurez-vous que la bannière utilise la variable clickTAG comme destination des clics.
• Le tag de clic doit être facilement lisible par l'ad server : n'utilisez aucune minimisation (ce procédé est toutefois possible pour les autres sections du code et dans les autres fichiers) ni aucun obscurcissement.
• Nous déconseillons d'insérer directement les URL codées en dur dans votre élément, car cette méthode empêche Campaign Manager 360 d'effectuer le suivi des clics et empêche les traffickers de mettre à jour l'URL. Après l'importation, Campaign Manager 360 vous avertit si des URL sont codées en dur dans l'élément.

Exemple d'insertion de tag de clic

Voici un exemple d'insertion de tag de clic 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>
[Le reste du code de la création est ajouté ici.] </html>

Assurez-vous que la création utilise la variable de tag de clic comme URL de la page de destination :

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

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 360. Aucun code personnalisé n'est requis.

Pour ajouter un tag de clic à 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'utilisateur pourra cliquer ou appuyer.
2. Faites glisser dans l'espace de création le composant "Zone cliquable" depuis le dossier "Interaction" du panneau "Composants", puis placez-le au-dessus de l'incitation à l'action.
3. Cliquez sur l'icône de nouvel événement  dans le panneau "Événements".
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
   Action	Annonce Google > Quitter l'annonce Remarque : Une action similaire, Quitter l'annonce (écrase l'URL), ne vous permet pas de modifier l'URL en dehors de la création (par exemple, dans Studio ou Campaign Manager 360). Vous ne devez utiliser cette option que pour les annonces dynamiques.
   Destinataire	gwd-ad
   Configuration	ID des statistiques : libellé (par exemple, "Incitation à l'action") destiné à faciliter la compréhension des rapports. URL : URL de sortie. Réduire en quittant : pour les annonces expand, cochez cette case afin de réduire l'annonce lorsque l'internaute la ferme. Mettre le fichier multimédia en pause à la fermeture : cochez cette case pour que la lecture des contenus vidéo et audio s'arrête lorsque l'internaute ferme l'annonce. Page réduite à la fermeture : pour les annonces expand, page à afficher lorsque l'internaute ferme l'annonce.

   

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 ou .adz et l'envoyer à votre trafficker Campaign Manager 360.

Document

<html>
  <head>
    <title>sample html page</title>
    <meta name="ad.size" content="width=300,height=250">
    <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.google.org";
      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>Page loading...</p></a> </body> </html>

Fichiers HTML5 avec tags de clic

Ces fichiers HTML5 permettent de modifier les URL de manière dynamique et d'enregistrer les clics auprès des ad servers de Campaign Manager 360.

Exemple simple

Le tag de clic est appelé en cas de clic.

Fichier HTML5 simple

Exemple incluant un paramètre

Le tag de clic clickTag est appelé en cas de clic sur le bouton. Cet exemple illustre l'envoi d'un paramètre à l'URL de destination (code postal, par exemple).

HTML5 file with parameter

Exemple incluant un signe #

Codé pour décomposer l'appel de suivi à Campaign Manager 360 et l'URL de la page de destination du bouton. Cet exemple doit être suivi pour toutes les créations qui renvoient vers une URL de destination contenant un signe dièse (#).

HTML5 file with a number sign in a click tag URL

Plusieurs tags de clic

Contient plusieurs tags de clic.

HTML5 file with multiple click tags

Loader

Fichier .zip contenant deux fichiers .zip : le fichier parent et le fichier enfant. Le parent charge le fichier enfant.

HTML5 parent and child files

Fichiers HTML5 avec suivi spécial

Voici un exemple de fichier HTML5 qui est utilisé pour enregistrer les interactions des utilisateurs dans les créations autres que Rich Media.

Un pixel de suivi 1×1

Un pixel de suivi 1 x 1 Campaign Manager 360 est appelé lors du chargement.

HTML5 file with special tracking