Namun, dengan perkembangan perangkat smartphone dengan berbagai ukuran layar serta sekarang ini Internet sudah banyak diakses melalui perangkat tersebut, iklan Google Adsense Responsif ini terkadang tidak dapat tampil secara sempurna menyesuaikan ukurannya dengan ukuran desain halaman blog, sehingga tampilan iklan malah memperburuk tampilan blog atau websit pada perangkat smartphone, seperti gambar berikut.
Untuk membuat tampilan iklan Google Adsense Responsive tampilannya terlihat sempurna sesuai dengan desain template blog atau website, berikut ini saya akan jelaskan langkah demi langkah cara mengubah ukuran iklan Google Adsense Responsif untuk situs blog atau website.
Timbul pertanyaan, Apakah melakukan midfikasi ukuran iklan google adsense melanggar TOS Google Adsense? Jawabannya tentu saja tidak, karena cara yang akan saya jelaskan pada artikel ini adalah cara yang disetujui oleh pihak Google Adsense.
Ini adalah beberapa modifikasi kode iklan Adsense yang dapat diterima atau diperbolehkan oleh pihak Google Adsense :
- Desain Responsif
- Pengujian A/B
- Menetapkan Saluran Khusus Secara Dinamis
- Minimisasi Tag Iklan
Dan ini menyangkut unit iklan responsive dan minimasi tag iklan dengan modifikasi dengan media CSS. Meskipun Google Adsense sendiri sudah memberikan CSS media default untuk unit iklan responsive, tetapi hanya untuk iklan dengan dimensi 728px x 90px saja. Masalah ini akan muncul ketika menampilkan ukuran 620px x 90px diperangkat desktop, maka ketika tampil dilayar mobile iklan akan terlihat nampak terpotong tidak menyesuaikan lebar halaman.
Intinya disini kita akan membuat iklan adsense menjadi responsive sesuai dengan halaman dan layar pengguna.
Sebelum ke langkah memodifikasi ukuran iklan, ada baiknya terlebih dahulu mengetahui mana iklan Google Adnses Responsif yang saya maksud dan bagaimana mengambil kode iklannya, untuk kita modifikasi ukurannya kemudian dipasang pada halaman blog atau website.
Pertama tentunya anda harus login ke akun Google Adsense milik anda. Pada menu sidebar sebelah kiri pilih menu Iklan. Alihkan pandangan anda ke area sebelah kanan, pilih tab Menurut unit iklan seperti gambar di bawah ini.
Selanjutnya, silahkan pilih dan klik Iklan Display seperti gambar di bawah ini.
Anda akan disuguhkan sebuah tampilan untuk Memberikan nama iklan, menentukan ukuran iklan dan pratinjau tampilan iklan seperti gambar di bawah ini. Berikan nama iklan sesuai keinginan anda (nama iklan harus unik agar berbeda dengan nama iklan lainnya yang pernah anda buat sebelumnya, boleh berisi huruf dalam bahasa Inggris (A-Z), angka, serta setrip garis, dan karakter pertama harus berupa huruf dalam bahasa Inggris) Contoh : front_page_12. Pada bagian ukuran iklan pilih Responsif.
Jika sudah dirasa cukup, silahkan klik tombol Buat dan anda akan dibawa ke halaman kode iklan, seperti gambar berikut.
Simpan kode tersebut ke notepad sebagai bahan untuk memodifikasi iklan nanti. Nah langkah selanjutnya adalah memodifikasi iklan
Memodifikasi Ukuran Iklan Google Adsense Responsif
Di bawah 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 atau keahlian 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.
Sehingga kode medianya akan seperti berikut
<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"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Penjelasan :
1. Ketikkan .example_responsive_1, silahkan anda ganti dengan nama iklan Google Adsense Responsif milik anda.
2. Ketikkan ca-pub-XXXXXXX11XXX9, silahkan anda ganti dengan ad-client iklan GA anda, dan ketikkan 8XXXXX1 dengan ad-slot iklan GA anda.
Catatan :
Jika puas dengan ukuran unit iklan yang ada di kode contoh, Anda tidak perlu membuat perubahan pada nilai ukurannya lagi.
Tetapi 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.
Silahkan anda ganti ukuran width dan height sesuai dengan ukuran yang anda inginkan. Sebagai contoh berikut ini kode iklan asli dan kode iklan yang sudah dimodifikasi milik saya yang terletak diheader yang ukurannya sesuai lebar template blog saya.
Kode iklan Asli
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- harmansh_front_page -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Kode Iklan hasil modifikasi yang sudah disesuaikan ukurannya
<style>
.harmansh_front_page { width: 320px; height: 180px; }
@media(min-width: 500px) { .harmansh_front_page { width: 468px; height: 60px; } }
@media(min-width: 800px) { .harmansh_front_page { width: 719px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- harmansh_front_page -->
<ins class="adsbygoogle harmansh_front_page"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Apabila anda ingin memasangnya pada plugin anda bisa melakukan copy paste kode iklan yang sudah jadi ke plugin blog atau website anda. Namun apabila anda ingin meletakkan kode iklan terebut ke dalam postingan, anda harus memparsenya terlebih dahulu sebelum diletakkan ke dalam postingan blog.
Dengan mengubah ukuran iklan agar sesuai dengan lebar tinggi pada slot template blog atau website, maka tampilan iklan Google Adsense Responsif akan terlihat rapi dan porfesional ketika blog atau website yang anda miliki diakses melalui perangkat mobile atau smartphone, seperti gambar berikut.
Demikian tutorial sederhana mengenai bagaimana cara mengubah ukuran iklan Google Adsense Responsif agar sesuai dengan ukuran template atau halaman blog atau website. Semoga bermanfaat and Happy Blogging
Related Posts :
Silahkan
klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG
0 komentar:
Post a Comment
...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......