Display Adsense - Setiap publisher pasti ingin iklan yg diterapkannya di blog itu responsif dengan berbagai perangkat dengan mengubah kode iklan dan yg pastinya tidak melanggar kebijakan program adsense. Disini kita akan mencoba menggunakan parameter tag iklan responsif untuk mengubah perilaku unit iklan Display responsif.
Contohnya, untuk menentukan bentuk umum yang harus sesuai dengan unit iklan, menggunakan parameter tag iklan responsif, biasanya dengan mengubah kode iklan responsif. Seperti dengan mengubah nilai parameter data-ad-format dari "auto" menjadi "rectangle" , tapi berbeda dengan kode iklan responsif lanjutan yg tidak perlu membuat perubahan pada kode atau menggunakan kueri media CSS.
Di bawah ini adalah perubahan kode iklan responsif yg tidak melanggar kebijakan program adsense :
1. Mengubah Kode Iklan Menggunakan Parameter Tag
Menetapkan Iklan Bentuk Umum (Khusus Desktop)
Dengan mengubah kode iklan untuk menentukan bentuk umum seperti (horizontal, vertikal, dan/atau persegi panjang). Contoh kode iklan di bawah ini adalah kode iklan responsif untuk menentukan bentuk horizontal umum unit iklan.
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="horizontal"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>Secara default, kode iklan responsif menyertakan tag data-ad-format dengan nilai "auto" yang memungkinkan perilaku pengukuran otomatis untuk unit iklan responsif. Tapi dengan menetapkan bentuk umum untuk unit iklan responsif dengan mengubah nilai data-ad-format menjadi salah satu nilai berikut: "rectangle", "vertical", "horizontal" atau kombinasi dari nilai tersebut yang dipisahkan oleh tanda koma, misalnya, "rectangle, horizontal".
Menetapkan Iklan Responsif Lebar Maksimal (Perangkat Seluler)
Parameter data-full-width-responsive akan menentukan apakah unit iklan responsif diperluas untuk memanfaatkan lebar maksimal pada layar perangkat seluler pengunjung blog. Bergantung pada cara penggunaan parameter data-full-width-responsive, dapat membuat unit iklan responsif berfungsi dengan cara yang berbeda.
data-full-width-responsive="true"
Untuk menetapkan parameter data-full-width-responsive ke "true". Kalau, unit iklan responsif akan lebih sering diperluas hingga lebar maksimal layar pengguna di perangkat seluler. Setelan ini memiliki potensi maksimum untuk peningkatan pendapatan adsense.
Contoh di bawah ini menunjukkan cara memodifikasi kode iklan responsif untuk mengaktifkan iklan responsif dengan lebar maksimal :
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>data-full-width-responsive="false"
Jika tidak ingin unit iklan responsif diperluas secara otomatis untuk memanfaatkan lebar maksimal layar pengguna di perangkat seluler, kita dapat menetapkan parameter data-full-width-responsive ke "false". Tapi dengan menetapkan cara tersebut dapat mengurangi potensi penghasilan. Eksperimen kami menunjukkan bahwa iklan responsif dengan lebar maksimal berperforma lebih baik di perangkat seluler dalam mode potret.
Contoh di bawah ini menunjukkan cara memodifikasi kode iklan responsif untuk menonaktifkan iklan responsif lebar maksimal :
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"
data-full-width-responsive="false"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>Tanpa Parameter data-full-width-responsive
Pada beberapa situasi, parameter data-full-width-responsive tidak ada dalam kode iklan,, unit iklan responsif tetap akan diperluas agar dapat memanfaatkan lebar maksimal layar pengguna di perangkat seluler. Namun, hal ini tidak akan dilakukan sesering jika parameter ada dan ditetapkan ke "true".
2. Mengubah Kode Iklan Menggunakan Kueri CSS
Ukuran Unit Iklan Tepat Perlebar Layar
Jika baru mengenal kueri media CSS, sebaiknya mulai dengan Contoh ukuran unit iklan yang tepat per lebar layar, yaitu dengan mengubah kode iklan responsif untuk menetapkan ukuran unit iklan yang spesifik untuk tiga rentang lebar layar, yaitu, seluler, tablet, dan desktop.
Di bawah ini beberapa kode iklan responsif yang diubah untuk menetapkan ukuran unit iklan yang tepat per lebar layar :
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"></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>Untuk menerapkan kode iklan di atas pada blog , ikuti keterangan di bawah ini :
- Buat unit iklan display, untuk "Ukuran Iklan" pilih opsi Responsif.
- Ganti semua example_responsive_1 dengan nama unik, misalnya Home_Page, front_page_123, dsb.
- Ganti ca-pub-XXXXXXX11XXX9 dengan ID penayang, ganti 8XXXXX1 dengan ID unit iklan.
- Copy-paste kode iklan yang diubah ke halaman blog yg ingin ditampilkan iklan.
Ganti 320px dan 100px dengan lebar dan tinggi unit iklan yang ingin digunakan untuk lebar layar hingga 500 piksel.Ganti 468px dan 60px dengan lebar dan tinggi unit iklan yang ingin digunakan untuk lebar layar antara 500 piksel dan 799 piksel.Ganti 728px dan 90px dengan lebar dan tinggi unit iklan yang ingin digunakan untuk lebar layar 800 piksel dan yang lebih lebar.
Di bawah ini adalah cara mengubah kode iklan untuk menentukan ukuran yang tepat dengan lebar yang dapat diperluas dan tinggi tetap untuk unit iklan melalui CSS. Contoh lebar yang dapat diperluas dengan tinggi tetap , dengan tinggi tetap 90 piksel dan lebar variabel dari minimum 400 piksel hingga maksimum 970 piksel
Ukuran Tepat, Lebar Diperluas, Tinggi Tetap
<ins class="adsbygoogle"
style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>Ukuran Tepat, Perlebar Layar
<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:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>Menyembunyikan Unit Iklan Pada Layar Tertentu
Jika ingin hanya menampilkan iklan untuk ukuran layar tertentu, dapat menggunakan CSS untuk melakukannya. Contoh berikut menunjukkan cara memodifikasi kode iklan untuk menggunakan kueri media CSS3 untuk menyembunyikan ukuran layar tertentu.
<style type="text/css">
.adslot_1 { display:inline-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-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>Itulah tadi tutorial LENGKAP! Cara Mengubah Kode Iklan Display Adsense Responsif yg bisa dicoba satu-persatu di blog sesuai keinginan.
0 comments:
Posting Komentar
Katakan Unek-unek mu