Adicione código para anúncios nativos

Quando seleciona a opção Editor HTML e CSS para anúncios nativos, adiciona código HTML e CSS para personalizar e aplicar um estilo aos anúncios nativos. Este artigo fornece sugestões e exemplos para adicionar o código.

Os criativos nativos resultantes podem ser publicados como anúncios tradicionais (os criativos geridos pelo publicador para Garantido de forma programática são os únicos anúncios programáticos suportados). Para publicar criativos nativos como anúncios tradicionais e como todos os tipos de anúncios programáticos, selecione a opção "Começar com modelos e personalizar" no Editor de design com orientações.

Exemplo de estilo nativo

Segue-se um exemplo de código HTML e CSS num estilo nativo para um posicionamento fluído no feed. Este estilo nativo baseia-se num formato de anúncio nativo de "publicação patrocinada" com as variáveis 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;
}

Este estilo nativo converte componentes do criativo nativo como estes:

Componente	Exemplo
Título	As 30 profissões em mais rápido crescimento
Imagem	jobs.jpg
Corpo	Segundo o Instituto de Estatísticas do Trabalho dos EUA, estas profissões são as que terão um maior crescimento nos próximos 10 anos. A lista pode surpreendê-lo.

Num anúncio nativo com este aspeto:

Um exemplo de um anúncio nativo

HTML

Adicione um fragmento HTML para determinar o aspeto do anúncio nativo.

Pode ser necessário colaborar com o seu programador Web ou de aplicações para criar o código.
O HTML pode incluir JavaScript nas etiquetas <script>.
Inclua apenas o fragmento relevante para o anúncio, uma vez que ao incluir um documento HTML completo impede a apresentação de anúncios em alguns navegadores, incluindo o Internet Explorer. Por exemplo, não inclua as etiquetas <doctype> ou <html>. Consulte o exemplo acima.
Os anúncios nativos não herdam os estilos da página superior, mas pode importar folhas de estilos externas e tipos de letra da Web com etiquetas <link> no HTML.

A definição Janela de segmentação controla se os anúncios nativos, depois de receberem o clique, são abertos no mesmo separador ou numa nova janela.

Os anúncios tradicionais herdam a definição ao nível do bloco de anúncios.
Os anúncios programáticos herdam a definição ao nível da rede.

Inserir macros

Pode clicar em Inserir macro e utilizar os botões seguintes para ajudar a criar o código HTML:

Ignorar cache: certifique-se de que é efetuada uma nova chamada para o servidor de anúncios sempre que é executado o código de modo a conseguir contabilizar as impressões com precisão. Saiba mais acerca de Ignorar cache.
Clique (recomendado): acompanhe os cliques se o fragmento do código não incluir carateres especiais. Saiba mais acerca do clique.
URL de clique: especifique a página de destino do criativo que deve aparecer quando alguém clica no anúncio. Saiba mais acerca dos URLs de clique.
Clique com caráter de escape: acompanhe os cliques se o fragmento do código incluir carateres especiais (por exemplo, "&", "?" ou "%") no respetivo URL de clique. Saiba mais acerca dos cliques com caráter de escape.
Wrapper de vídeo: o wrapper que contém o leitor de vídeo para o anúncio nativo. Saiba mais acerca de como configurar estilos de vídeo nativos.

CSS

Introduza código CSS para determinar o aspeto do anúncio nativo. Consulte o exemplo acima.

Se estiver a controlar o tráfego de anúncios nativos de tamanho fluido, não utilize o CSS de posicionamento absoluto.

A informação foi útil?

Como podemos melhorá-la?

Adicione código para anúncios nativos

HTML

Inserir macros

CSS

A informação foi útil?

Precisa de mais ajuda?

Experimente estes passos seguintes: