Como crear anuncios HTML5 no Adobe Animate a DoubleClick for Publishers (DFP)

Os anuncios en HTML5-Adobe-Animar -Dfp

O outro día explicou a vostede como inserir o clicktag en HTML5 Banners. Non obstante, prometín que creas unha publicación para dicirche como obter as animacións deseñadas en Adobe Animate ser compatible con DoubleClick para editores (DFP).

Antes de comezar Vou dicir que, que aínda que Un deseñador que prefire Adobe fomentar antes de Google Web Designer, se a súa tarefa habitual está centrada no deseño da bandeira, será moito máis doado para vostede se decantacións para o segundo. A compatibilidade con DFP e AdWords é moito maior, o que significará aforrar moito tempo de traballo.

Como ás veces a elección da ferramenta non depende de nós senón sobre a empresa pola que traballamos, é Non de máis saber como crear os seus ficheiros no maior número de plataformas posibles. Aínda que Adobe lanzou unha versión mellorada de Flash baixo o nome de Animate só fai uns meses, está dedicando a moitos recursos ao seu desenvolvemento e estou seguro de que gañará forza.

unha chamada

Tomei moitas semanas de traballo para atopar a solución ao problema que propoño neste artigo e despois de gastar horas e horas buscando foros relacionados con Adobe, con DFP, con AdWords, con GWD … teño Entendeu que a industria da publicidade está moi perdida con respecto ás pancartas en HTML5.

Estamos ante un panorama complicado e é que agora a tarefa de deseño ten que ir á man das nocións básicas e programar. Cando o teu perfil é 100% creativo, isto pode chegar a ser algo molesto, pero … non tes máis remedio que reinventarte. Isto significa tempo e diñeiro, pero tamén máis coñecemento (que nunca doe).

Con todo, se queremos que a cadea de produción siga o seu curso, creo que é esencial que busque unha solución máis sinxela que a Un que propoño aquí. ¿É tan complicado que as plataformas de deseño se senten cos diferentes adseradores e buscan un xeito de alcanzalo?

Espero que si, e que tampouco tomen moito … 😛

Que requisitos ten que cumprir as miñas pancartas HTML5 para traballar en DoubleClick para editores (DFP)?

  1. DFP só admite anuncios que conteñan todos os ficheiros do mesmo cartafol, é dicir, Non podes usar subcartafoles do tipo / imaxes / o / js /.. / LI>
  2. As rutas das imaxes en DFP son substituídas por variables, polo tanto, teñen que estar ben definidas no código.
  3. O documento HTML non pode conter ligazóns a ficheiros ou bibliotecas externas.
  4. É necesario implementar o clicktag para a medición de click.
  5. Debemos definir o AD.Size propiedade dentro do HTML.

Que cambios teño que facer antes de publicar o meu proxecto en Adobe Animate?

Nesta sección Vou amosar-lle como facer Personalizar a “Configuración da publicación n “En Adobe Animate, de xeito que os ficheiros que obteña máis sinxelo modificar unha posteriori.

1. Vai a “Ficheiro” → “Publicar configuración” e na pestana “BASIC” que “se combina nas follas de sprite” que se atopa, que en “Exportar recursos” o cartafol chámase “imaxes /” e que en “Recursos de exportación de CREATJS “O cartafol chámase” libs /”.. // p>

Configuración-Publicación-Animate-DFP

2. Agora vai á pestana “Avanzado” e deseleccione “Bibliotecas aloxadas”.

3. Unha vez que realizou todos os cambios, faga clic en “Publicar” e obterá algo similar a isto:

Adobe-Animate-Files-Files-xerado

Que cambios teño que facer no meu ficheiro HTML5 despois de publicalo en animar ser compatible con DFP?

1. Primeiro de todo tes que mover os ficheiros contidos nas “imaxes “e” libs “ao directorio principal, no meu caso sería o seguinte:

ficheiros-animados-Directory-Main

2. Unha continuación ten que editar o seu ficheiro HTML e incluír na “cabeza”:

  • a variable ClickTag
  • a propiedade AD.Size, este último vai varía dependendo do tamaño do tamaño do seu anuncio, no meu caso “300 × 250”.
  • Como eliminamos as subcartafoles, agora o ficheiro “CREATJS-2015.11.26.MIN.JS” é no directorio principal, polo tanto, ten que borrar “libs” diante de “Createjs-2015.11.26.min.js”

Aquí amámosche como me modifico Cado My 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. No mesmo documento tes que comentar a liña “Loader.loadmanifest” e facer unha chamada a “Handleclome” () “.Sería do seguinte xeito (mira as dúas últimas liñas):

4. Ao final do documento HTML na parte relativa ao “Corpo”, no canto de engadir un atributo ‘onload’, faga unha chamada ‘oninit’, como ves 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 Abre o documento de JavaScript que xera Adobe Animate (no meu exemplo “Clicktag-Animate.js”). A continuación, elimina as chamadas a imaxes e substituílas por datos URI (identificador de recursos uniformes).

Vexámolo en máis detalle:

• Como xerar o código URI?

Hai moitas páxinas xeradoras de URI, para que poidas escoller o que che dá o máis enojado. No meu caso, usei colorza.org, e seguín estes pasos:

  • Seleccionar o meu ficheiro
  • Xerar datos URI
  • Copiar o código

xerar-uri

* Terá que facelo por cada unha das imaxes que conforman a súa creatividade

• Incluír o código URI

Unha vez que xerou, ten que incluílos en “Manifesto:};

entón:

* Lembre que despois de “VAR VAL1”, “VAR Image2”, etc. Ten que incluír todo o código URI (non o fago no exemplo porque cando é demasiado tempo non se mostraría ben).

(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. No mesmo documento .js, busque a parte relativa a “símbolos”. Aquí ten que borrar a liña “This.Initialize ()” e cambiar o nome das imaxes que van entre parénteses despois de bitmap para as súas variables (no meu caso Image1 e Image2).

antes:

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

entón:

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

* Ten que facelo por cada unha das súas imaxes a creatividade , quedando claro que asignar cada variable á imaxe correcta

7. Agora elimina os ficheiros de imaxe do seu cartafol e proba para mostrar o seu ficheiro HTML cun navegador. Se amosa a bandeira correctamente, pode Vaia adiante. Pero comproba que fixeches correctamente todos os pasos anteriores.

preview-html-adobe-animate

8. Todo funciona, que fago agora? Este é o paso máis sinxelo. Comprimir o cartafol que contén todos os teus documentos e listo! Xa podes cargar a DFP 😉

Por se hai algún paso que é Non claro contigo a explicación, deixo o acceso ao meu exemplo para que ou ver máis de cerca.

>> Descargar aquí

Conclusión

Eu vin ao primeiro, ao segundo ou ao terceiro, estou seguro de que estará dando saltos de alegría. Especialmente se recibiu o feedback traficador (ou cargaches en DFP) e o resultado foi satisfactorio.

Non quero dicir adeus sen primeiro referirse aos dous elementos que me permitiron crear Esta publicación, por unha banda, a de Andrius Aggs de Adguns, e por outra, a de David Wallin. Grazas á combinación de ambas recomendacións, puiden crear este tutorial e moito mellor, atopar un xeito de cargar as banners de HTML5 en DFP 🙂

Se xorden dúbidas (estou seguro que si, hehe) , Agardo por ti nos comentarios.

Imaxe fonte: 1

  • Acerca de
  • Últimas entradas
me 😉

Gráfico e diseñador web con gran experiencia no campo da comunicación en liña. O meu obxectivo é axudar aos profesionais e ás pequenas empresas a crear a súa identidade dixital.
O meu tempo fóra de liña Paso no meu camiño cara a un monte, inmortalizando algún tempo coa miña cámara, visitando un pouco recondeado no mundo ou só está a suceder un bo tempo cos meus amigos

me seguen 😉

/div>

Últimas entradas NAIARA FERNÁNDEZ (ver todo)
  • Tutorial DFP SM: Liñas de pedido – Configuración – 10 de agosto de 2016
  • DFP SM Tutorial: Orde de liñas – 27 de xullo de 2016
  • Tutorial DFP SM: Orde e Order Lines – 13 de xullo de 2016

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *