Comment créer des annonces HTML5 dans Adobe Animate pour DoubleClick pour les éditeurs (DFP)

anuncios-html5-adobe-animate-dfpADS-HTML5-Adobe-Animate -DFP

L’autre jour expliqua comment insérer le clickTag sur les bannières HTML5. Cependant, je t’ai promis de créer un message pour vous dire comment obtenir les animations conçues dans Adobe Animate Soyez compatibles avec DoubleClick pour les éditeurs (DFP).

Avant de commencer, je vous le dirai, mais aussi Un concepteur Vous préférez Adobe encourage avant Google Web Designer, si votre tâche habituelle est centrée sur la conception de la bannière, ce sera beaucoup plus facile pour vous si vous êtes affectueusement pour la seconde. La compatibilité avec DFP et AdWords est beaucoup plus grande, ce qui signifie que vous sauverez beaucoup de temps de travail.

Comme parfois, le choix de l’outil ne dépend pas de nous, mais de la société pour laquelle nous travaillons, est Pas d’autre savoir comment créer vos fichiers dans le plus grand nombre de plates-formes possibles. Bien que Adobe a lancé une version améliorée de Flash sous le nom d’Animate il y a quelques mois seulement, il consacre de nombreuses ressources à son développement et je suis sûr qu’il gagnera la force.

Un appel

J’ai pris de nombreuses semaines de travail pour trouver la solution au problème que je propose dans cet article et après avoir passé des heures et des heures à la recherche de forums liés à Adobe, avec DFP, avec AdWords, avec GWD … j’ai Réalisé que l’industrie de la publicité est très perdue en ce qui concerne les bannières dans HTML5.

Nous sommes confrontés à un panorama compliqué et que la tâche de conception doit maintenant aller pour la main des notions Code de base et la programmation. Lorsque votre profil est 100% créatif, cela peut devenir un peu ennuyeux, mais … vous n’avez pas d’autre choix que vous réinventez-vous. Cela signifie temps et argent, mais aussi plus de connaissances (qui ne fait jamais mal).

Cependant, si nous voulons que la chaîne de production suive votre cours, je pense qu’il est essentiel de rechercher une solution plus simple que la celui que je propose ici. Est-il tellement compliqué que les plates-formes de conception se sentent avec les différents adsersers et recherchent un moyen de y parvenir?

J’espère donc, et qu’ils ne prennent pas trop trop … 😛

Quelles exigences devez-vous rencontrer mes bannières HTML5 pour travailler à DoubleClick pour les éditeurs (DFP)?

  1. DFP prend uniquement en charge les publicités contenant tous les fichiers du même dossier, c’est-à-dire Vous ne pouvez pas utiliser de sous-dossiers du type / des images / O / JS /.
  2. Les itinéraires des images dans DFP sont remplacés par des variables, ils doivent donc être bien définis dans le code.
  3. Le document HTML ne peut pas contenir de liens vers des fichiers externes ou des bibliothèques.
  4. Il est nécessaire d’implémenter le clickTag pour la mesure du clic.
  5. Nous devons définir la publicité Propriété dans le HTML.

Quels changements dois-je faire avant de poster mon projet dans Adobe Animate?

Dans cette section, je vais vous montrer comment Personnalisez la « configuration de publication n « dans Adobe Animate, de sorte que les fichiers que vous obtenez plus simples pour modifier un posteriori.

1. Vous allez à « Fichier » → « Publier les paramètres » et dans l’onglet « Basic » Vérifiez que « Combiner in Sprite Feuilles » est désélectionné, qui dans « l’image d’exportation de la ressource », le dossier est appelé « Images / » et qu’en « Ressources d’exportation » de CreateJs « Le dossier est appelé » Libs / ».

Paramètres-Publication-Animate-DFP

2. Maintenant, allez à l’onglet « Avancé » et désélectionnez « Bibliothèques hébergées ».

Paramètres-Publication-Animate-DFP-Advanced

3. Une fois que vous avez fait toutes les modifications, cliquez sur « Publier » et vous obtiendrez quelque chose de similaire à celui-ci:

Adobe-animate-fichier-généré

Quels changements dois-je faire dans mon fichier HTML5 après l’avoir posté dans l’animation pour être compatible avec DFP?

1. Tout d’abord, vous devez déplacer les fichiers contenus dans « Images « Et » libs « au répertoire principal, dans mon cas, je serais la suivante:

fichiers-animate-répertoire-MAIN

2. Une continuation Vous devez éditer votre fichier HTML et inclure dans la « tête »:

  • la variable de clicktag
  • la propriété ad.size, ce dernier sera varient en fonction de la taille de la taille de votre annonce, dans mon cas « 300 × 250 ».
  • Comme nous avons éliminé les sous-dossiers, le fichier « Createjs-2015.11.26.min.js » est maintenant Dans le répertoire principal, vous devez donc supprimer « Libs » devant « Createjs-2015.11.26.min.js »

Ici, je vous montre comment je modifierai Cado mon HTML:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>clicktag-animate</title><meta name="ad.size" content="width=300,height=250"><script> var clickTag = "%%CLICK_URL_UNESC%%%%DEST_URL%%";</script><script src="createjs-2015.11.26.min.js"></script><script src="clicktag-animate.js"></script>

3. Dans le même document, vous devez commenter la ligne « Loader.loadManifest » et appellez-vous à « Handleclote () ».Ce serait de la manière suivante (regardez les deux dernières lignes):

<script>var canvas, stage, exportRoot;function init() {// --- write your JS code here ---canvas = document.getElementById("canvas");images = images||{};var loader = new createjs.LoadQueue(false);loader.addEventListener("fileload", handleFileLoad);loader.addEventListener("complete", handleComplete);// loader.loadManifest(lib.properties.manifest);handleComplete()}

4. À la fin du document HTML de la pièce par rapport au « corps », au lieu d’ajouter un attribut « Oninload », appelle « Oninit », comme vous le voyez ici:

5 Ouvre le __gVirt_NP_NN_NNPS_ JSDoc qui génère Adobe Animer (dans mon exemple « ClickTag-Animate.js »). . Ensuite, les appels de suppression sur les images et les remplacer par URI de données (identifiant de ressource uniforme)

Voyons voir plus en détail:

• Comment générer le code URI

Il existe de nombreuses pages génératrices d’URI, vous pouvez donc choisir celui qui vous donne le plus en colère. Dans mon cas, j’ai utilisé colorza.org, et j’ai suivi ces étapes:

  • Sélectionnez mon fichier
  • générer des données URI
  • Copiez le code

générer uri

* Vous devrez le faire pour chacune des images qui sont conformes à votre créativité

• inclure le code URI

Une fois que vous avez généré, vous devez les inclure dans  » manifeste:};

alors:

* Rappelez – vous que , après  » VAR VAL1 « ,  » VAR IMAGE2 « , etc. Vous devez inclure l’intégralité du code URI (je ne le fais pas dans l’exemple parce que quand il est trop long , il ne serait pas bien affiché).

(function (lib, img, cjs, ss) {var p; // shortcut to reference prototypeslib.webFontTxtFilters = {}; // library properties:lib.properties = {width: 300,height: 250,fps: 24,color: "#FFFFFF",webfonts: {},manifest: };var imagen1 = "data:image/png;base64,....";var imagen2 = "data:image/png;base64,...";

6. Dans le même document .js, regard pour la partie relative aux « symboles ». Ici, vous devez supprimer la ligne « this.Initialize () » et changer le nom des images qui vont entre parenthèses après bitmap pour vos variables (dans mon cas image1 et image2).

Avant:

// symbols:(lib.blognaiarafernandez = function() {this.initialize(img.blognaiarafernandez);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,121,121);(lib.facebooknaiarafernandez = function() {this.initialize(img.facebooknaiarafernandez);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,121,120);

alors:

// symbols:(lib.blognaiarafernandez = function() {}).prototype = p = new cjs.Bitmap(imagen1);p.nominalBounds = new cjs.Rectangle(0,0,121,121);(lib.facebooknaiarafernandez = function() {}).prototype = p = new cjs.Bitmap(imagen2);p.nominalBounds = new cjs.Rectangle(0,0,121,120);

* Vous devez le faire pour chacun de vos images Créativité , devient clair que vous attribuez chaque variable à l’image correcte

7. maintenant, il supprime les fichiers d’images de votre dossier et test pour afficher votre fichier HTML avec Si vous affichez la bannière correctement un navigateur., vous pouvez allez – y. Mais vérifier que vous avez fait correctement toutes les étapes ci – dessus.

Aperçu HTML-Adobe-Animer

8. tout fonctionne, que dois – je faire maintenant? Ceci est l’étape la plus simple. Compresser le dossier qui contient tous vos documents et prêt! Vous pouvez déjà télécharger sur dfp 😉

juste au cas où il y a une étape qui est pas clair avec vous l’explication, je laisse l’ accès à mon exemple pour que ou voir de plus près.

>> télécharger ici

Conclusion

Je suis arrivé au premier, au deuxième ou au troisième, je suis sûr que vous donnerez des sauts de joie. Surtout si vous avez reçu les évaluations de trafiquant (ou vous les avez chargés dans DFP) et le résultat a été satisfaisant.

Je ne veux pas dire au revoir sans en référer d’ abord aux deux éléments qui me ont permis Créer Ce post, d’une part celle de Anrius AGGS d’adgunes, et de l’autre, celle de David Wallin. Grâce à la combinaison des deux recommandations, j’ai pu créer ce didacticiel, et bien mieux, trouver un moyen de charger les bannières HTML5 dans dfp 🙂

Si des doutes se posent (je suis sûr oui, hehe) , je vous attends dans les commentaires

image source: 1.

  • A propos
  • Dernières entrées
Suivez – moi 😉

Designer graphique et Web avec une grande expérience dans le domaine de la communication en ligne. Mon but est d’aider les professionnels et les petites entreprises pour créer leur identité numérique.
Mon temps en ligne je passe sur mon chemin une certaine monter, immortalisant un peu de temps avec mon appareil photo, visite lieu un peu abstruse dans le monde ou passe juste du bon temps avec mes amis

Suivez-moi 😉

/div>

Dernières entrées Naiara Fernández (Voir tout)
  • tutoriel DFP SM: lignes de commande – Configuration – 10 Août, 2016
  • DFP SM tutoriel: lignes de commande – 27 Juillet, 2016
  • Tutoriel DFP SM: Lignes de commande et de commande – 13 juillet 2016

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *