Cara Membuat Iklan Anchor Pada Astra Theme

Pada tutorial kali ini, Saya ingin menuliskan tentang cara membuat iklan anchor pada Astra di WordPress menggunakan plugin ad inserter free.

Iklan anchor adalah iklan yang menempel pada tepi layar pengguna biasanya menempel diatas atau dibawah layar perangkat pengunjung situs.

Jika Kamu menggunakan Google Adsense, Kamu memiliki pilihan untuk mengaktifkan iklan anchor secara otomatis untuk tampilan mobile dan desktop.

anchor-ads-google-adsense
Anchor Ads otomatis Adsense

Tapi menurut Saya, ukuran dan tampilan dari anchor ads yang ditampilkan secara otomatis tersebut kurang bagus untuk pengalaman pengunjung.

Oleh karena itu Saya coba kustom code anchor ads sendiri untuk dipasang pada situs yang menggunakan template astra ini. Yasudah langsung aja yuk kita membuat iklan anchor pada astra theme.

Baca juga:  Pemulihan Pemblokiran Iklan Google Adsense

Cara Membuat Iklan Anchor Pada Astra Theme

Iklan anchor adalah salah satu iklan yang memiliki performa pendapatan yang tinggi. Sangat disarankan untuk memasang iklan jenis ini pada situs untuk meningkatkan earning.

1. Install Plugin Ads Inserter

Hal pertama yang Kita lakukan adalah menginstal dan aktifkan plugin Ad Inserter, saya anggap Kamu sudah bisa dengan mudah melakukan penginstalan secara umum.

plugin ads inserter 1
Plugin Ad Inserter

Setelah plugin aktif, Kamu bisa masuk ke menu Pengaturan - Ad Inserter untuk menambahkan jenis iklan sesuai dengan aturan situs Kamu.

2. Buat Unit Iklan Baru Adsense

Kamu bisa masuk ke dasbor Google Adsense untuk membuat unit Iklan Display baru untuk mendapat kode yang bisa dipakai untuk memantau performa iklan ini.

Unit iklan baru tersebut akan menghasilkan kode skrip seperti dibawah ini.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ramitan -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:100px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Disarankan untuk membuat unit iklan baru daripada memakai unit iklan lama, agar Kamu bisa memantau performa dari unit iklan ini.

Baca juga:  Menghilangkan Background Pada Iklan Google Adsense

3. Tambahkan Iklan Pada Situs

Setelah mendapat kode skrip diatas, maka Kamu bisa membuka dasbor WordPress dan masuk kemenu Pengaturan – Ad Inserter

Jangan langsung memasukkan skrip yang didapat dari unit iklan yang baru kita buat diatas. Kamu harus melakukan perubahan sedikit pada kode unit iklan tersebut. Kamu bisa menggunakan contoh skrip dibawah ini:

<style>
.anchorbaru { width: 320px; height: 100px; }
@media(min-width: 500px) { .anchorbaru { width: 468px; height: 60px; } }
@media(min-width: 800px) { .anchorbaru { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-999999999999999999"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle anchorbaru"
     style="display:block"
     data-ad-client="ca-pub-9999999999999999"
     data-ad-slot="11111111111"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Lakukan perubahan pada angka diatas pada bagian angka yang Saya bold sesuai dengan Adsense dan unit iklan yang baru Kamu buat. Setelah diedit Kamu bisa kopi kode tersebut dan isi pada Ad Inserter:

Baca juga:  Meningkatkan Pendapatan Google Adsense Dengan Ezoic
tambah iklan ad inserter 1

Setelah itu lakukan pengaturan menu dibawahnya sesuai dengan gambar dibawah ini:

custom iklan anchor 1
Pengaturan Lanjutan
  1. Bagian ini adalah laman dimana Kamu ingin menampilkan iklan anchor tersebut, disarankan untuk ceklis semua tempat.
  2. Pemilihan insertion wajib dibagian Footer.
  3. Pilih Custom CSS sebagai alignment.
  4. Isi bagian ini dengan kode ini position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);width: fit-content;height: fit-content;
  5. Klik Save Settings untuk menyimpan.

Hasil Iklan

Berikut tampilan iklan anchor yang muncul pada perangkat desktop atau laptop pengunjung.

hasil anchor desktop
Hasil iklan anchor desktop

Dan berikut ini tampilan contoh iklan anchor yang muncul pada perangkat mobile.

hasil anchor mobile 1

Sangat disarankan untuk menggunakan jenis iklan anchor ini, semoga membantu. Selesai, capek juga ngetik artikel ini haha.

Tinggalkan Komentar

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