INFORMAÇÕES IMPORTANTES - HTML5

O Chrome sofrerá uma atualização gradual começando em setembro/2015 onde conteúdos em Flash não prioritários e/ou que não estejam no centro das páginas permanecerão pausados até que o usuário ative-os com um clique (documentação do google). O Chrome representa mais de 50% do trafégo na web e mais de 70% no NE10, além disso outros browsers como o Safari e Firefox já possuem recursos similares.

Os principais motivos são:

  • Alto consumo de processamento do computador e de bateria;
  • Falta de segurança;
  • Necessidade do plugin ser constantemente atualizado;
  • Flash não funcionalidade em dispositivos mobile;

Boas práticas

Com o objetivo de ajudar a diminuir problemas de implementação e veiculação, então disponibilizamos algumas especificações e boas práticas para o uso de HTML5:

O banner HTML5 deve ter todas suas referências externas como relativas. É muito importante lembrar que o anúncio será veiculado em páginas mais complexas e com diversos elementos, portanto é fundamental que funcionamento do banner seja compatível com o SafeFrame do DFP.

Não utilizar as boas práticas descritas neste documento pode impactar negativamente o funcionamento do anúncio e da página além de prejudicar a experiência do usuário e a construção da peça não pode depender de qualquer outro elemento ou script da página como bibliotecas javascript. Fontes, CSS e imagens devem ser enviadas no pacote da peça.

Sugerimos para a criação e conversão de peças publicitárias em HTML5 as opções abaixo:

Scripts

  • Não recomendamos:
    Usar frameworks javascript como jQuery, Prototype, YUI, Dojo, MooTools, EXTJS e AngularJS pois a probabilidade da página já utilizar um desses recursos é grande e o uso em um anúncio pode comprometer o funcionamento da página ou de outros anúncios.
    Não recomendamos o uso de jQuery pois além de comprometer outras funcionalidades da página serão adicionados 97KB e neste caso pode-se optar por zepto.js que conta com as principais funções e mesma sintaxe, porém com 9.1KB
  • Recomendamos:
    Minifying: existem ferramentas online que fazem a compressão (minifying) de scripts, além disso os principais editores de código também contam com essa funcionalidade.

Imagens

CSS

  • Nunca use CSS em tags globais como: body, div, span. Isso pode interferir na página e essa boa prática garante que o CSS será aplicado apenas nos elementos corretos do seu anúncio. Coloque CSS in-line ou crie seus IDs ou Classes.

ClickTag

  • Existem algumas maneiras de utilizar a variável clickTag no anúncio e em todas elas a página do anunciante deve abrir em uma nova janela ou aba do navegador, inclua o código abaixo no inicio do HTML.

<script type="text/javascript">
    var clickTag = "%%CLICK_URL_ESC%%%%DEST_URL%%";
</script>

Javascript

  • Uma forma simples de usar a variável clickTag é atribuir o href dinamicamente após o carregamento da página através de JavaScript:

<a id="clickArea" target="_blank"></a>
<script type="text/javascript">
    var clickArea =
    document.getElementById(“clickArea”);
    clickArea.href = clickTag; 
</script>

HTML

  • Outra possibilidade é com um HTML simples que irá ler a variável clickTag.
  • Exemplo para usar o metodo window.open de javaScript dentro de um HTML:

<a href="javascript: window.open(clickTag, '_blank')"></a>

Múltiplos Cliques

  • Em casos de várias urls de clique dentro do mesmo anúncio, declare as variáveis de click da seguinte forma: clickTag, clickTag1, clickTag2, etc, por exemplo:

var clickTag = "%%CLICK_URL_ESC%%http://www.uol.com.br";
var clickTag1 = "%%CLICK_URL_ESC%%http://economia.uol.com.br";
var clickTag2 = "%%CLICK_URL_ESC%%http://esporte.uol.com.br";
var clickTag3 = "%%CLICK_URL_ESC%%http://entretenimento.uol.com.br";

Peso máximo dos anúncios

  • Desktop / Tablet: 150KB
  • Mobile (mWEB ou In-App) 40kB
  • Polite Download
    Todos os arquivos subsequentes ao carregamento de peças in-page que ultrapassam os tamanhos citados acima, somente poderão ser descarregados após o carregamento completo da página seguindo os limites abaixo:
    - Desktop / Tablet 2MB
    - Mobile (mWEB ou In-App) 300KB

Vídeo

Com o HTML5 foi criado a tag <video>, entretanto algumas restrições ao comportamento devem ser respeitadas:

  • Autoplay: Não recomendamos o uso e não permitimos o uso sem polite download, portanto aguardando o termino do carregamento da página. Browsers como Safari e Opera não aceitam este atributo, assim como iPad e iPhone.
  • Poster: É importante adicionar o thumb enquanto o vídeo não é carregado.
  • Controls: Caso não desenvolva os próprios controles, este atributo é necessário para que o usuário tenha o controle do vídeo.
  • Track: Se houver a necessidade de legenda externa nos vídeos, deve-se observar que esta tag funciona apenas nos browsers abaixo a partir das versões:
    - Google Chome 18+
    - Internet Explorer 10+
    - Mozilla Firefox: 31+
    - Safari 6+
    - Opera 15+
  • Formato: A extensão deve ser .mp4 (codec H.264).
    O vídeo deve ser encaminhado junto com a peça ou chamados diretamente de serviços de streaming de mercado usando a API do serviço e respeitando as condições de polite download.
    Obs. Vídeos do Youtube podem ser embedados na peça.

Browsers Suportados

  • Todos os browsers modernos suportam o uso de HTML5:
    - Chrome 40+
    - Firefox 35+
    - Internet Explorer 10+ (incluindo Edge)
    - Opera 20+
    - Safari 7.0+

    É essencial que todos anúncios funcionem nesses browsers e versões.

    Este site: https://html5test.com/results/desktop.html mostra a classificação de cada browser e versão e seu desempenho.

 

Tire suas dúvidas








*Campos Obrigatórios.