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

<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:

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?
Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal
18256763870460236614
true
Buscar en el Centro de ayuda
true
true
true
true
true
148
false
false