Duyarlı reklam oluşturma

Ziyaretçilerinizin web sitenizi görüntülerken kullandığı tarayıcıya uygun duyarlı reklamlar oluşturmak için Google Yayıncı Etiketleri'ni (GPT) kullanabilirsiniz. Bu sayede, ziyaretçileriniz ister masaüstü ister tablet ya da akıllı telefon kullansın reklamlarınız güzel görünecektir.

İlgili Yayıncı Akademisi eğitimini izleyin

GPT API'sini kullanarak bir reklam alanı için boyut grubu olarak bir veya daha fazla boyut belirtebilirsiniz. Duyarlı reklam işlevselliğini kullanırken, tarayıcının boyutuna göre alternatif bir boyut grubu da seçebilirsiniz. Örneğin, tarayıcı 1024x768'den büyükse 970x90 ya da 728x90 olarak boyutlandırılmış reklamlardan birinin sunulması gerektiğini, daha küçük tarayıcılar içinse sadece 468x60 boyutlu reklamların sunulacağını belirtebilirsiniz. Masaüstü, tablet ve mobil cihazlar için farklı boyut ayarları belirtmek isteyebilirsiniz.

En iyi boyuta sahip reklam öğesinin kullanılabilmesi için eşleşmeler otomatik olarak sıralanır. Diğer boyutların hiçbiri ziyaretçinin tarayıcısıyla eşleşmiyorsa her tarayıcı boyutuna uyacak bir reklam sunmak için varsayılan bir reklam birimi belirtebilirsiniz.

GPT'ye yönelik duyarlı reklam etiketleme işlevleri, hem eşzamansız hem de eşzamanlı modda çalışacaktır. Ancak eşzamanlı reklam etiketleri sayfa içeriğinin yüklenmesini geciktirebileceğinden bunların etkinleştirilmesini önermiyoruz. 

2G gibi yavaş bağlantılara sahip kullanıcılar için, document.write() kullanılarak dinamik olarak yerleştirilmiş harici komut dosyaları, ana sayfa içeriğinin gösterilmesini onlarca saniye geciktirebilir. Eşzamanlı oluşturma yerine eşzamansız etiketlerin kullanılmasını önerme nedenlerimizden bir diğeri de budur. 2G ve document.write() ile ilgili sorunlar hakkında daha fazla bilgi

"Tarayıcı" boyutuna yönelik tüm referanslar aslında görüntü alanı boyutunu veya içeriğin göründüğü alanı belirtir. Tarayıcı araç çubukları, kaydırma çubukları, kenarlıklar vb. belirtilen boyuta dahil değildir.

Tarayıcı ve reklam boyutlarını belirtme

Öncelikle .sizeMapping çağrısı ile reklam boyutlarını tarayıcı boyutlarıyla eşleyin ve ardından .defineSizeMapping çağrısı ile eşlemeyi uygulayın.

Kullanılabilir tarayıcı boyutunun gerçek cihaz boyutundan küçük olduğunu unutmayın. Örneğin, iPad 2'nin cihaz boyutu 1024x768'dir. Ancak duyarlı reklamları eşlemek için kullanacağınız tarayıcı boyutu 980x690 olacaktır.

Cihazın tarayıcı boyutunu bulmak için Google Yayıncı Konsolu'nun sayfa isteği sekmesini kullanabilirsiniz.

var mapping = googletag.sizeMapping().
  addSize([1024, 768], [970, 250]).
  addSize([980, 690], [728, 90]).
  addSize([640, 480], [120, 60]).
  addSize([0, 0], [88, 31]).
  // 640 x 480'den küçük her boyutta tarayıcıya uyar
  build();
adSlot.defineSizeMapping(mapping);

addSize için belirttiğiniz ilk boyut tarayıcı boyutudur. Ondan sonraki her bir boyut ise bir reklam boyutudur. Örneğin, yukarıda tanımlanan ilk addSize öğesinde [1024, 768] tarayıcı boyutu, [970, 250] ise reklam boyutudur.

GPT, tarayıcı boyutunu algılar ve uygun olan en büyük eşlemeyi kullanır. En büyük eşlemeyi belirlemek için GPT önce genişliği, ardından yüksekliği dikkate alır (yani [100, 10] > [10, 100]). Her tarayıcı boyutunda kullanılabilecek varsayılan bir eşleme belirtmek için [0, 0] olan bir tarayıcı boyutu eşlemesi kullanılabilir.

Her tarayıcı boyutuna uyan bir reklam belirtmek için bir reklam boyutunu [0, 0] tarayıcı boyutuyla eşleyin.

Eşlemede bir hata varsa veya tarayıcı boyutu belirlenemiyorsa .defineSlot öğesinde belirtilen boyutlar kullanılacaktır.

adslot.defineSizeMapping() yöntemi şu biçime sahip bir eşleme dizisi alır: [ [ [ 1024, 768 ], [ [ 970, 250 ] ] ], [ [ 980, 690 ], [ [ 728, 90 ] ] ], ...], (yeşil - tarayıcı boyutu, kırmızı - alan boyutları). Bunlar en yüksek öncelikten en düşük önceliğe doğru sıralanmalıdır Eşlemeleri otomatik olarak sıralayan oluşturucu söz diziminin kullanılması, eşlemelerin tanımlanmasında daha okunaklı bir yöntemdir. Ancak, oluşturucuyu atlayıp eşleme dizisini manuel olarak oluşturarak farklı öncelik sıralaması kullanma seçeneğiniz de vardır.

Bazı reklamları belirli cihazlarda göstermek isterseniz reklamları belirli tarayıcı boyutları için gizleyebilirsiniz (göstermeyebilirsiniz).

// Bu eşleme yalnızca kullanıcının masaüstü boyutlu görüntü alanı üzerinde olması durumunda reklam gösterecektir.
var mapping1 = googletag.sizeMapping().
  addSize([0, 0], []).
  addSize([1050, 200], [1024, 120]). // Masaüstü
  build();
 
// Bu eşleme yalnızca kullanıcının mobil veya tablet boyutlu görüntü alanı üzerinde olması durumunda reklam gösterecektir.
var mapping2 = googletag.sizeMapping().
  addSize([0, 0], []).
  addSize([320, 700], [300, 250]). // Tablet
  addSize([1050, 200], []). // Masaüstü
  build();
 
// GPT alanları
 var gptAdSlots = [];
 
gptAdSlots[0] = googletag.defineSlot('/123/sample/firstAd', [1024, 120], 'ad-slot-1').
  defineSizeMapping(mapping1).
  setCollapseEmptyDiv(true).
  addService(googletag.pubads());
 
gptAdSlots[1] = googletag.defineSlot('/123/sample/secondAd', [300, 250], 'ad-slot-2').
  defineSizeMapping(mapping2).
  setCollapseEmptyDiv(true).
  addService(googletag.pubads());
 
// Reklam getirmeye başlama
googletag.enableServices();

Ayrıca, olası tüm konumlar için reklam alanları oluşturarak ve belirli alanların yalnızca belirli tarayıcı aralıkları için gösterilmesini sağlayarak farklı cihazlardaki reklamların konumunu kontrol edebilirsiniz.

Yenileme işlevinin GPT ile çalışma şekli hakkında daha fazla bilgiyi Google Yayıncı Etiketi API'sı başvuru kılavuzundan edinebilirsiniz. Bir örnek görmek için Gelişmiş GPT örnekleri'ndeki "Duyarlı tasarıma yönelik etiketler uygulama" bölümüne bakın.

Tarayıcının boyutu değiştiğinde GPT duyarlı reklamları yeniden boyutlandırılmaz. Yeniden boyutlandırma durumunda reklam alanlarını yenilemek için kendi özel kodunuzu ekleyebilirsiniz.

Duyarlı reklamları trafiğe ekleme

Google Yayıncı Etiketleri ile duyarlı reklamlar oluşturduğunuzda, reklamlar tarayıcı boyutu ve cihaza göre gösterilir. Eşleme işlevi, isteği yapan cihazın ekran boyutuna göre Ad Manager'da doğru boyutlu reklam isteğinin yapılmasını sağlar.

Ad Manager'da duyarlı AdSense etiketlerini trafiğe ekleyemezsiniz. Bunun yerine, ilgili sayfada GPT'yi kullanarak duyarlı etiketler uygulamanız gerekir. Örnek duyarlı etiketlerde gösterildiği gibi, AdSense tarafından desteklenen standart reklam biçimlerine göre AdSense etiketlerinin yüksekliğini ve genişliğini belirtin.

Aşağıda mobil için 320x100, tablet için 300x250 ve masaüstü için 336x280 boyutunu kullanarak AdSense etiketlerine sahip duyarlı bir reklam uygulanmasına ilişkin bir örnek bulunmaktadır:

  1. Sayfada duyarlı Google Yayıncı Etiketlerinizi uygulayın.
  2. Üç boyutu (320x100, 300x250 ve 336x280) belirterek bir AdSense satır öğesi oluşturun ve duyarlı etiketi oluşturmak için kullandığınız reklam birimini hedefleyin.
  3. AdSense satır öğesine, ilgili boyutlar için üç reklam öğesi ekleyin. AdSense kodu, bu reklam öğelerinde trafiğe eklenmelidir.

Ad Manager'dan Ad Exchange reklam öğeleri yayınlarken daha hızlı bir sayfa yükleme deneyimi için eşzamansız oluşturmayı tekli istek moduyla kullanmanızı öneririz. Reklamların iframe'de oluşturulmasından kaçının ve doğrudan sayfa üzerinde olmalarını sağlayın.

Bu makale faydalı mıydı?
Bunu nasıl iyileştirebiliriz?