Yerel reklamlar için kod ekleme

Yerel reklamlar için HTML ve CSS düzenleyici seçeneğini belirlediğinizde, yerel 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 yerel 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. Yerel 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.

Yerel stil örneği

Değişken, özet akışında yerleşim için yerel bir stilde HTML ve CSS örneği aşağıda verilmiştir. Bu yerel stil, Başlık, Resim ve Gövde değişkenleriyle "sponsorlu yayın" yerel 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 yerel stil, aşağıdaki gibi yerel reklam öğesi bileşenlerini alır:

Bileşen	Örnek
Başlık	En Hızlı Büyüyen 30 Meslek Dalı
Resim	meslekler.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 yerel reklama dönüştürür:

Doğal reklam örneği

HTML

Yerel 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).
Yerel reklamlar üst sayfadan stil devralmaz. Ancak harici stil sayfalarını ve web yazı tiplerini HTML'deki <link> etiketleriyle içe aktarabilirsiniz.

Hedef Pencere ayarı, yerel 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:

Önbellek engelleme: 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. Önbellek engelleme hakkında daha fazla bilgi
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ı: Yerel reklam için video oynatıcıyı içeren sarmalayıcı. Yerel video stillerini yapılandırma hakkında daha fazla bilgi

CSS

Yerel 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 yerel 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?

Yerel 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: