GazMidiaPosicoes : HUBCHANNEL - HELPDESK
Página inicial de soluções Portais e apps Painel Administrativo
GazMidiaPosicoes Imprimir
Modificado em: Ter, 6 Ago, 2019 at 4:24 PM
Abaixo você pode conferir as posições e formatos de mídia suportados pela plataforma MavenGaz.
EM BREVE: Colocaremos aqui um midia kit de exemplo com as posições abaixo
As peças podem ser arquivos JPG, PNG, GIF ou ainda código em html/javascript. Caso você receba um código em javascript, certifique-se que você informou para a agência ou cliente sobre as limitações de tamanho para o espaço onde a mídia irá aparecer. No caso do Google AdSense, utilize sempre a opção de publicidade "responsiva". Mais abaixo fizemos um guia de boas práticas para você enviar para a agência ou cliente que deseja criar uma peça em html.
Atenção: A programação abaixo é exclusiva para o portal de notícias.
Programação para mídias
Você poderá escolher as seguintes opções para as suas mídias:
Menu - Escolha em quais seções do site (menus) a mídia poderá aparecer. Por exemplo, um patrocinador de "Esportes" só irá aparecer na home de notícias do menu "Esportes".
Páginas - Se você criar alguma landing page ou alguma página especial e esta for patrocinada você também pode inserir mídias em páginas especiais.
Dispositivos - Você pode escolher uma ou todas as opções entre: Computadores, Tablets, Smartphones e Aplicativo. Caso o seu anunciante queira divulgar uma campanha apenas no mobile você pode vender mídia tanto para o acesso responsivo em tablets e smartphones quanto o acesso via aplicativo iOS e Android.
Agendamento -
As localizações abaixo foram projetadas para a primeira versão do MavenGaz. Iremos criar ainda outras opções e locais comuns.
Peso máximo dos anúncios: Desktop / Tablet: 150KB (DESCOMPACTADO) e Mobile (mWEB ou aplicativo) 40kB (DESCOMPACTADO)
Extensões aceitas: JPG, PNG, GIF ou código HTML/Javascript. Não se aceitam animações em Flash.
Randomicidade: Você irá gerenciar quantas mídias poderão aparecer na mesma posição em determinado período.
Tamanhos: Os tamanhos abaixo são apenas recomendados, mas você tem a liberdade de criar seus padrões, apenas cuide para não deformar o layout. Lembrar que o tamanho poderá ser redimensionado para acesso responsivo em tablets e smartphones.
Tamanho(máx)
Cabeçalho 560x60 Apenas portal web PC e mobile Mídia no topo do site, ao lado do logotipo do jornal
Central Corpo 1024x90 Portal web e aplicativos Após o menu, antes das manchetes e notícias
Final de conteúdo 700x40 Portal web e aplicativos No final de matérias, logo após o fim do texto, antes dos comentários
Início de conteúdo 768x60 Portal web e aplicativos No início de uma matéria, logo após o título e a chamada antes do texto
Janela Popup 500x500 Apenas portal web PC, não abrimos janela no mobile Janela com publicidade. O fundo é escurecido e o leitor deve clicar para fechar
Lateral Superior 300xlivre Apenas portal web PC e mobile Em páginas que possuem barra lateral, a mídia aparece no topo.
Lateral Central 300xlivre Apenas portal web PC e mobile Em páginas que possuem barra lateral, a mídia aparece no centro.
Lateral Inferior 300xlivre Apenas portal web PC e mobile Em páginas que possuem barra lateral, a mídia aparece no final da lateral.
Rodapé 768x60 Apenas portal web PC e mobile No rodapé das páginas, junto com o mapa do site, após o fim de qualquer conteúdo
Publicidade nativa : Você pode também criar matérias e marca-las como "Patrocinada", informando o nome do patrocinador e criando conteúdo personalizado pago.
Guia para publicidade em HTML/Javascript
Envie o guia abaixo para a agência ou cliente. Os termos e instruções foram escritos para que o designer ou o programador do anúncio possa compreender o que usar e o que não usar. 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. A construção da peça não pode depender de qualquer outro elemento da página ou bibliotecas javascript externas. Fontes, CSS, JS, HTML e imagens devem ser enviadas no pacote da peça.
O banner HTML5 deve ter todas suas referências externas como relativas. É importante lembrar que o anúncio será veiculado em páginas mais complexas e com diversos elementos, portanto é fundamental que o funcionamento do banner seja compatível com o SafeFrame do DFP: https://support.google.com/dfp_premium/answer/6023110
Sugerimos para a criação e conversão - de peças publicitárias em HTML5 - as opções abaixo:
Doubleclick Studio Layouts: Templates "Plug n' play", sem nenhum desenvolvimento/código. Demo - HTML5 YouTube Masthead; Desktop, Tablet e Mobile
GWD (Google Webdesigner): Diferentemente do Doubleclick Studio, são 100% customizáveis. Serve de ponto de partida e existem mais de 30 templates em vários formatos e tamanhos. https://support.google.com/webdesigner/
Vanilla HTML5: http://www.cssreflex.com/2014/01/vanilla-html-minimal-semantic-html5-framework.html
Flash CC: Também pode exportar HTML5, https://helpx.adobe.com/flash/using/creating-publishing-html5-canvas-document.html.
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. Quando possível tentem sempre utilizar código javascript puro.
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.
Muitos efeitos (como o gradiente) são possíveis com o uso de CSS. (http://www.cssmatic.com/gradient-generator e http://www.w3schools.com/css/) Para uso de vetores a melhor opção é PNG O uso de PNG e JPG como 'Save for web do Photoshop', não usam a melhor compreensão. logo experimente outras opções como TinyPNG (https://tinypng.com/ ) e TinyJPG (https://tinyjpg.com/)
Obs: O uso de animações utilizando o SVG não é recomendado, utilizem canvas.
Font Subsetting: http://demosthenes.info/blog/878/Slash-Page-Load-Times-With-CSS-Font-Subsetting: Técnica para reduzir peso de fontes, utilizando apenas o necessário
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 próprios IDs ou Classes que não sejam genéricos. Por ex: container, wrapper, header, etc.
Para o uso de vídeo, recomendamos o uso do player do Youtube embedado. Além disso com algumas restrições abaixo:
Autoplay: Não recomendamos o uso pois o visitante acaba sendo obrigado a consumir o vídeo. 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+
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 nos determinados 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.
Os anúncios devem servir imagem de backup para os browsers que não oferecem suporte à HTML5. O mesmo deve ocorrer se algum recurso externo não esteja disponível. Por exemplo no uso de XML para peças dinâmicas.