Cara Membuat Iklan Sticky Ads di WordPress AMP dan non-AMP

  • Bagikan
Cara Membuat Iklan Sticky Ads di Wordpress AMP dan non-AMP
Sticky Ads

HITAM PUTIH – Cara Membuat Iklan Sticky Ads di WordPress AMP –  Sticky Ads adalah sebuah unit iklan yang muncul dibawah layar ponsel yang akan melayang jika kita scrool sebuah website kebawah melalui ponsel kita.

Jadi iklan Sticky Ads bisa dikatakan Mengambang atau bahasa kerennya (Floating), yang muncul di bawah (Bottom).

Memasang Iklan Sticky Ads menurut saya lebih aman daripada memasang Pop Up Ads yang bisa menyebabkan banned adsense.

Merujuk pada aturan terbaru tentang penempatan iklan AdSense, sekarang diperbolehkan memasang Sticky Ads pada side bar, header, dan footer. Sedangkan untuk tampilan mobile sebaiknya pasang di footer saja supaya pengalaman pengguna atau user experience dapat.

Khusus pengguna AMP WordPress ayo pasang Sticky Ads mumpung lagi diperbolehkan oleh Google.

Untuk Sticky Ads juga tanpa menggunakan plugin. Script iklan langsung dipasang pada header-amp.php melalui Theme Editor WordPress. Berikut ini adalah script untuk menampilkan Sticky Ads pada AMP WordPress.

BACA JUGA :  Berita Online di Banten, Media Online Banten Terpercaya

Scrip 1, letakkan di bawah kode <head>

<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

Scrip 2, letakkan di bawah kode </head> atau sebelum <body>

<amp-sticky-ad layout="nodisplay">
<amp-ad data-ad-client="ca-pub-xxxxxxx" data-ad-slot="xxxxxx" height="50" type="adsense" width="320">
</amp-ad>
</amp-sticky-ad>

Yang diberi tanda xxx pada ca-pub dan data-ad-slot silahkan sesuaikan dengan akun Google AdSense Anda, khusus untuk data-ad-slot ambil dari unit iklan responsive supaya Sticky Ads yang tampil lebarnya menyesuaikan ukuran layar mobile.

Memasang Sticky Ads Google AdSense di AMP WordPress

1. Login ke dashboard WordPress kemudian masuk menu Appearance > Theme Editor
2. Setelah halaman Edit Theme terbuka perhatikan bagian sebelah kanan atau side Theme Files, cari header-amp.php kemudian klik
3. Cari tulisan head kemudian letakkan Scrip 1 di atasnya dan taruh Script 2 di bawah head, kalau sudah terpasang semuanya seperti ini

4. Simpan dengan mengeklik Update File.

Sticky Ads yang telah Anda pasang di AMP WordPress tidak selamanya tampil karena nunggu para pengiklan untuk menampilkannya. Makanya jangan heran kalau terkadang tidak muncul, namun ketika blog Anda dibuka oleh orang lain Sticky Ads bisa muncul juga.

BACA JUGA :  Dua Cara Mudah Upload ads txt Adsense

Intinya semakin bagus konten yang ditulis dan ramai dibaca oleh pengunjung maka kesempatan untuk tampil Sticky Ads tinggi sehingga dapat mengoptimalkan pendapatan dari Google AdSense.

Memasang Sticky Ads AdSense Non AMP

Cara Memasang Sticky Ads Pastikan Anda sudah memiliki website atau blog yang menggunakan WordPress dan mendapatkan full akses kedalam blog.

Langkah pertama, silahkan tambahkan CSS di bawah ini kedalam tema WordPress dengan cara, klik Tampilan » Sesuaikan » CSS Tambahan.

 

.sticky-ad {
    display: none;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    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-top: 4px;
    transition: all .4s ease-in-out;
}

@media only screen and (max-width: 480px) {
.sticky-ad{
    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;
   }
}

.sticky-ad-close-button {
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  right: 0;
  background-image: url("xxxxxxx/wp-content/uploads/2021/04/close.jpg");
  background-size: 13px 13px;
  background-position: 9px;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 12px 0 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
}

Langkah Ketiga, Salin kode dibawah ini dan ganti dengan ca-pub-xxxx dengan milik Anda. Kemudian tempelkan kode dibawah ini pada file footer.php pada tema WordPress yang digunakan.

BACA JUGA :  Cara Hapus Javascript yang Tidak Digunakan - PageSpeed Insights

<div class=’sticky-ad’ id=’sticky-ad’>
<!– Kode Adsense Mobile –>
<ins class=”adsbygoogle” style=”display:inline-block;width:320px;height:50px” data-ad-client=”ca-pub-xxxxxxxxxxxxxxxxxxx” data-ad-slot=”xxxxxxxxxx”></ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
<!– Kode Adsense Mobile –>
<button aria-label=’Close this ad’ class=’sticky-ad-close-button’ onclick=’document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;’/> </div>

Silahkan lalukan penyesuaian untuk menggunakan kode tersebut. Tiap tema sedikit agak berbeda satu sama lainnya.

  • Bagikan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *