Natív hirdetés kódjának hozzáadása

Ha a natív hirdetésekhez a HTML- és CSS-szerkesztőt választja, a HTML- és a CSS-kód hozzáadásával személyre szabhatja a hirdetéseket. A jelen cikk ezzel kapcsolatban ad tanácsokat és példákat.

Az így kapott natív kreatívok hagyományos hirdetésként jelenhetnek meg (az egyedüli támogatott automatizált hirdetések a garantált automatizált ügyletek megjelenítő által kezelt kreatívjai). Ha a natív kreatívokat szeretné megjeleníteni hagyományos hirdetésekként, valamint az automatizált hirdetések minden típusaként is, válassza ki a „Kezdés a sablonokkal és a személyre szabással” beállítást a Designszerkesztő útmutatóval eszközben.

Natív stílus – példa

Az alábbiakban egy rugalmas, hírcsatornabeli elhelyezésre megadott natív stílus HTML- és CSS-kódjára láthat példát. Ez a natív stílus a címsor (Headline), kép (Image) és szövegtörzs (Body) változót tartalmazó „szponzorált bejegyzés” natív hirdetésformátumon alapul.

Kód típusa Mintakódolás

HTML változókkal

Kód típusa	Mintakódolás
HTML változókkal	`<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 változókkal	.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 változókkal

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

Ez a natív stílus a következőkhöz hasonló natívkreatív-összetevőket konvertálja:

Összetevő	Példa
Címsor	A 30 legdinamikusabban növekvő foglalkozás
Kép	jobs.jpg
Törzs	Az Amerikai Egyesült Államok Foglalkoztatottságstatisztikai Hivatala szerint ezek a foglalkozások nőnek a legnagyobb mértékben a következő 10 évben. A lista meglepő lehet.

Az alábbihoz hasonló natív hirdetéssé alakítja át:

Példa natív hirdetésre

HTML

Adja meg az azt jelző HTML-kódrészletet, hogy miként jelenjen meg a natív hirdetés.

Előfordulhat, hogy együtt kell működnie web- vagy alkalmazásfejlesztőjével a kód létrehozásához.
A HTML-kód <script> címkék között tartalmazhat JavaScriptet is.
Kérjük, csak a hirdetés szempontjából releváns részletet adjon meg, mivel a teljes HTML-dokumentum megadása bizonyos böngészők, így például az Internet Explorer esetében megakadályozza a hirdetés megjelenítését. Például ne adjon meg <doctype> vagy <html> címkéket – lásd a fenti példát.
A natív hirdetések nem öröklik a szülőoldal stílusát, lehetőség van azonban arra, hogy <link> címkékkel külső stíluslapokat és internetes betűtípusokat importáljon a HTML-be.

A Célablak beállítás szabályozza, hogy a natív hirdetések ugyanazon a lapon vagy új ablakban nyíljanak-e meg, miután rájuk kattintottak.

A hagyományos hirdetések a hirdetésiegység-szintű beállításokat öröklik.
Az automatizált hirdetések a hálózati szintű beállításokat öröklik.

Makrók beillesztése

A Makró beszúrása lehetőségre kattintva használhatja a következő gombokat, amelyek segítségére lesznek a HTML elkészítésében:

CacheBuster: A megjelenítések pontos számolása érdekében biztosíthatja, hogy minden kódvégrehajtáskor friss hívás történjen a hirdetésszerver felé. További információ a CacheBuster makróról.
Kattintás (ajánlott): Nyomon követheti a kattintásokat, ha a kódrészlet nem tartalmaz speciális karaktereket. További információ a kattintásról.
Átkattintási URL: Meghatározhatja a hirdetés nyitóoldalát, amely akkor jelenik meg, amikor valaki a hirdetésre kattint. További információ az átkattintási URL-ekről.
Megtisztított kattintás: Nyomon követheti a kattintásokat, ha a kódrészlet átkattintási URL-címében speciális karakterek (például „&”, „?”, „%”) találhatók. További információ a megtisztított kattintásokról.
Videóburkoló: A burkoló, amely a natív hirdetéshez tartozó videólejátszót tartalmazza. További információ a natív videostílusok konfigurálásáról.

CSS

Adja meg az azt jelölő CSS-kódot, hogy miként jelenjen meg a natív hirdetés. Lásd a fenti példát.

Ha rugalmas méretű natív hirdetéseket forgalmaz, ne használjon abszolút pozicionálású CSS-t.

Hasznosnak találta?

Hogyan fejleszthetnénk?

Natív hirdetés kódjának hozzáadása

HTML

Makrók beillesztése

CSS

Hasznosnak találta?

További segítségre van szüksége?

Próbálja ki a következő lépéseket: