Ukuran iklan

Setiap slot iklan yang Anda tentukan harus menentukan ukuran iklan yang memenuhi syarat untuk ditayangkan di slot tersebut. Cara menentukan ukuran iklan bervariasi bergantung pada jenis iklan yang akan ditampilkan, serta ukuran dan fleksibilitas slot iklan itu sendiri.

Dalam beberapa kasus, ukuran iklan mungkin diganti di tingkat item baris dalam Google Ad Manager. Kunjungi pusat bantuan untuk mempelajari lebih lanjut.

Kode lengkap untuk contoh yang disertakan dalam panduan ini dapat ditemukan di halaman contoh ukuran iklan.

Iklan ukuran tetap

Anda dapat menentukan slot iklan dengan ukuran tetap tunggal.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

Dalam contoh ini, hanya materi iklan dengan ukuran 300x250 yang akan ditayangkan.

Poin utama: Saat menggunakan iklan ukuran tetap, sebaiknya Anda menentukan ukuran elemen <div> tempat materi iklan akan dirender. Karena materi iklan sering dirender secara asinkron, materi iklan dapat menyebabkan elemen lain di halaman bergeser jika ruang yang disediakan tidak cukup.

Iklan multi-ukuran

Jika iklan mendukung beberapa ukuran, berikan daftar ukuran yang didukung saat menentukan slot iklan.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

Dalam contoh ini, materi iklan dengan ukuran 300x250, 728x90, dan 750x200 dapat ditayangkan. Ad Manager hanya mempertimbangkan materi iklan yang cocok dengan ukuran ini selama proses pemilihan iklan.

Jika dimensi tidak ditentukan untuk slot iklan <div> di CSS, GPT akan otomatis menetapkan dimensi yang sama dengan tinggi terpendek yang dinyatakan dan lebar terlebar yang dideklarasikan untuk di atas 1 piksel saat display() dipanggil. Dalam hal ini, nilai tersebut adalah 750x90. Namun, pengubahan ukuran ini dapat terjadi setelah konten lain di halaman dimuat, sehingga menyebabkan konten tersebut bergeser. Untuk menghindari pergeseran tata letak, cadangkan ruang menggunakan CSS seperti yang ditunjukkan dalam panduan minimalkan pergeseran tata letak.

Saat menangani iklan multi-ukuran, pastikan tata letak Anda cukup fleksibel untuk mendukung iklan dengan ukuran terbesar yang telah ditentukan. Hal ini akan mencegah materi iklan dipangkas secara tidak sengaja.

Iklan yang dapat menyesuaikan

Iklan "Dapat menyesuaikan" tidak memiliki ukuran tetap, tetapi beradaptasi agar sesuai dengan konten materi iklan yang ditampilkan. Saat ini, Iklan native adalah satu-satunya jenis iklan yang dapat menyesuaikan yang didukung oleh Ad Manager.

Saat bekerja dengan iklan yang dapat menyesuaikan, ukuran fluid kustom mungkin ditentukan.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

Dalam contoh ini, slot iklan akan memiliki lebar penampung induknya dan mengubah ukuran tingginya agar sesuai dengan konten materi iklan. Langkah-langkah yang dilakukan GPT untuk mengubah ukuran slot iklan adalah sebagai berikut:

  1. Tanggapan iklan diterima.
  2. Konten materi iklan ditulis ke dalam iframe, dengan tinggi awal ditetapkan ke 0px dan lebar ditetapkan ke 100%.
  3. Setelah semua resource di iframe selesai dimuat, materi iklan akan terlihat dengan menyetel tinggi iframe sama dengan tinggi elemen <body> iframe.

Iklan responsif

Iklan responsif memperluas iklan multi-ukuran dan memungkinkan Anda menentukan ukuran materi iklan yang akan ditayangkan berdasarkan ukuran area pandang browser yang membuat permintaan. Fungsi ini dapat digunakan untuk mengontrol ukuran materi iklan yang ditayangkan ke berbagai jenis perangkat (desktop, tablet, seluler, dll.).

Hal ini dilakukan dengan menentukan pemetaan antara ukuran area pandang dan ukuran iklan, lalu mengaitkan pemetaan tersebut dengan slot iklan.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

Dalam contoh ini, pemetaan menentukan:

  • Jika area pandang >= 1024x768, iklan berukuran 750x200 atau 728x90 dapat ditayangkan.
  • Saat 1024x768 > area pandang >= 640x480, iklan berukuran 300x250 dapat ditayangkan.
  • Saat area pandang < 640x480, tidak ada iklan yang dapat ditayangkan.

GPT akan mendeteksi ukuran area pandang browser yang membuat permintaan dan menggunakan pemetaan terbesar yang sesuai. Untuk menentukan pemetaan GPT terbesar, pertama-tama pertimbangkan lebar, lalu tinggi (yaitu, [100, 10] > [10, 100]). Jika terjadi error dalam pemetaan atau jika ukuran area pandang tidak dapat ditentukan, ukuran yang ditentukan di defineSlot() akan digunakan.

Pemetaan ini kemudian akan dikaitkan dengan slot iklan dengan memanggil metode Slot.defineSizeMapping(). Metode ini menerima array pemetaan dalam format berikut:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

Urutan ukuran area pandang dalam array ini menentukan prioritasnya. SizeMappingBuilder yang digunakan dalam contoh di atas adalah cara mudah untuk menghasilkan array format ini, dengan ukuran yang otomatis diurutkan dari yang terbesar ke terkecil. Dalam contoh tersebut, output SizeMappingBuilder.build() adalah:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]