Agregue código para anuncios nativos

Cuando seleccionas la opción Editor de HTML y CSS para anuncios nativos, agregas código HTML y CSS para personalizar tus anuncios nativos y darles estilo. Este artículo proporciona sugerencias y ejemplos sobre cómo agregar el código.

Las creatividades nativas resultantes pueden publicarse como anuncios tradicionales (los únicos anuncios programáticos compatibles son las creatividades administradas por publicadores para Programática garantizada). Si deseas publicar creatividades nativas como anuncios tradicionales y todos los tipos de anuncios programáticos, selecciona la opción "Comienza con plantillas y personalízalas" en el Editor de diseño guiado.

Ejemplo de estilo nativo

A continuación, se muestra un ejemplo de código HTML y CSS en un estilo nativo para una posición flexible en el feed. Este estilo nativo se basa en un formato del anuncio nativo de "entrada patrocinada" con variables para título, imagen y cuerpo.

Tipo de código Código de muestra

HTML con variables

Tipo de código	Código de muestra
HTML con variables	`<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 con variables	.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 con variables

.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 convierte los componentes de creatividad nativa de este modo:

Componente	Ejemplo
Título	Los 30 empleos con mayor crecimiento
Imagen	jobs.jpg
Cuerpo	Según el organismo de EE.UU. encargado de las estadísticas laborales, los siguientes empleos son los que experimentarán un mayor crecimiento en los próximos 10 años. Se sorprenderá al ver la lista.

En un anuncio nativo como el siguiente:

Ejemplo de un anuncio nativo

HTML

Agregue un fragmento de HTML que indique cómo aparecerá su anuncio nativo.

Es posible que deba trabajar con su desarrollador web o de aplicaciones para crear este código.
Su código HTML puede incluir JavaScript en etiquetas <script>.
Incluya solo el fragmento relevante para el anuncio, ya que agregar un documento HTML completo impedirá que se muestren los anuncios en algunos navegadores, como Internet Explorer. Por ejemplo, no incluya etiquetas <doctype> ni <html>. Consulte el ejemplo anterior.
Los anuncios nativos no heredan estilos de la página principal, pero puede importar hojas de estilo externas y fuentes web con etiquetas <link> en el código HTML.

La configuración de la Ventana de destino controla si los anuncios nativos se abren en la misma pestaña o en una ventana nueva después de hacer clic en ellos.

Los anuncios tradicionales heredan la configuración del nivel del bloque de anuncios.
Los anuncios programáticos heredan la configuración del nivel de la red.

Cómo insertar macros

Puede hacer clic en Insertar macro y usar los siguientes botones para crear su código HTML:

CacheBuster: Garantiza que se hará una llamada nueva al servidor de anuncios cada vez que se ejecute el código, de manera que se cuenten las impresiones con exactitud. Obtenga más información sobre CacheBuster.
Clic (recomendado): Haga un seguimiento de los clics si el fragmento de código no incluye caracteres especiales. Obtenga más información sobre los clics.
URL de clic: Especifique la página de destino de la creatividad que debería aparecer cuando se haga clic en el anuncio. Obtenga más información sobre las URL de clic.
Clic con escape: Haga un seguimiento de los clics si el fragmento de código incluye caracteres especiales (por ejemplo, "&", "?", "%") en su URL de clic. Obtenga más información sobre los clics con escape.
Wrapper de video: Es el wrapper que contiene el reproductor de video del anuncio nativo. Obtenga más información para configurar estilos de video nativos.

CSS

Proporcione el código CSS que indica cómo se mostrará su anuncio nativo. Consulte el ejemplo anterior.

Si está dirigiendo el tráfico de anuncios nativos de tamaño fluido, no use CSS de posicionamiento absoluto.

¿Te resultó útil esto?

¿Cómo podemos mejorarla?

Agregue código para anuncios nativos

HTML

Cómo insertar macros

CSS

¿Te resultó útil esto?

¿Necesitas más ayuda?

Prueba estos próximos pasos: