Pasang iklan Adsense di Blog Valid AMP

Hai sobat Supervba! khususnya kamu yang sudah jadi penayang iklan Adsense. Saya ingin melanjutkan ulasan sebelumnya mengenai Blog AMP. Sebelumnya saya sudah membagikan cara menampilkan Blog AMP yang hanya valid AMP di versi mobile (Non Full AMP). Selanjutnya ulasan mengenai cara pasang iklan adsense di Blog AMP termasuk Blog AMP yang tidak Full AMP seperti yang sudah saya ulas pada postingan sebelumnya.

Sebelum melanjutkan bagaimana cara pasang iklan adsense di Blog AMP yang cuma valid AMP di versi mobile, saya akan mengulas beberapa cara pasang iklan adsense di Blog AMP secara umum.

Pasang iklan Adsense di Blog Valid AMP

Untuk kamu para penayang Adsense tentu tidak mau kehilangan pendapatan. Setelah template AMP selesai dipasang selanjutnya menempatkan kode iklan adsense. Namun ada perbedaan iklan adsense di blog yang pakai template AMP dengan tidak. Pada blog AMP beberapa jenis iklan adsense tidak bisa diterapkan dengan baik. Jenis iklan tersebut adalah infeed ads, inarticle ads, dan matched content ads. Saya pernah coba menempatkan kode iklan infeed ads di postingan blog tapi sayangnya tidak berhasil. Iklan infeed ads berubah menjadi iklan biasa (gambar dan teks).

Apakah ada cara pasang iklan infeed ads, article ads, dan matched content yang invalid AMP di blog AMP?. Jawabannya, ada. Pembahasannya ada di ulasan lebih bawah postingan ini.

Pada blog AMP kamu hanya bisa memasang iklan adsense secara manual. Iklan adsense bisa di tempatkan di atas judul, bawah judul, bawah artikel, dan sidebar melalui edit HTML. Sedangkan untuk iklan adsense dalam postingan, kamu harus masuk ke editor postingan dan meletakkannya pada posisi yang kamu inginkan lewat mode HTML bukan Compose.

Cara pasang iklan adsense di Blog AMP secara umum

1. Pastikan kode berikut ada di atas kode </head>. Jika belum ada silahkan ditambahkan bersama kode js lainnya.

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

2. Penempatan Kode Iklan Adsense

Iklan Adsense di blog AMP hanya menggunakan iklan jenis responsive. Iklan responsive dapat dimodifikasi menjadi iklan ukuran tertentu dengan menetapkan ukuran lebar dan tinggi iklan.

Format iklan adsense responsive yang direkomendasikan oleh Adsense

Contoh unit iklan sesuai format rekomendasi Adsense:

<amp-ad width="100vw" height=320
     type="adsense"
     data-ad-client="ca-pub-1234567890123456"

     data-ad-slot="0123456789"

     data-auto-format="rspv"
     data-full-width>
  <div overflow></div>
</amp-ad>

Jika kode iklan di atas langsung diterapkan di HTML template maka akan terjadi kesalahan. Nah perbaikan kode iklannya menjadi berikut.

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' data-auto-format='rspv' data-full-width='' height='300' type='adsense' width='250vw'>

  <div overflow=''/>
</amp-ad>

Supaya iklan makin responsive dapat ditambahkan kode media='(max-width: 700px)' misalnya. Maka kode iklan menjadi:

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' data-auto-format='rspv' data-full-width='' height='300' media='(max-width: 700px)' type='adsense' width='250vw'>

  <div overflow=''/>
</amp-ad>

Catatan: Penerapan kode iklan sebaiknya menggunakan tanda petik satu (') seperti contoh di atas.

Iklan adsense responsive dengan tinggi tetap

Contoh 1

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='100' layout='fixed-height' type='adsense'>
</amp-ad>

Jenis iklan yang muncul dengan format (height='100') di atas adalah:

• Iklan teks dan gambar ukuran 728 x 90
• Iklan link/tautan dengan ukuran 2 x 2 (4 unit tautan)

Contoh 2

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='250' layout='fixed-height' type='adsense'>
</amp-ad>

Jenis iklan yang muncul dengan format (height='250') di atas adalah:

• Iklan teks dan gambar ukuran 300 x 250
• Iklan teks dan gambar ukuran 600 x 300
• Iklan link/tautan dengan ukuran 5 x 2 (10 unit tautan)

Iklan adsense responsive dengan ukuran tetap

Contoh 1

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='250' layout='responsive' type='adsense' width='300'>
</amp-ad>

Kamu tinggal ganti ukuran height dan width dengan ukuran yang kamu inginkan misalnya 728x90, 300x600, 160x600, 336x280, 320x100, dan lainnya.

Catatan

• ganti ca-pub-1234567890123456 dengan kode penayang.
• ganti 0123456789 dengan nomor slot iklan.

Pasang iklan infeed ads, inarticle ads, dan Matched content di blog AMP

Di blog AMP yang tidak full AMP kamu bisa pasang iklan infeed ads, inarticle ads, dan matched content. Prosesnya dilakukan dengan menggunakan tag kondisional untuk memisahkan js ad versi desktop dan mobile.



1. Hapus kode amp-ad berikut.

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

2. Cari kode berikut lewat edit HTML template AMP.

&lt;/head&gt;&lt;!--<head/>--&gt;

Simpan kode berikut di atasnya.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>
</b:if>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-0123456789",
          enable_page_level_ads: true
     });
//]]>
</script>
</b:if>

2. Ganti slot iklan amp kamu dengan format berikut.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- iklan_desktop -->

Kode iklan adsense versi desktop

</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!-- iklan_AMP -->

Kode iklan adsense versi mobile/AMP

</b:if>

Contoh:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- ads_desktop -->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890123456' data-ad-format='link' data-ad-slot='01234567890' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!-- ads_AMP -->
<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='100' layout='fixed-height' type='adsense'> </amp-ad>
</b:if>

Tambahan:

Untuk iklan AMP kamu juga bisa pakai format berikut buat menyesuaikan tampilan blog AMP dengan layar perangkat mobile.

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' data-auto-format='rspv' data-full-width='' height='300' media='(max-width: 736px)' type='adsense' width='250vw'>
  <div overflow=''/>
</amp-ad>

Begitulah cara pasang iklan Adsense di Blog Valid AMP. Semoga bermanfaat. Terima kasih.