Ukuran iklan

Setiap slot iklan yang Anda tetapkan harus menetapkan ukuran iklan yang memenuhi syarat untuk ditayangkan di slot waktu. Cara menetapkan ukuran iklan bervariasi bergantung pada jenis iklan yang akan yang 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 banyak lagi.

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

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 menangani iklan ukuran tetap, sebaiknya tentukan ukuran elemen <div> tempat materi iklan akan dirender. Sejak sering kali dirender secara asinkron, materi iklan dapat menyebabkan elemen lain halaman untuk bergeser jika tidak ada ruang yang cukup untuk mereka.

Iklan beberapa ukuran

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

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

Dalam contoh ini, materi iklan dengan ukuran 300x250, 728x90, dan 750x200 dapat dilayani. 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 otomatis menetapkan dimensi yang sama dengan dimensi terpendek tinggi yang dinyatakan dan lebar terlebar yang dinyatakan di atas 1 piksel saat display() dipanggil. Dalam hal ini, nilainya adalah 750x90. Namun, ukuran ini mungkin terjadi setelah konten lain pada laman telah dimuat, yang menyebabkan konten tersebut bergeser. Untuk menghindari pergeseran tata letak, memesan ruang menggunakan CSS seperti yang ditunjukkan dalam panduan meminimalkan pergeseran tata letak.

Saat menggunakan iklan multi-ukuran, pastikan tata letak Anda cukup fleksibel untuk mendukung iklan dengan ukuran terbesar yang ditetapkan. Hal ini akan menghindari materi iklan terpangkas secara tidak sengaja.

Iklan yang dapat menyesuaikan

Iklan yang dapat menyesuaikan tidak memiliki ukuran tetap, tetapi beradaptasi agar sesuai dengan konten materi iklan tampilan. Iklan native saat ini adalah satu-satunya iklan yang dapat disesuaikan yang didukung oleh Ad Manager.

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

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

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

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

Iklan responsif

Iklan responsif memperluas iklan multi-ukuran dan memungkinkan Anda menentukan ukuran materi iklan untuk 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, kemudian 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 menetapkan:

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

GPT akan mendeteksi ukuran area pandang browser sehingga permintaan dan menggunakan pemetaan terbesar yang sesuai. Untuk menentukan memetakan GPT pertama yang mempertimbangkan lebar, lalu tinggi (misalnya, [100, 10] > [10, 100]). Jika terjadi error dalam pemetaan atau jika area tampilan ukuran tidak dapat ditentukan, ukuran yang ditentukan dalam defineSlot() akan digunakan.

Pemetaan tersebut kemudian dikaitkan dengan slot iklan dengan memanggil 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. Tujuan SizeMappingBuilder digunakan di contoh di atas adalah cara mudah untuk menghasilkan array format ini, dengan ukuran secara otomatis diurutkan dari terbesar ke terkecil. Di sana misalnya, {i>output <i}dari SizeMappingBuilder.build():

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