Cara mengubah kode iklan responsif

Jika merasa bahwa kode iklan responsif kami tidak memenuhi kebutuhan Anda, ubah kode iklan untuk memenuhi persyaratan situs responsif Anda dengan lebih baik. Contoh dalam artikel ini menunjukkan cara melakukan perubahan tersebut dengan benar.

Sebelum memulai:

• Jika Anda baru mengenal kueri media CSS dan belum memahami cara mengubah kode iklan, sebaiknya mulai dengan contoh ukuran unit iklan yang tepat per lebar layar.
• Jika Anda sudah memahami kueri media CSS dan mengetahui cara mengubah kode iklan, buka langsung bagian contoh fitur kode iklan responsif lanjutan.

Catatan: Contoh yang dijelaskan dalam artikel ini adalah perubahan yang dapat diterima pada kode iklan AdSense. Anda tidak akan melanggar kebijakan Program AdSense jika mengubah kode iklan responsif dengan cara yang telah disetujui ini.

Contoh ukuran unit iklan yang tepat per lebar layar

Contoh ini menunjukkan cara mengubah kode iklan responsif untuk menetapkan ukuran unit iklan yang spesifik untuk tiga rentang lebar layar, yaitu, seluler, tablet, dan desktop. Tidak diperlukan pengalaman sebelumnya tentang kueri media CSS atau mengubah kode iklan AdSense untuk mengikuti contoh ini.

Berikut ini beberapa kode iklan responsif yang diubah untuk menetapkan ukuran unit iklan yang tepat per lebar layar berikut:

• Untuk lebar layar hingga 500 piksel: unit iklan 320x100.
• Untuk lebar layar antara 500 piksel dan 799 piksel: unit iklan 468x60.
• Untuk lebar layar 800 piksel dan yang lebih lebar: unit iklan 728x90.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Untuk menyesuaikan kode contoh ini di situs Anda sendiri:

1. Buat unit iklan Display di akun AdSense, dan pastikan Anda memilih opsi Responsif di bagian "Ukuran iklan". Catat informasi berikut dari kode iklan responsif Anda:
   • ID penayang, misalnya, ca-pub-1234567890123456
   • ID unit iklan (data-ad-slot), misalnya, 1234567890.
2. Pada kode contoh:
   • Ganti semua example_responsive_1 dengan nama unik, misalnya Home_Page, front_page_123, dsb.
     Catatan:

     • Nama unik hanya boleh berisi huruf dalam bahasa Inggris (A-Z), angka, serta garis bawah, dan karakter pertama harus berupa huruf dalam bahasa Inggris.
     • Anda harus menggunakan nama unik yang berbeda setiap kali Anda menyesuaikan kode contoh ini.
   • Ganti ca-pub-1234567890123456 dengan ID penayang Anda sendiri.
   • Ganti 8XXXXX1 dengan ID unit iklan Anda sendiri.
3. Tentukan ukuran yang ingin Anda gunakan di unit iklan per lebar layar:
   • Jika ukuran unit iklan yang ada di kode contoh sudah sesuai, Anda tidak perlu membuat perubahan lagi.
   • Jika Anda ingin menetapkan ukuran unit iklan per lebar layar yang berbeda, pada kode contoh:
     • Ganti 320px dan 100px dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar hingga 500 piksel.
     • Ganti 468px dan 60px dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar antara 500 piksel dan 799 piksel.
     • Ganti 728px dan 90px dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar 800 piksel dan yang lebih lebar.
4. Salin dan tempel kode iklan yang diubah ke kode sumber HTML di halaman tempat Anda ingin menampilkan iklan.
   Tips: Setelah menempatkan kode iklan, sebaiknya uji iklan di perangkat dan layar yang berbeda-beda untuk memastikan perilaku responsifnya berfungsi dengan baik.

Contoh fitur kode iklan responsif lanjutan

Jika Anda mendapati bahwa kode iklan responsif kami tidak memenuhi kebutuhan Anda, ubah kode iklan guna menentukan ukuran yang tepat untuk unit iklan Anda melalui CSS.

Catatan: Kami tidak menyarankan fitur lanjutan ini kecuali Anda yakin bisa mengubah kode iklan.

Menentukan lebar yang dapat diperluas dan tinggi tetap

Anda dapat mengubah kode iklan responsif untuk menentukan lebar yang dapat diperluas dan tinggi tetap untuk unit iklan melalui CSS. Contoh berikut menunjukkan cara melakukan modifikasi tersebut:

Contoh lebar yang dapat diperluas dengan tinggi tetap

Contoh ini menunjukkan cara mengubah kode iklan responsif untuk menentukan tinggi tetap 90 piksel dan lebar variabel dari minimum 400 piksel hingga maksimum 970 piksel:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Menentukan ukuran yang tepat per lebar layar

Anda dapat mengubah kode iklan responsif untuk menentukan ukuran yang tepat untuk unit iklan Anda melalui CSS. Contoh berikut menunjukkan cara melakukan modifikasi tersebut:

Contoh ukuran yang tepat per lebar layar

Jika Anda mengetahui ukuran unit iklan yang tepat per perangkat yang paling sesuai dengan situs responsif, Anda dapat menggunakan kueri media CSS3 untuk menetapkan ukuran unit iklan responsif Anda. Contoh berikut menunjukkan cara mengubah kode iklan Anda untuk menggunakan kueri media CSS3:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Aturan @media adalah sintaksis CSS3, dan didukung di semua browser modern. Perhatikan bahwa menetapkan ukuran unit iklan melalui CSS di lembar gaya eksternal tidak didukung secara resmi.

Menyembunyikan unit iklan

Pada kasus tertentu, khususnya pada perangkat seluler yang lebih kecil, Anda mungkin tidak ingin menampilkan iklan sama sekali. Jika ingin menyembunyikan unit iklan, Anda dapat menetapkan parameter dengan kueri media CSS sehingga permintaan iklan tidak dibuat dan iklan tidak ditampilkan. Contoh berikut menunjukkan cara melakukan modifikasi tersebut:

Contoh menyembunyikan iklan untuk ukuran layar tertentu

Jika hanya ingin menampilkan iklan untuk ukuran layar tertentu, Anda dapat menggunakan CSS untuk melakukannya. Contoh berikut menunjukkan cara mengubah kode iklan Anda untuk menggunakan kueri media CSS3 agar dapat menyembunyikan iklan pada ukuran layar tertentu:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Dalam contoh ini, tidak ada iklan yang akan ditampilkan jika lebar layar kurang dari 400 piksel.

Catatan: Saat mengubah kode iklan responsif yang telah Anda salin, Anda harus menghapus dua baris berikut:
data-ad-format="auto"
data-full-width-responsive="true"

Catatan: Meskipun Anda memiliki fleksibilitas ini, ingatlah untuk selalu mematuhi kebijakan penempatan iklan kami. Perhatikan bahwa hanya perubahan terbatas pada kode yang diizinkan oleh Kebijakan program kami.