Cara Pasang dan Kustomisasi Iklan AdSense Sticky pada blogger AMP
Tutorial lengkap Cara Pasang dan Kustomisasi Iklan AdSense Sticky pada blogger AMP
Iklan Sticky / Melayang di bagian bawah tampilan blog dianggap menjadi salah satu placement iklan paling efektif dan menghasilkan banyak klik. Bagi para blogger seperti saya, tentunya adanya fitur ini sangat membantu meningkatkan klik iklan pada blog saya.Meskipun pada dasarnya jenis iklan ini diperbolehkan oleh Google AdSense, namun tetap ada batasan atau ketentuan dari AdSense. Contohnya, iklan sticky ini tidak boleh menutupi layar atau tampilan website lebih dari 15%.
Jadi disarankan, iklan tersebut memiliki height atau tinggi 90px saja untuk tampilan desktop, dan maksimal 100px untuk tampilan mobile.
Lalu, bagamana cara memasang iklan sticky adsense ini? Tentunya anda harus menyediakan kode CSS khusus dan input pada website anda agar iklan sticky bisa tampil.
Tapi, untuk anda yang menggunakan halaman blogger valid AMP HTML, tidak perlu menggunakan kode CSS khusus untuk memasang iklan sticky ad ini.
Cukup implementasi amp-sticky-ad saja, dan iklan sticky akan tampil pada blog AMP. Namun tidak menutup kemungkinan untuk kamu bisa kostumisasinya dengan CSS.
Berikut ini saya jelaskan cara memasang Iklan Sticky Adsense di blog AMP dengan menggunakan
<amp-sticky-ad> .Sebelum memulai langkah memasang, pastikan anda sudah membuat unit iklan AdSense banner berukuran 320X100 atau 320x50 di dashboard Google AdSense anda. Lalu copy kode unit iklan yang anda buat tersebut.
Setelah itu, hal yang pertama anda lakukan adalah memasang javascript AMP sticky ad berikut sebelum kode </head>
Lalu cari kode </body> , dan tempelkan tepat diatasnya:
<b:if cond='data:blog.pageType != "static_page" and data:blog.isMobileRequest == "true" and data:blog.pageType != "error_page"'> <amp-sticky-ad layout='nodisplay'> <amp-ad data-ad-client='ca-pub-4026188032600094' data-ad-slot='9962051559' data-auto-format='rspv' data-full-width='true' height='320' type='adsense' width='100vw'> <div overflow='true'/> </amp-ad> </amp-sticky-ad> </b:if>Note:
Pastikan anda sudah mengganti
data-ad-client dengan publisher AdSense anda, dan data-ad-slot dengan unit iklan sticky yang sudah anda buat sebelumnya.Nah, untuk anda yang ingin kostumisasi class amp-sticky-ad tersebut, boleh saja. Tinggal anda gunakan dan kostumisasi #amp-sticky-ad di
<style amp-custom='amp-custom'>. Kalau saya sendiri, memilih aman dan hanya kostumisasi button close-nya saja. Berikut CSS yang saya gunakan.
/* Amp sticky Close Button */ .amp-sticky-ad-close-button{position:absolute;visibility:hidden;width:28px;height:28px;top:-28px;margin:auto;right:0;background-image:url(https://image.flaticon.com/icons/png/128/109/109702.png);background-size:13px 13px;background-position:9px center;background-color:transparent;background-repeat:no-repeat;box-shadow:0 0 5px 0 rgba(0,0,0,.2);border:none;border-radius:10px}Perlu diingat kembali bahwa, tutorial ini hanya akan membuat iklan amp-sticky-ad anda tampil jika visitor anda membuka blog via smartphone saja.
Semoga bermanfaat