Adicionar código para anúncios nativos

Quando você escolher a opção de editor HTML e CSS para anúncios nativos, adicione código HTML e CSS para personalizar e estilizar seus anúncios nativos. Este artigo fornece dicas e exemplos para adicionar o código.

Os criativos nativos resultantes podem ser veiculados como anúncios tradicionais. Os criativos gerenciados pelo editor para programática garantida são os únicos anúncios programáticos compatíveis. Para veicular criativos nativos como anúncios tradicionais e todos os tipos de anúncios programáticos, selecione a opção Comece com modelos e faça personalizações no Editor de design guiado.

Exemplo de estilo nativo

Veja um exemplo de HTML e CSS em um estilo nativo para um canal fluido no feed. Esse estilo nativo é baseado em um formato de anúncio nativo de “postagem patrocinada” com variáveis de título, imagem e corpo.

Tipo de código Exemplo de código

HTML com variáveis

Tipo de código	Exemplo de código
HTML com variáveis	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS com variáveis	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

CSS com variáveis

.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

Esse estilo nativo converterá componentes de criativo nativo como estes:

Componente	Exemplo
Título	Os 30 empregos com maior crescimento
Imagem	jobs.jpg
Corpo	Segundo o Bureau of Labor Statistics dos EUA, estes empregos são os que mais crescerão nos próximos 10 anos. A lista pode surpreender você.

A conversão resultará em um anúncio nativo como este:

Exemplo de anúncio nativo

HTML

Adicione um snippet de HTML que indique como seu anúncio nativo será exibido.

Talvez seja preciso trabalhar com seu desenvolvedor da Web ou de apps para criar o código.
Seu HTML pode incluir JavaScript em tags <script>.
Inclua somente o snippet relevante para o anúncio, porque adicionar um documento HTML completo impedirá a exibição de anúncios em alguns navegadores, como o Internet Explorer. Por exemplo, não inclua as tags <doctype> nem <html>. Veja o exemplo acima.
Os anúncios nativos não herdam os estilos da página pai, mas é possível importar folhas de estilo externas e fontes da Web com tags <link> no HTML.

A configuração Janela de segmentação controla se os anúncios nativos serão abertos na mesma guia ou em uma nova janela após serem clicados.

Os anúncios tradicionais herdam as configurações do nível do bloco de anúncios.
Os anúncios programáticos herdam a configuração do nível da rede.

Inserir macros

Você pode clicar em Inserir macro e usar os seguintes botões para ajudar a criar o HTML:

CacheBuster: será preciso fazer uma nova chamada ao servidor de anúncios sempre que o código for executado. Dessa forma, você contará as impressões com precisão. Saiba mais sobre a CacheBuster.
Clique (recomendado): rastreie os cliques caso seu snippet de código não tenha caracteres especiais. Saiba mais sobre a macro de clique.
URL de clique: especifique a página de destino do criativo que deve aparecer quando alguém clica no anúncio. Saiba mais sobre URLs de clique.
Clique de escape: rastreie cliques se o snippet de código tiver caracteres especiais (por exemplo, "&", "?" e "%") no URL de clique. Saiba mais sobre cliques de escape.
Wrapper de vídeo: é o wrapper que contém o player de vídeo para o anúncio nativo. Saiba mais sobre como configurar estilos de vídeos nativos.

CSS

Forneça o código CSS que indica como seu anúncio nativo será exibido. Veja o exemplo acima.

Ao programar anúncios nativos de tamanho fluido, não use CSS de posicionamento absoluto.

Isso foi útil?

Como podemos melhorá-lo?

Adicionar código para anúncios nativos

HTML

Inserir macros

CSS

Isso foi útil?

Precisa de mais ajuda?

Siga as próximas etapas: