Oktober 21, 2018

WordPress : Memasang AdSense Dalam Tulisan di Google AMP

Dalam tulisan ini saya hendak berbagi petunjuk bagaimana cara memasang AdSense dalam tulisan di Google AMP WordPress, yang menjadi salah satu pendorong utama kenapa kemudian saya memasang AMP Plugin di situsweb utama Aroengbinang. Secara penempatan, tampaknya memang paling ideal untuk memasang satu iklan AdSense di header, satu di dalam tulisan, dan satu lagi tepat setelah tulisan.

Pengalaman menunjukkan bahwa menempatkan iklan di widget tak pernah memberi hasil memuaskan, setidaknya itu yang saya alami. Namun entah mengapa masih banyak pemilik situsweb yang menempatkan iklan di sana. Apalagi situsweb yang theme versi mobile-nya tidak menampakkan widget namun menu seperti theme yang saya pakai, yang membuat penempatan iklan di widget menjadi tak lagi menarik untuk dilakukan.

Setelah beberapa bulan lalu gagal melakukan pencarian untuk mendapat petunjuk bagaimana memasang Google AdSense dalam tulisan di AMP WordPress, misalnya setelah paragraf pertama atau kedua, beruntung beberapa waktu lalu ketika mencoba mencari lagi akhirnya bisa menemukan petunjuk. Meski theme AMP (Accelerated Mobile Pages) yang digunakan berbeda, namun script yang dibuat ternyata berhasil bekerja sesuai harapan.

Bagi yang membutuhkan petunjuk bagaimana memasang AdSense di dalam tulisan Aaccelerated Mobile Pages di WordPress, dan menggunakan AMP Plugin, ikuti langkah sebagai berikut ini.

  1. Login cPanel -> File Manager > wp-content > plugins > amp > templates
  2. Buka single.php dan cari kode berikut ini
    <?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>
  3. Ganti kode itu dengan kode berikut ini untuk menampilkan AdSense setelah paragraf ke-2 tulisan

    <?php
    $content = $this->get( 'post_amp_content' );
    $contents = explode("</p>", $content);
    $p_number = 1;
    foreach($contents as $content){
    echo $content;
    if($p_number == '2'){
    echo' <amp-ad class="amp-ad-1" type="adsense" width=300 height=250 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></amp-ad>'; }
    echo '</p>'; $p_number++;
    } ?>

    Ganti data pada data-ad-client dan data-ad-slot dengan akun AdSense Anda. Simpan.
  4. Untuk menampilkan AdSense setelah paragraf ke-3 AMP, ganti if($p_number == '2') dengan if($p_number == '3'). Anda bisa mengganti angkanya sesuai keinginan.
  5. Jangan lupa untuk memasang kode di bawah ini sebelum </head>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Selanjutnya buka style.php dan sisipkan css berikut ini. Anda bisa menambahkan atau mengganti parameter css-nya sesuai keperluan dan selera.
.amp-ad-1 {margin-top:15px}
Label: AdSense, AMP, Inspirasi, Tutorial, WordPress
Bagikan ke: WhatsApp, Email. Print!.

aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.