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.
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:
- 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.
- 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.
- Ganti semua
- 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
dan100px
dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar hingga 500 piksel. - Ganti
468px
dan60px
dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar antara 500 piksel dan 799 piksel. - Ganti
728px
dan90px
dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar 800 piksel dan yang lebih lebar.
- Ganti
- 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.
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:
<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:
<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>
@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:
<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.
data-ad-format="auto"
data-full-width-responsive="true"