Code toevoegen voor native-advertenties

Wanneer u de optie Html- en css-editor voor native-advertenties kiest, voegt u html- en css-code toe om uw native-advertenties aan te passen en op te maken. In dit artikel vindt u tips en voorbeelden van hoe u de code kunt toevoegen.

Het resulterende native-advertentiemateriaal kan worden weergegeven als traditionele advertenties (door de uitgever beheerde advertentiemateriaalitems voor Programmatic Guaranteed zijn de enige ondersteunde programmatic advertenties). Als u native advertentiemateriaal wilt weergeven als traditionele advertenties en alle typen programmatic advertenties, selecteert u de optie 'Beginnen met templates en ze aanpassen' in de begeleide ontwerpeditor.

Voorbeeld van native stijl

Hier vindt u een voorbeeld van HTML en CSS in een native stijl voor een vloeiende plaatsing in een feed. Deze native stijl is gebaseerd op een native-advertentie-indeling 'gesponsord bericht' met de variabelen Kop, Afbeelding en Hoofdtekst.

Codetype Voorbeeldcode

HTML met variabelen

Codetype	Voorbeeldcode
HTML met variabelen	`<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 met variabelen	.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 met variabelen


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

Deze native stijl zet native-advertentiecomponenten zoals de volgende:

Component	Voorbeeld
Kop	The 30 Fastest Growing Jobs
Afbeelding	jobs.jpg
Hoofdtekst	According to the U.S Bureau of Labor Statistics, these occupations will grow the most in the next 10 years. The list might surprise you.

om in een native-advertentie die er als volgt uitziet:

Een voorbeeld van een native advertentie

Html

Voeg een html-fragment toe dat aangeeft hoe uw native-advertentie wordt weergegeven.

Maak deze code zo nodig in samenwerking met uw web- of app-ontwikkelaar.
Uw html kan JavaScript in <script>-tags bevatten.
Neem alleen het fragment op dat relevant is voor de advertentie. Als u een volledig HTML-document opneemt, worden de advertenties niet weergegeven in bepaalde browsers, waaronder Internet Explorer. Neem bijvoorbeeld geen <doctype>- of <html>-tags op. Bekijk het bovenstaande voorbeeld.
Bij native-advertenties worden geen stijlen overgenomen van de bovenliggende pagina, maar u kunt externe stylesheets en weblettertypen importeren met <link>-tags in de html.

De instelling Doelvenster bepaalt of native-advertenties worden geopend op hetzelfde tabblad of in een nieuw venster nadat erop is geklikt.

Traditionele advertenties nemen de instelling op advertentieblokniveau over.
Programmatic advertenties nemen de instelling op netwerkniveau over.

Macro's invoegen

U kunt op Macro invoegen klikken en de volgende knoppen gebruiken om uw html-code samen te stellen:

CacheBuster: Zorg ervoor dat er elke keer dat de code wordt uitgevoerd, een nieuwe aanvraag naar de advertentieserver wordt gestuurd, zodat de vertoningen nauwkeurig worden geteld. Meer informatie over CacheBuster.
Klik (aanbevolen): Houd klikken bij als uw codefragment geen speciale tekens bevat. Meer informatie over klikken.
Doorklik-URL: Geef de bestemmingspagina van het advertentiemateriaal op dat moet worden weergegeven wanneer iemand op de advertentie klikt. Meer informatie over doorklik-URL's.
Escape-klik: Houd klikken bij als uw codefragment speciale tekens bevat (bijvoorbeeld '&', '?', '%') in de doorklik-URL. Meer informatie over escape-klikken.
Videowrapper: De wrapper die de videospeler voor de native-advertentie bevat. Meer informatie over hoe u native videostijlen configureert.

Css

Geef css-code op die aangeeft hoe uw native-advertentie wordt weergegeven. Bekijk het bovenstaande voorbeeld.

Als u native ads met het formaat Vloeiend distribueert, moet u geen absolute positionerings-css gebruiken.

Was dit nuttig?

Hoe kunnen we dit verbeteren?

Code toevoegen voor native-advertenties

Html

Macro's invoegen

Css

Was dit nuttig?

Meer hulp nodig?

Probeer de volgende stappen: