Update Google Adsense Tentang Sticky Ads - mungkin kalian pernah melihat salah satu iklan google adsense yang melayang ketika di scroll ke bawah, itu salah satunya iklan sticky ads. Sebenarnya sticky ads ini sudah diketahui olah banyak orang, bahkan sudah diuji coba penerapannya oleh adsense secara langsung seiring munculnya fitur auto ads. Bahkan sudah banyak para blogger yang sudah menerapkan sticky ads ini.
Bagi kalian yang menerapkan fitur auto ads pada blog atau wesbitenya, maka sticky ads akan terlihat ketika menggunakan ponsel atau smartphone. Maka munculah amp-sticky-ads yang bisa dipasang di AMP HTML. Beruntunglah bagi kalian yang bloggny sudah support amp.
Sebelumnya, google adsense memang melarang penempatan iklan melayang, fixed ads atau semacamnya. Akan tetapi semenjak adanya auto-ads, google adsense seolah membiarkan blog atau web yang menerapkan sticky ads secara manual.
Akan tetapi Upadate Google Adsense Tentang Sticky Ads kali ini mengijinkan penempatan unit iklan adsense dengan sticky ads dengan persyaratan tentunya. Syarat yang paling utama tentang Sticky ads ini yaitu unit iklan tidak boleh Overlaping atau tumpang tindih dengan konten.
Apa Itu Sticky Ads?
Seperti yang telah dijelaskan diatas, Sticky ads merupakan iklan melayang yang akan tetap terlihat di blog ketika pengguna melakukan scroll baik keatas maupun melayang. Hampir sama artinya dengan fixed ads.
Posisi iklan ini bisa diletakan di sebelah kanan atau kiri konten, di sidebar, bahkan yang paling terlihat yaitu iklan muncul melayang dibawah konten.
Sticky ads ini pada awalnya memang dikhususkan untuk para pengguna yang datang atau berkunjung ke blog melalui ponsel atau semartphone. Akan tetapi seiring diijinkannya iklan melayang ini, maka para kreator pun ingin menampilkan sticky ads kepada pengguna yang datang dari PC atau Laptop.
Maka disini saya akan membedakan antara AMP dan Non AMP. Untuk AMP belum sepenuhnya fitur sticky ads bisa digunakan, hanya bisa menampilkan iklan melayang dibawah saja, belum bisa di sidebar.
Membuat Unit Sticky Ads Adsense Di Non-AMP
Saya mendapatkan trik ini, tentu saja datang dari empunya atau pemilik template ini yaitu Kompi Ajaib. Supaya sticky ads bisa tampil di smartphone atau PC, makas silahkan gunakan trik berikut.
1. Silahkan masuk pada akun blogger
2. Kemudian pilih Tema dan pilih lagi Edit HTML
3. Simpan kode CSS dibawah sebelum kode </head>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel'>
<style>
/*<![CDATA[*/
.sticky-ad {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: visible;
position: fixed;
text-align: center;
bottom: -104px;
width: 100%;
max-width:736px;
margin-left:-368px;
left:50%
z-index: 999;
max-height: 104px;
background-image: none;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 0;
padding: 4px 4px 0;
transition: all .4s ease-in-out;
}
.sticky-ad-close-button {
position: absolute;
width: 28px;
height: 28px;
top: -28px;
right: 0;
background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-size: 13px 13px;
background-position: center;
background-color: #fff;
background-repeat: no-repeat;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
border: none;
border-radius: 12px 12px 0 0;
cursor: pointer;
}
.sticky-ad-close-button:before {
position: absolute;
content: "";
top: -20px;
right: 0;
left: -20px;
bottom: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:active,
:focus {
outline: 0
}
@media screen and (max-width:800px){.sticky-ad{margin-left:0;left:0}.sticky-ad-close-button{background-position:9px;border-radius:12px 0 0 0;}}
/*]]>*/
</style>
</b:if>
4. Kemudian Simpan, Kode diatas tidak akan tampil di halaman statis, hasil pencarian, halaman label atau halaman eror.
5. Kemudian pastekan kembali kode dibawah ini sebelum kode </body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel'>
<div class="sticky-ad" id="sticky-ad">
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- Kode iklan untuk desktop silahkan simpan di bawah ini -->
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- Kode iklan untuk mobile silahkan simpan di bawah ini -->
</b:if>
<button class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';" aria-label="Close this ad"></button>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll",function(){
var target = document.getElementById('sticky-ad');
if(window.pageYOffset > 300){
target.style.bottom = "0";
}
},false);
//]]>
</script>
</b:if>
6. Kemudian Simpan.
Angka 300 adalah untuk mengatur ketinggian unit iklan. Sama seperti kode sebelumnya, iklan ini pun tidak akan ditampilkan di halaman statis, hasil pencarian, halaman label atau halaman eror.
Maka sebaiknya pilih unit iklan degan ukuran728x90 untuk desktop dan 320x50 atau 320x100 untuk mobile.Membuat Unit Stciky Ads Adsense Pada Template Support AMP HTML
Pada dasarnya penerapan sticky ads pada AMP HTML hampir sama dengan Non-AMP, hanya berbeda kodenya saja. Silahkan ikuti panduan berikut ini.
1. Silahkan masuk pada akun blogger
2. Kemudian pilih Tema dan pilih lagi Edit HTML
3. Simpan kode dibawah sebelum kode </head>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel'>
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
</b:if>
4. Kemudian Simpan, Kode diatas tidak akan tampil di halaman statis, hasil pencarian, halaman label atau halaman eror.
5. Kemudian pastekan kembali kode dibawah ini sebelum kode </body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel'>
<amp-sticky-ad layout='nodisplay'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- Kode iklan untuk desktop silahkan simpan di bawah ini -->
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='90' type='adsense' width='728'>
</amp-ad>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- Kode iklan untuk mobile silahkan simpan di bawah ini -->
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='50' type='adsense' width='320'>
</amp-ad>
</b:if>
</amp-sticky-ad>
</b:if>
6. Kemudian Simpan.
7. Terapkan kembali kode CSS dibawah ini dibawah kode <style amp-custom>
amp-sticky-ad{max-width:736px;margin-left:-368px;left:50%}
.amp-sticky-ad-close-button{background-position:center;border-radius:12px 12px 0 0;}
@media screen and (max-width:800px){amp-sticky-ad{margin-left:0;left:0}.amp-sticky-ad-close-button{background-position:9px;border-radius:12px 0 0 0;}}
Bagi sobat yang mau mencoba penerapan sticyky pada sidebar blog, silahkan ikuti panduannya Cara Membuat Sticky Ads Pada Sidebar Blog
Kesimpulan
Dengan ijinkannya sticky ads oleh Google Adsense walaupun dengan berbagai persyaratan tentunya ini sangat disambut baik oleh para publishernya termasuk saya. Iklan Sticky Ads bisa meningkatkan CTR tentunya.
Intinya, teruslah berkreasi tapi masih pada jalurnya. Selamat mencoba.
