Ditulis oleh: Ditulis pada: 3/18/2017
Salah satu cara untuk mengoptimalkan pendapatan iklan Adsense di perangkat mobile adalah dengan memasang unit iklan page-level Adsense. Salah satu fitur iklan page-level ini yaitu akan menampilkan iklan mobile sticky di bawah layar device dengan tombol close.
Namun pemasangan iklan page-level ini menggunakan javascript sehingga unit iklan ini tidak mungkin dipasang di blog AMP. Sementara Google sendiri belum memberikan opsi lain untuk pemasangan unit iklan page-level ini untuk AMP HTML.
Namun saya menemukan solusi sementara unit iklan page-level Adsense untuk blog AMP. Berdasarkan petunjuk Google untuk sticky ads, saya mendapatkan ide bahwa ini (sticky ads) bisa jadi solusi iklan page-level yang saat ini belum disediakan oleh Google untuk AMP HTML. Penampakannya yang muncul sticky di bawah layar setelah layar digulung ke bawah inilah yang mirip dengan iklan page-level.
Tentunya sticky ads ini tidak melanggar TOS Adsense karena Google sendiri yang memberikan anjuran ini dengan catatan penempatannya yang benar.
Untuk demo, coba akses halaman ini dengan mobile device Anda, atau bisa dilihat di animasi gif di bawah ini.
Jika Anda ingin mencobanya juga, silahkan ikuti langkahnya di bawah ini.
Silahkan simpan kode ini di atas kode </head>
<b:if cond='data:blog.pageType != "static_page" and data:blog.isMobileRequest == "true" and data:blog.pageType != "error_page" and not data:blog.searchQuery'>
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
</b:if>
Kode di atas tidak ditampilkan di static page, ditampilkan di mobile (tidak ditampilkan di desktop), tidak ditampilkan di halaman pencarian, dan tidak ditampilkan di halaman error blog. Karena ini juga akan menampilkan iklan Adsense, maka pastikan juga untuk JS amp-ad sudah terpasang.
Kemudian silahkan buat unit iklan Adsense mobile 320x50 dan catat kode data-ad-client dan data-ad-slot, lalu silahkan simpan kode ini di atas kode </body>
<b:if cond='data:blog.pageType != "static_page" and data:blog.isMobileRequest == "true" and data:blog.pageType != "error_page" and not data:blog.searchQuery'>
<amp-sticky-ad layout='nodisplay'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='50' type='adsense' width='320'>
</amp-ad>
</amp-sticky-ad>
</b:if>
Silahkan ganti kode data-ad-client dan data-ad-slot sesuai dengan kode iklan Anda.
Jika ingin muncul di desktop maupun mobile, maka gunakan kode berikut:
Untuk JS amp-sticky-ad:
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and data:view.url == data:view.url params { amp: "1" }'>
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
</b:if>Untuk kode HTML:
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and data:blog.isMobileRequest == "false" and data:view.url == data:view.url params { amp: "1" }'>
<amp-sticky-ad layout='nodisplay'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='90' type='adsense' width='728'>
</amp-ad>
</amp-sticky-ad>
</b:if>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and data:blog.isMobileRequest == "true" and data:view.url == data:view.url params { amp: "1" }'>
<amp-sticky-ad layout='nodisplay'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='50' type='adsense' width='320'>
</amp-ad>
</amp-sticky-ad>
</b:if>Di sini kita membuat 2 unit iklan Adsense yaitu mobile 320x50 dan 728x90.
Sekarang silahkan coba akses blog Anda dengan hp Anda, iklan akan muncul setelah Anda menggulung halaman ke bawah.