Cara Pasang Iklan Adsense Responsive di Blog AMP

Cara pasang iklan Adsense responsive di blog AMP bisa dilakukan oleh siapa saja, termasuk bagi pemula. Hal tersebut karena selain memang sudah ada tutorial dari pihak Google sendiri, juga banyak tutorial dari para "sesepuh" Blogger yang bermurah hati untuk berbagi.

Sesepuh disini bukan berarti condong ke usia ya temans, karena kata orang bijak usia tidak bisa menjadi tolak ukur kedewasaan seseorang. Nah kan malah ngelantur hehehee...

Banyak Temans Blogger yang telah sukses dan berpengalaman tidak pelit ilmu alias suka membagikan "ilmu daging" kepada kita-kita yang pemula ini.

Termasuk juga bagi temans yang masih bingung dalam menggunakan blog AMP dan menghadapi kendala dengan pemasangan iklan Google Adsense-nya.

Memang blog valid AMP membutuhkan sedikit sentuhan khusus agar blog tetap dalam kondisi valid AMP. Tidak bisa sembarangan memasukkan kode-kode HTML yang tidak diperkenankan dalam penerapannya.

Termasuk juga saat akan memasang iklan Google Adsense di blog AMP. Ada sedikit perbedaan jika dibadingkan dengan saat memasangnya di blog non AMP. Nah bagi temans yang masih bingung silahkan melanjutkan artikel ini sampai selesai ya.

Cara Pasang Iklan Adsense Responsive di Blog AMP

Untuk menampilkan iklan Google Adsense yang responsive pada blog AMP, langkah pertama yang harus dilakukan adalah masuk ke menu edit HTML.

Setelah itu silahkan cek apakah pada template tersebut sudah memuat kode HTML seperti yang di bawah ini :

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

Jika ternyata belum ada, maka kamu bisa menambahkan dengan cara memasukkan kode tersebut tepat diatas kode &lt/head&gt.

Sudah? Sudah?
Baiklah temans...

Pada blog yang non AMP, biasanya kode HTML yang terpasang untuk unit iklan Google Adsense adalah seperti berikut ini :

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-1234567891234567"

     data-ad-slot="1234567890"

     data-ad-format="auto"

     data-full-width-responsive="true"></ins>

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>

Namun jika ini diterapkan pada blog AMP maka hasilnya nanti akan muncul kesalahan yang menyebabkan blog tidak lagi valid AMP. Lalu solusinya bagaimana?

Tenang temans, Google juga sudah menerbitkan panduan untuk kita semua bagaimana cara pasang iklan Adsense Responsive di blog AMP.

Iklan responsive maksudnya adalah unit iklan yang hanya muncul dalam tampilan mobile saja, Jadi hanya tampil ketika blog diakses menggunakan smartphone atau tablet.

Sedangkan ketika saat blog diakses melalui laptop atau komputer maka iklan tersebut tidak tayang atau tidak muncul. muncul yang ada hanya tampilan kosong saja.

Iklan Responsive Adsense di Blog AMP

Solusi agar tampilan iklan tidak berupa kotak kosong ketika blog adiakses menggunakan laptop atau komputer, kamu hanya cukup menambahkan kode tag conditional berikut ini ke dalam tema HTML blog :

<b:if cond='data:blog.isMobileRequest == "true"'> 

Jika sudah melakukannya, kini saatnya untuk membuat tampilan iklan di bagian widget yang kamu inginkan, caranya adalah sebagai berikut :

• Masuk ke dashboard blogger dan pilih menu tata letak
• Kemudian tambahkan sebuah widget baru dan pilih mode HTML
• Beri nama widget baru tersebut sesuai keinginan kamu, misalnya saja Iklan Responsive
• Selanjutnya copy kode iklan responsive AMP dibawah ini dan paste ke dalam widget yang dibuat tadi :

<amp-ad width="100vw" height=320

     type="adsense"

     data-ad-client="ca-pub-1234567891234567"

     data-ad-slot="1234567890"

     data-auto-format="rspv"

     data-full-width>

  <div overflow></div>

</amp-ad>

• Jangan lupa untuk mengganti kode data-ad-client="ca-pub-1234567891234567" dan data-ad-slot="987654321" dengan kode milik kamu sendiri ya 
• Kemudian klik simpan tema.

Langkah selanjutnya jika widget sudah terbuat, kamu masuk kembali ke menu edit HTML, caranya adalah :

• Masuk ke dashboar blogger -> tema -> edit HTML
• Kemudian cari nama widget yang dibuat tadi (Iklan Responsive), bisa dengan menggunakan CTRL+F
• Jika sudah ditemukan, selanjutnya adalah menambahkan tag conditional dibawah kode <b:includable id='main'> dan ditutup dengan kode </b:if>. Lebih jelasnya seperti gambar dibawah ini :

• Untuk mempercantik tampilan blog, kamu bisa menghapus nama widget tadi (iklan responsive)
• Terakhir adalah klik simpan tema
• Selanjutnya cek apakah iklan yang kamu buat sudah berhasil tayang atau belum.

Modifikasi Ukuran Iklan Adsense Responsive

Jika kamu menginginkan ukuran iklan yang sesuai dengan slot iklan pada blog kamu, kamu juga bisa sedikit memodifikasinya. Tenang saja, modifikasi ini sesuai dengan aturan dari Google sendiri.

Dengan sedikit modif, kamu bisa menentukan tinggi iklan yang tetap dengan lebar yang otomatis. Selain itu juga bisa dengan menentukan tinggi dan lebar secara tetap. Penasaran? Berikut ini caranya :

• Tinggi tetap

Ini adalah cara untuk membuat iklan dengan lebar variabel dan tinggi tetap, misalnya saja tinggi dibuat 100 pixel. Kamu perlu membuat kodenya menjadi seperti berikut ini :

<amp-ad

   layout="fixed-height"

   height=100

   type="adsense"

   data-ad-client="ca-pub-1234567891234567"

   data-ad-slot="1234567890">

</amp-ad>

• Tinggi dan lebar tetap

Yang kedua adalah untuk membuat iklan dengan tinggi dan lebar tetap, misalnya saja 300x250 pixel. Kamu bisa merubah kodenya menjadi seperti berikut ini :

<amp-ad

   layout="fixed"

   width=300

   height=250

   type="adsense"

   data-ad-client="ca-pub-1234567891234567"

   data-ad-slot="1234567890">

</amp-ad>

*)Catatan : ubahlah kode data-ad-client dan data-ad-slot diatas dengan kode Adsense milik kamu.

Jika kemudian iklan sudah berhasil tayang dan tidak terjadi error AMP, artinya kamu sudah berhasil memasang iklan Adsense responsive di blog AMP. Sangat mudah kan temans..?

Semoga bermanfaat ya.

Berbagi :