Como criar anúncios HTML5 no Adobe Animate for DoubleClick for Publishers (DFP)

anúncios-html5-adobe-animate -DFP

O outro dia explicou a você como inserir o clicktag em banners HTML5. No entanto, prometi a você criar uma postagem para lhe dizer como obter as animações projetadas no Adobe Animate ser compatível com o DoubleClick for Publishers (DFP).

Antes de começar, vou te dizer, embora como Um designer que você preferir o Adobe incentiva antes do Google Web Designer, se sua tarefa usual é centrada no design de banner, será muito mais fácil para você, se você decantemente para o segundo. A compatibilidade com DFP e AdWords é muito maior, o que significará economizar muito tempo de trabalho.

Como às vezes a escolha da ferramenta não depende de nós, mas sobre a empresa para a qual trabalhamos, é Não de mais saber como criar seus arquivos no maior número de plataformas possíveis. Embora a Adobe lançou uma versão melhorada do Flash sob o nome de animação há apenas alguns meses, ele está dedicando muitos recursos ao seu desenvolvimento e tenho certeza de que ele ganhará força.

uma chamada

Eu levei muitas semanas de trabalho para encontrar a solução para o problema que proponho neste artigo, e depois de passar horas e horas procurando fóruns relacionados ao adobe, com DFP, com o AdWords, com GWD … eu tenho Percebi que a indústria de publicidade é muito perdida em relação a banners em HTML5.

Estamos enfrentando um panorama complicado, e é que agora a tarefa de design tem que ir para a mão de noções básicas de código e programação. Quando seu perfil é 100% criativo, isso pode se tornar um pouco irritante, mas … você não tem escolha, mas me reinvente. Isso significa tempo e dinheiro, mas também mais conhecimento (que nunca dói).

No entanto, se quisermos que a cadeia de produção segue o seu curso, acho que é essencial que você procure uma solução mais simples do que a Um eu proponho aqui. É tão complicado que as plataformas de design se sentem com os diferentes adseradores e procuram uma maneira de alcançá-lo?

Espero que sim, e que eles também não demorem muito … 😛

Quais os requisitos você tem para atender meus banners HTML5 para trabalhar em DoubleClick para editores (DFP)?

  1. dfp suporta apenas anúncios que contêm todos os arquivos na mesma pasta, isto é, Você não pode usar subpastas do tipo / imagens / o / js /.
  2. As rotas das imagens no DFP são substituídas por variáveis, portanto, elas devem ser bem definidas no código.
  3. O documento HTML não pode conter links para arquivos ou bibliotecas externas.
  4. É necessário implementar o ClickTag para a medição de clique.
  5. devemos definir o ad.size propriedade dentro do HTML.

Quais mudanças eu tenho que fazer antes de postar meu projeto no Adobe Animate?

Nesta seção eu vou mostrar como Personalize a “Configuração da publicação n “No Adobe Animate, para que os arquivos você fique mais simples de modificar um posteriori.

1. Você vai para “Arquivo” → “Publicar configurações” e na guia “Basic” verifique que “combinar em folhas sprite” é desmarcado, que em “Exportar imagem de recurso” a pasta é chamada “Imagens /” e que em “Recursos de Exportação” do CreateJs “A pasta é chamada” libs /”.

Configurações-publicação-animate-DFP

2. Agora vá para a guia “Avançado” e desmarque “bibliotecas hospedadas”.

Configurações - Publicação-animate-DFP-avançado

3. Depois de ter feito todas as alterações, clique em “Publicar” e você receberá algo semelhante a isso:

Adobe-Animate-Files - gerados

Quais mudanças eu tenho que fazer no meu arquivo HTML5 depois de postá-lo em animar para ser compatível com DFP?

1. Primeiro de tudo, você precisa mover os arquivos contidos nas “imagens “e” libs “para o diretório principal, no meu caso, seriam os seguintes:

Arquivos-Animate-Directory-Directory-Principal

2. Uma continuação que você precisa editar seu arquivo HTML e incluir na “cabeça”:

  • a variável clicktag
  • a propriedade ad.size, esta última varia dependendo do tamanho do tamanho do seu anúncio, no meu caso “300 × 250”.
  • Como eliminamos as subpastas, agora o arquivo “CreateJs-2015.11.26.min.js” é No diretório principal, portanto, você tem que excluir “libs” na frente de “CreateJs-2015.11.26.min.js”

aqui eu te mostrar como eu modify Cado 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. No mesmo documento, você precisa comentar sobre a linha “loader.loadmanifest” e fazer uma chamada para “HandleClomplete ()”.Seria da seguinte maneira (olhar para as duas últimas linhas):

<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. No final do documento HTML na parte em relação ao “corpo”, em vez de adicionar um atributo ‘onload’, faça uma chamada ‘OnInit’, como você vê aqui:

<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 JavaScript que gera Adobe Animate (no meu exemplo “ClickTag-Animate.JS”). Em seguida, exclua as chamadas para imagens e substitua-as por dados de dados (identificador de recursos uniformes).

Vamos ver mais detalhadamente:

• Como gerar o código de URI?

Existem muitas páginas de geração de uri, para que você possa escolher aquela que lhe dá mais raiva. No meu caso, usei Colorza.org, e segui estas etapas:

  • Selecione meu arquivo
  • gerar dados URI
  • copiar o código

Gerar-URI

* Você terá que fazê-lo para cada uma das imagens que conformam sua criatividade

• Incluir o código URI

Depois de ter gerado, você tem que incluí-los em “Manifesto:}; Pré>

Então:

* Lembre-se que depois de “var val1”, “var image2”, etc. Você tem que incluir todo o código de URI (eu não o fiz no exemplo, porque quando é muito longo, não seria exibido bem).

(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, procure a parte relativa a “símbolos”. Aqui você tem que excluir a linha “isto.initialize ()” e altere o nome das imagens que vão entre parênteses após o bitmap para suas variáveis (no meu caso image1 e image2).

antes:

antes:

P>

// 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ão:

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

* você tem que fazer isso para cada uma das suas imagens criatividade , tornando-se claro que você atribui cada variável à imagem correta

7. Agora ele exclui os arquivos de imagem da sua pasta e teste para exibir seu arquivo HTML com um navegador. Se você exibir o banner corretamente, poderá Vá em frente. Mas verifique se você fez corretamente todos os passos acima.

pré-visualização-html-adobe-animate

8. Tudo funciona, o que eu faço agora? Este é o passo mais simples. Comprima a pasta que contém todos os seus documentos e pronto! Você já pode fazer upload para DFP 😉

Apenas caso haja algum passo que não claro com você a explicação, deixo acesso ao meu exemplo para que ou veja mais de perto.

Baixe aqui

Conclusão

Eu vim para o primeiro, para o segundo ou o terceiro, tenho certeza de que você vai dar saltos de alegria. Especialmente se você recebeu o feedback dos traficantes (ou os carregou no DFP) e o resultado foi satisfatório.

Eu não quero dizer adeus sem primeiro referente aos dois itens que me permitiram criar Este post, por um lado, o de Andrius AGGS de Adguns, e do outro, o de David Wallin. Graças à combinação de ambas as recomendações, fui capaz de criar este tutorial, e muito melhor, encontrar uma maneira de carregar os banners HTML5 em DFP 🙂

Se surgir dúvidas (tenho certeza que sim, hehe) , Espero por você nos comentários.

Imagem fonte: 1

  • sobre
  • últimas entradas
Siga-me 😉

gráfico e web designer com grande experiência no campo da comunicação on-line. Meu objetivo é ajudar profissionais e pequenas empresas a criar sua identidade digital.
Meu tempo offline eu passo no meu caminho para algum monte, imortalizando algum tempo com minha câmera, visitando um lugar um pouco recondito no mundo ou apenas acontecendo bom tempo com meus amigos

Siga-me 😉

/div>

Últimas entradas naiara Fernández (ver tudo)
  • Tutorial DFP SM: Linhas de pedido – Configuração – 10 de agosto de 2016
  • DFP SM Tutorial: Linhas de pedido – 27 de julho de 2016

Tutorial DFP SM: ordem e linhas de pedido – 13 de julho de 2016

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *