Com crear anuncis HTML5 en Adobe Anima’t per DoubleClick for Publishers (DFP)

anuncis-html5-tova-animate-DFP

l’altre dia et explicava com inserir el clickTag en banners HTML5. No obstant això, et vaig prometre crear un post per explicar-te com aconseguir que les animacions dissenyades en Adobe Anima’t fossin compatibles amb DoubleClick for Publishers (DFP).

Abans de començar et diré, que encara que com a dissenyador / a prefereixis Adobe Anima’t abans que Google Web Designer, si la teva tasca habitual està centrada en el disseny de banners, serà molt més fàcil per a tu si et decantes per la segona. La compatibilitat amb DFP i Adwords és molt més gran, el que significarà estalviar molt de temps de treball.

Com en ocasions l’elecció de l’eina no depèn de nosaltres sinó de l’empresa per a la qual treballem, no està de més saber com crear els teus arxius en el major nombre de plataformes possibles. Encara que Adobe va llançar una versió millorada de Flash sota el nom de Anima’t només fa uns pocs mesos, li està dedicant molts recursos al seu desenvolupament i estic segura que anirà guanyant força.

Una crida

m’ha portat moltes setmanes de treball donar amb la solució a el problema que plantejo en aquest article, i després de passar-me hores i hores buscant per fòrums relacionats amb Adobe, amb DFP, amb AdWords, amb GWD … m’he adonat que la indústria de la publicitat està molt perduda pel que fa als banners en HTML5.

Estem davant un panorama complicat, i és que ara mateix la tasca de disseny ha d’anar de forma obligada de la mà de nocions bàsiques de codi i programació. Quan el teu perfil és 100% creatiu això pot arribar a ser un tant molest, però … no et queda més remei que reinventar-. Això vol dir temps i diners, encara que també més coneixement (que mai ve malament).

No obstant això, si volem que la cadena de producció segueixi el seu curs, crec que és indispensable que es busqui una solució més senzilla que la qual et proposo aquí. Tan complicat és que les plataformes de disseny se senten amb els diferents adservers i busquin una via aconseguir-ho?

Espero que així sigui, i que a més no triguin massa … 😛

Què requisits han de complir els meus banners HTML5 perquè funcionin en Doubleclick for Publishers (DFP)?

  1. DFP només suporta anuncis que continguin tots els arxius a la mateixa carpeta, és a dir, no es poden utilitzar subcarpetes de l’tipus / images / o / jS /.
  2. les rutes de les imatges en DFP se substitueixen per variables, per tant, han d’estar ben definides en el codi.
  3. el document HTML no pot contenir enllaços a arxius o llibreries externes.
  4. cal implementar el clickTag per al mesurament de clics.
  5. Hem de definir la propietat ad.size dins de l’HTML.

Quins canvis he de fer abans de publicar el meu projecte en Adobe Anima’t?

en aquest apartat vaig a ensenyar-te com personalitzar la “Configuració de publicació n “en Adobe Animate, perquè els arxius que obtinguis siguin més senzills de modificar a posteriori.

1. Esteu “Arxiu” → “Configuració de publicació” ia la pestanya “Bàsica” comprova que “Combinar en fulls Sprite” està deseleccionada, que a “Exportar recursos imatge” la carpeta es digui “images /” i que en “Exportar recursos de CreateJS “la carpeta es digui” libs /”.

configuració-publicació-animate-DFP

2. Ara ves a la pestanya “Avançada” i desseleccioneu “Biblioteques allotjades”.

configuració-publicació-animate-DFP-avançat

3. Un cop fets tots els canvis, punxa a “Publicar” per obtenir alguna cosa semblant a això:

tova-animate-arxius-generats

Quins canvis he de fer en el meu arxiu HTML5 després publicar-lo a Anima’t perquè sigui compatible amb DFP?

1. en primer lloc has de moure els arxius continguts en les carpetes “images” i “libs “a directori principal. En el meu cas quedaria de la següent manera:

arxius-animate-directori-principal

2. a continuació has d’editar el teu fitxer HTML i incloure en el “head”:

  • La variable de l’clickTag
  • La propietat ad.size, aquesta última variarà en funció de la mida de teu anunci, en el meu cas “300 × 250”.
  • Com hem eliminat les subcarpetes, ara l’arxiu “createjs-2015.11.26.min.js” està en el directori principal, per tant has de esborrar “libs” de davant de “createjs-2015.11.26.min.js”

Aquí et ensenyo com he modificat cat meu 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. En el mateix document has de comentar la línia “loader.loadManifest” i fer una crida a “handleClomplete ()”.Quedaria de la següent manera (fixa’t en les dues últimes línies):

<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. A la fi de el document HTML a la part relativa a l ‘ “body”, en lloc d’afegir un atribut’ onload ‘fes una crida’ onInit ‘, com veus aquí:

<body onload="init();" style="background-color:#D4D4D4;margin:0px;"><canvas width="300" height="250" style="background-color:#FFFFFF"></canvas> <script> init(); </script></body>

5. Obre el document estigui habilitat que genera Adobe Anima’t (en el meu exemple “clickTAG-animate.js”). A continuació esborra les trucades a les imatges i substitueix-les per dades URI (Identificador Uniforme de Recursos).

Anem a veure-ho amb més detall:

• Com generar el codi URI?

Hi ha moltes pàgines generadores d’URI, així que pots triar la que més ràbia et doni. En el meu cas he utilitzat dopiaza.org, i he seguit aquests passos:

  • Seleccionar el meu arxiu
  • Generar Data URI
  • Copia el codi

generar-URI

* Hauràs de fer-ho per a cadascuna de les imatges que conformin la teva creativitat

• Incloure el codi URI

Un cop les tens generades, cal incloure-les sota “Manifest:};

dESPRÉS:

* Recorda que després de” var imatge1 “,” var imatge2 “, etc. has de incloure el codi URI sencer (no ho faig en l’exemple perquè a l’ésser molt llarg no es visualitzaria bé).

(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. En el mateix document .js, busca la part relativa a “symbols”. Aquí has d’eliminar la línia “this.initialize ()” i canviar el nom de les imatges que van entre parèntesi després Bitmap pels teus variables (en el meu cas imatge1 i imatge2).

ABANS:

// 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);

DESPRÉS:

// 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);

* Has de fer això per a cadascuna de les imatges de la teva creativitat, tenint clar que assignes cada variable a la imatge correcta

7. Ara esborra els arxius d’imatge de la teva carpeta i prova a visualitzar teu arxiu HTML amb un navegador. Si visualitzes el banner correctament, pots seguir endavant . Sinó revisa que hagis realitzat correctament tots els passos anteriors.

previsualitzar-html-tova-animate

8. Tot funciona, ¿què faig ara? Aquest és el pas més senzill. Comprimeix la carpeta que conté tots els teus documents i llest! Ja es pot pujar a DFP 😉

Per si de cas hi ha algun pas que no et queda clar amb l’explicació, et deixo accés al meu exemple perquè l o vegis amb més deteniment.

>> Descàrrega AQUÍ

Conclusió

Et hagi sortit a la primera, a la segona oa la tercera, estic segura que estaràs fent salts d’alegria. Sobretot si has rebut el feedback el trafficker (o tu mateix @ els has carregat a DFP) i el resultat ha estat satisfactori.

No em vull acomiadar sense abans fer referència als dos articles que m’han permès crear aquest post, per una banda el de Andrius Avinas de Adguns, i de l’altra, el de David Wallin. Gràcies a la combinació de les dues recomanacions he pogut crear aquest tutorial, i molt millor encara, trobar la manera de carregar els banners HTML5 en DFP 🙂

Si et sorgeixen dubtes (estic segura que si, jeje), t’espero en els comentaris.

Font imatge: 1

  • Quant a
  • Últimes entrades
Segueix-me 😉

Dissenyadora gràfica i web amb gran experiència en l’àmbit de la comunicació en línia. El meu objectiu és ajudar a professionals i petites empreses a crear la seva identitat digital.
El meu temps offline el pas de camí a alguna muntanya, immortalitzant algun moment amb la meva càmera de fotos, de visita a algun lloc recòndit de l’món o simplement passant una bona estona amb els meus amics

Segueix-me 😉

Últimes entrades de Naiara Fernández (veure tot)
  • Tutorial DFP SM: Línies de comanda – Configuració – 10 agost 2016
  • Tutorial DFP SM: Línies de comanda – 27 juliol 2016
  • Tutorial DFP SM: comanda i línies de comanda – 13 juliol 2016

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *