Aggiungere codice per gli annunci nativi

Quando scegli l'opzione Editor HTML e CSS per gli annunci nativi, aggiungi codice HTML e CSS per personalizzare e impostare lo stile degli annunci nativi. Questo articolo fornisce suggerimenti ed esempi per l'aggiunta del codice.

Le creatività native risultanti possono essere pubblicate come annunci tradizionali (le creatività gestite dal publisher per la pubblicità programmatica garantita sono gli unici annunci di pubblicità programmatica supportati). Per pubblicare le creatività native sia come annunci tradizionali sia come qualsiasi tipo di annunci di pubblicità programmatica, seleziona l'opzione "Inizia con i modelli e personalizza" nell'Editor di progettazione guidata.

Esempio di stile nativo

Ecco un esempio di HTML e CSS in uno stile nativo per un posizionamento in-feed flessibile. Questo stile nativo si basa su un formato di annuncio nativo di tipo "post sponsorizzato" con le variabili Titolo, Immagine e Corpo.

Tipo di codice Codice di esempio

HTML con variabili

Tipo di codice	Codice di esempio
HTML con variabili	`<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 variabili	.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 variabili


.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;
}

Questo annuncio nativo convertirà i componenti della creatività nativa nel seguente modo:

Componente	Esempio
Titolo	Le 30 occupazioni in più forte ascesa
Creatività immagine	occupazioni.jpg
Corpo	Secondo l'Ufficio delle statistiche del lavoro degli Stati Uniti, le seguenti occupazioni saranno in forte domanda nei prossimi dieci anni. L'elenco potrebbe sorprenderti.

In un annuncio nativo con il seguente aspetto:

Esempio di annuncio nativo

HTML

Aggiungi uno snippet HTML che indichi come apparirà il tuo annuncio nativo.

Potrebbe essere necessario collaborare con il tuo sviluppatore web o dell'app per creare il codice.
Nel codice HTML, puoi includere JavaScript nei tag <script>.
Inserisci solo lo snippet pertinente all'annuncio, poiché l'inclusione dell'intero documento HTML impedisce la visualizzazione degli annunci su alcuni browser, tra cui Internet Explorer. Ad esempio, non includere i tag <doctype> o <html> (vedi l'esempio riportato sopra).
Gli annunci nativi non ereditano gli stili dalla pagina principale, ma puoi importare fogli di stile e caratteri web esterni inserendo il tag <link> nel codice HTML.

L'impostazione Finestra di destinazione consente di stabilire se, una volta fatto clic, gli annunci nativi si debbano aprire nella stessa scheda o in una nuova finestra.

Gli annunci tradizionali ereditano l'impostazione a livello di unità pubblicitaria.
Gli annunci programmatici ereditano l'impostazione a livello di rete.

Inserire macro

Puoi fare clic su Inserisci macro e usare i seguenti pulsanti per creare il codice HTML:

Cachebuster: assicura che venga effettuata una nuova chiamata all'ad server ogni volta che viene eseguito il codice, in modo che le impressioni siano conteggiate con precisione. Scopri di più su Cachebuster.
Clic (consigliato): esegue il monitoraggio dei clic se lo snippet di codice non contiene caratteri speciali. Scopri di più sui clic.
URL di click-through: specifica la pagina di destinazione della creatività da visualizzare quando qualcuno fa clic sull'annuncio. Scopri di più sugli URL di click-through.
Clic con caratteri di escape: esegue il monitoraggio dei clic se lo snippet di codice contiene caratteri speciali (ad esempio "&", "?", "%") nel suo URL di click-through. Scopri di più sui clic con caratteri escape.
Wrapper video: il wrapper contenente il video player per l'annuncio nativo. Scopri di più su come configurare gli stili video nativi.

CSS

Fornisci codice CSS che indichi come apparirà il tuo annuncio nativo. Vedi l'esempio riportato sopra.

Se gestisci il traffico di annunci nativi flessibili, non usare CSS per il posizionamento assoluto.

È stato utile?

Come possiamo migliorare l'articolo?

Aggiungere codice per gli annunci nativi

HTML

Inserire macro

CSS

È stato utile?

Hai bisogno di ulteriore assistenza?

Prova i passaggi successivi indicati di seguito: