Přidání kódu pro nativní reklamy

Když pro nativní reklamy vyberete možnost Editor kódu HTML a CSS, přidáte kód HTML a CSS, pomocí něhož nativní reklamy upravíte a naformátujete. V tomto článku najdete tipy a vzory k přidání kódu.

Výsledné nativní kreativy se mohou zobrazovat jako tradiční reklamy (z programatických reklam jsou podporovány pouze kreativy spravované majitelem stránek pro programatický prodej zaručeného inventáře). Pokud nativní kreativy chcete zobrazovat jak prostřednictvím tradičních reklam, tak prostřednictvím všech typů programatických reklam, v Editoru designu s průvodcem vyberte možnost Začít se šablonami a upravit je.

Ukázka nativního stylu

Zde je příklad kódu HTML a CSS v nativním stylu pro proměnlivé umístění ve zdroji. Tento nativní styl je založen na formátu nativní reklamy „sponzorovaný příspěvek“ s proměnnými Headline (Nadpis), Image (Obrázek) a Body (Text).

Typ kódu Ukázka kódu

HTML s proměnnými

Typ kódu	Ukázka kódu
HTML s proměnnými	`<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 s proměnnými	.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 s proměnnými


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

Komponenty nativní kreativy:

Komponenta	Příklad
Headline	The 30 Fastest Growing Jobs
Image	jobs.jpg
Body	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.

Výše uvedený nativní styl převede výše uvedené komponenty nativní kreativy na následující nativní reklamu:

Příklad nativní reklamy

HTML

Přidejte fragment kódu HTML, který udává, jak se nativní reklama zobrazí.

Je možné, že k vytvoření kódu budete potřebovat pomoc svého webového vývojáře nebo vývojáře aplikací.
Kód HTML může obsahovat JavaScript ve značkách <script>.
Zadejte pouze fragment relevantní pro reklamu. Zadání celého dokumentu HTML zabrání zobrazení reklam v některých prohlížečích, včetně prohlížeče Internet Explorer. Nezahrnujte například značky <doctype> nebo <html> – viz příklad výše).
Nativní reklamy nedědí styly z nadřazené stránky. Pomocí značek <link> však v kódu HTML můžete importovat externí šablony stylů a webová písma.

Nastavení Cílové okno určuje, zda se nativní reklamy po kliknutí otevřou na stejné kartě, nebo v novém okně.

Tradiční reklamy dědí nastavení reklamní jednotky.
Programatické reklamy dědí nastavení na úrovni sítě.

Vložení maker

Při vytváření kódu HTML můžete kliknout na tlačítko Vložte makro a použít následující tlačítka:

Vynechání mezipaměti počítače: Umožňuje zajistit, aby při každém spuštění kódu proběhlo nové volání reklamního serveru a získali jste tak správný počet zobrazení. Další informace o makru pro vynechání mezipaměti prohlížeče
Kliknutí (doporučeno): Slouží k měření prokliků pokud fragment kódu neobsahuje speciální znaky. Další informace o makru kliknutí
Cílová adresa URL: Umožňuje určit vstupní stránku kreativy, která se zobrazí, když na reklamu někdo klikne. Další informace o cílových adresách URL
Makro kliknutí s kódováním: Umožňuje měřit prokliky, pokud cílová adresa URL ve fragmentu kódu obsahuje speciální znaky (např. &, ?, %). Další informace o kliknutích s kódování speciálních znaků
Obálka videa: Obálka, která obsahuje přehrávač videa pro nativní reklamu. Další informace o konfiguraci stylů nativních videoreklam

CSS

Zadejte kód CSS, který udává, jak se nativní reklama zobrazí. Viz příklad výše.

Pokud konfigurujete nativní reklamy s proměnlivou velikostí, nepoužívejte styly CSS s nastavením absolutní polohy.

Pomohly vám tyto informace?

Jak bychom článek mohli vylepšit?

Přidání kódu pro nativní reklamy

HTML

Vložení maker

CSS

Pomohly vám tyto informace?

Potřebujete další pomoc?

Vyzkoušejte tyto další kroky: