Añadir código a anuncios nativos

Si utiliza el editor de HTML y CSS, puede añadir código de ambos tipos para personalizar y aplicar estilo a sus anuncios nativos. En este artículo se proporcionan consejos y ejemplos para añadir código.

Las creatividades nativas generadas con este editor pueden servirse como anuncios tradicionales; los únicos anuncios programáticos que se admiten son las creatividades gestionadas por editores de programática garantizada. Si quiere servir creatividades nativas como anuncios tradicionales o anuncios programáticos de cualquier tipo, seleccione la opción "Empezar con las plantillas y personalizarlas" 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 rellenar un emplazamiento flexible e in-feed. Este estilo nativo se basa en un formato de anuncio nativo de "publicación patrocinada" con variables correspondientes al título, a la imagen y al cuerpo.

Tipo de código Código de ejemplo

HTML con variables

Tipo de código	Código de ejemplo
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 una creatividad nativa como estos:

Componente	Ejemplo
Título	Los 30 empleos con mayor crecimiento
Imagen	jobs.jpg
Cuerpo	Según el departamento de estadísticas laborales de los EE. UU., estos son los empleos que más crecerán 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

Añada un fragmento HTML que indique el aspecto que debe tener su anuncio nativo.

Es posible que deba pedir ayuda a su desarrollador web o de aplicaciones para generar el código.
Este fragmento puede incluir JavaScript entre etiquetas <script>.
Utilice solo el fragmento que sea pertinente al anuncio, ya que, si incluye un documento HTML completo, los anuncios no podrán verse en algunos navegadores, como Internet Explorer. Por ejemplo, no incluya etiquetas <doctype> ni <html>. Consulte el ejemplo incluido más arriba.
Los anuncios nativos no heredan ningún estilo de la página principal, pero puede importar hojas de estilo externas y fuentes web incluyendo etiquetas <link> en el código HTML.

El ajuste Ventana de destino determina si los anuncios nativos se abren en la misma pestaña o en una nueva ventana al hacer clic sobre ellos.

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

Insertar macros

Le resultará más sencillo generar su código HTML si hace clic en Insertar macro y usa los botones que se indican a continuación:

CacheBuster: sirve para que se registre una nueva llamada al servidor de anuncios cada vez que se ejecute el código para registrar las impresiones correctamente. Más información sobre CacheBuster
Macro de clics (recomendado): sirve para que se registren clics si su fragmento de código no contiene caracteres especiales. Más información sobre la macro de clics
URL de destino: sirve para especificar la página de destino de la creatividad que debería aparecer al hacer clic en el anuncio. Más información sobre las URLs de destino
Clic con formato de escape: sirve para que se registren clics si la URL de destino indicada en su fragmento de código contiene caracteres especiales como "&", "?" o "%". Más información sobre los clics con formato de escape
Envoltorio de vídeo: contiene el reproductor de vídeo del anuncio nativo. Más información sobre cómo configurar estilos de vídeo nativos

CSS

Utilice código CSS para especificar cómo se mostrará su anuncio nativo. Consulte el ejemplo anterior.

Si hace el traficado de anuncios nativos de tamaño flexible, no emplee el CSS de posicionamiento absoluto.

¿Te ha resultado útil esta información?

¿Cómo podemos mejorar esta página?

Añadir código a anuncios nativos

HTML

Insertar macros

CSS

¿Te ha resultado útil esta información?

¿Necesitas más ayuda?

Prueba estos pasos: