Cara Membuat Sticky Ads AMP WordPress Tanpa Error

Pengalaman Membuat Sticky Ads AMP

Banyak artikel yang memuat bagaimana cara membuat sticky ads, namun hanya mampu bekerja pada website yang bukan AMP. Bahkan plugin wordpress yang sudah mengklaim berhasil memiliki fitur sticky ads dan kompatible AMP, sering kali bentrok dengan plugin AMP itu sendiri. Mengapa demikian? karena AMP selalu berkembang. Sementara pengembang plugin sticky ads AMP selangkah mundur di belakang program AMP itu sendiri. Cara terbaik supaya adapat mengaplikasikan sticky ads tanpa error adalah dengan melakukan insert script secara manual. Berikut ini akan saya jelaskan bagaimana cara membuatnya tanpa error sedikit pun dengan AMP.

Langkah Membuat Sticky Ads

Daripada membaca artikel yang masih eksperimental dalam membuat sticky ads. Sebaiknya anda langsung merujuk pada pengembang AMP untuk membuat sticky. Mengapa demikian? karena mereka-lah yang membuat rancangan bagaimana cara kerja AMP itu. Sebagai referensi silahkan baca di https://amp.dev/documentation/components/amp-sticky-ad/ dan https://amp.dev/documentation/examples/components/amp-sticky-ad/ . Untuk mempermudah aplikasinya, silahkan mengikuti langkah berikut.

Membuat iklan display di laman adsense

Karena iklan sticky ads prioritas adalah untuk mobile dan tablet. Maka anda harus mempersiapkan iklan yang sesuai dengan tampilan mobile/tablet. Silahkan masuk ke laman Google Adsense, dan masuk di unit iklan. Mengapa harus membuat ini? karena pada script sticky ada dibutuhkan kode “ad-slot”. Pilih iklan display dengan ukuran tetap yaitu 320×50 atau berukuran sekitar itu, misal 300×90. Simpan dan selesaikan pembuatan iklan tersebut.

Sebagai tanda keberhasilan pembuatan iklan adalah munculnya kode iklan yang sudah anda buat. Seperti pada gambar berikut ini.

Memodifikasi tema wordpress

Langkah selanjutnya adalah memodifikasi script pada tema wordpress yang sedang aktif. Mengapa demikian? cara ini akan menghindarkan script bentrok dengan plugin AMP, sebagaimana anda mengalaminya selama memakai plugin ads wordpress. Silahkan langsung masuk ke panel wordpress website kesayangan anda. Pilih menu TAMPILAN dan submenu EDIT TEMA.

Pilih berkas tema “header.php” yang berada di tampilan sebelah kanan. Sehingga isi script “header” muncul pada tampilan utama. Selanjutnya masukkan script berikut di atas “</head>”, seperti pada gambar.

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

Berikutnya adalah memasukkan kode berikut di bawah “<body>”.

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

Setelah memasukkan dua kode tersebut, silahkan menyimpan perubahan pada tema anda. Hasil penambahan script yang anda lakukan langsung dapat terlihat hasilnya. Seperti gambar berikut.

Sticky ads akan muncul pada halaman AMP anda, baik desktop/mobile/tablet. Menampilkan iklan berukuran sesuai dengan format yang telah anda buat pada langkah pertama. Perlu perhatian, bahwa ketika iklan sesuai dengan topik halaman tidak ada, maka sticky ads tidak akan muncul. Sehingga akan ada halaman atau artikel tertentu yang tidak tampil sticky ads-nya.

Menyimpan script cadangan

Perlu ingat bahwa metode membuat sticky ads AMP yang anda lakukan menggunakan edit script langsung pada tema. Apabila anda menggunakan fitur auto update tema, maka script yang sudah anda tuliskan pada header otomatis terhapus jika terdapat pembaruan tema. Untuk menghindari hal tersebut, silahkan menyimpan konfigurasi script yang sudah anda tulis pada teks notepad atau sejenisnya. Atau dapat pula mengunjungi artikel ini jika ingin melakukan konfigurasi ulang sticky ads AMP.

Tinggalkan komentar