Doğal reklamlar için kod ekleme

Doğal reklamlar için HTML ve CSS düzenleyici seçeneğini belirlediğinizde, doğal reklamlarınızı özelleştirip bunların stillerini belirlemek için HTML ve CSS kodu eklersiniz. Bu makalede, kodu eklemeyle ilgili ipuçları ve örnekler verilmiştir.

Ortaya çıkan doğal reklam öğeleri, geleneksel reklam olarak yayınlanabilir. Programatik reklam olarak yalnızca Programatik Garantili için yayıncı tarafından yönetilen reklam öğeleri desteklenir. Doğal reklam öğelerini hem geleneksel reklam olarak hem de tüm programatik reklam türlerinde yayınlamak için lütfen Açıklamalı tasarım düzenleyicide "Şablonlarla başlayın ve özelleştirin" seçeneğini belirleyin.

Doğal reklam stili örneği

Değişken, özet akışında yerleşim için doğal reklam stilinde HTML ve CSS örneği aşağıda verilmiştir. Bu doğal reklam stili, Başlık, Resim ve Gövde değişkenleriyle "sponsorlu yayın" doğal reklam biçimine dayalıdır.

Kod türü Örnek kod

Değişkenlerle HTML

Kod türü	Örnek kod
Değişkenlerle HTML	`<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>`
Değişkenlerle CSS	.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>

Değişkenlerle CSS

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

Bu doğal reklam stili, aşağıdaki gibi doğal reklam öğesi bileşenlerini alır:

Bileşen	Örnek
Başlık	En Hızlı Büyüyen 30 Meslek Dalı
Resim	jobs.jpg
Gövde	ABD İş Gücü İstatistikleri Bürosuna göre, önümüzdeki 10 yılda en fazla büyüme bu mesleklerde gerçekleşecek. Liste sizi şaşırtabilir.

Bu bileşenleri şöyle görünen bir doğal reklama dönüştürür:

Doğal reklam örneği

HTML

Doğal reklamınızın nasıl görüneceğini belirten HTML snippet'ini ekleyin.

Bu kodu oluşturmak için yerel web veya uygulama geliştiricinizle iş birliği yapmanız gerekebilir.
HTML'niz <script> etiketlerinde JavaScript'i içerebilir.
Lütfen yalnızca reklamla ilgili snippet'i dahil edin. Tam bir HTML belgesinin dahil edilmesi, reklamların Internet Explorer gibi bazı tarayıcılarda gösterilmesini engeller. Örneğin, <doctype> veya <html> etiketlerini dahil etmeyin (yukarıdaki örneğe bakın).
Doğal reklamlar üst sayfadan stil devralmaz. Ancak harici stil sayfalarını ve web yazı tiplerini HTML'deki <link> etiketleriyle içe aktarabilirsiniz.

Hedef Pencere ayarı, doğal reklamların tıklandıktan sonra aynı sekmede mi yoksa yeni pencerede mi açılacağını kontrol eder.

Geleneksel reklamlar, reklam birimi seviyesindeki ayarı devralır.
Programatik reklamlar, ağ seviyesindeki ayarı devralır.

Makro ekleme

Makro ekle'yi tıklayabilir ve HTML'nizi oluşturmak için aşağıdaki düğmeleri kullanabilirsiniz:

CacheBuster: Gösterimleri doğru şekilde sayabilmeniz için kod her yürütüldüğünde reklam sunucusuna yeni bir çağrının yapılmasını sağlar. CacheBuster
Tıklama (önerilir): Kod snippet'iniz özel karakterler içermiyorsa tıklamaları izler. Tıklama hakkında daha fazla bilgi
Tıklama URL'si: Bir kullanıcı reklamı tıkladığında görünmesi gereken reklam öğesinin açılış sayfasını belirtin. Tıklama URL'leri hakkında daha fazla bilgi
Çıkış karakterli tıklama: Kod snippet'iniz tıklama URL'sinde özel karakterler (örneğin, '&', '?', '%') içeriyorsa tıklamaları izler. Çıkış karakterli tıklamalar hakkında daha fazla bilgi
Video sarmalayıcı: Doğal reklam için video oynatıcıyı içeren sarmalayıcı. Doğal video reklam stillerini yapılandırma hakkında daha fazla bilgi

CSS

Doğal reklamınızın nasıl görüneceğini gösteren CSS kodunu sağlayın. Yukarıdaki örneği inceleyin.

Değişken boyuttaki doğal reklamları trafiğe ekliyorsanız lütfen mutlak konumlandırma CSS'si kullanmayın.

Bu size yardımcı oldu mu?

Bunu nasıl iyileştirebiliriz?

Doğal reklamlar için kod ekleme

HTML

Makro ekleme

CSS

Bu size yardımcı oldu mu?

Daha fazla yardıma mı ihtiyacınız var?

Bir sonraki adımları deneyin: