✔ Menciptakan Iklan Adsense Responsive Di Blogger Amp Html

Cara biar iklan AMP responsive full width di halaman AMP blogspot

Inovasi AdSense untuk publisher AMP HTML semakin baik. Beberapa waktu yang lalu, aku mendapat notifikasi untuk mengaktifkan iklan responsive khusus halaman AMP HTML.

Iklan responsif dianggap sanggup meningkatkan nilai klik pada sebuah iklan website. Untuk itulah, menciptakan sebuah iklan responsive sangatlah penting bagi sebuah website.

Namun dikala aku ingin mengaktifkan dan menempatkan aba-aba AdSense yang diberikan dari dashboard Google AdSense, ada duduk kasus sebab aku memakai platform Blogger. Kode tersebut tidak diterima oleh halaman blogger.

Akhirnya aku coba mempelajari aba-aba tersebut, dan menemukan alternatif untuk memasang aba-aba tersebut.

Namun, ada duduk kasus lain dikala mencoba mengaktifkannya. Halaman blog aku justru rusak dan iklan malah tidak responsif.

Ternyata masalahnya, aba-aba iklan AMP responsive tersebut hanya sanggup diterima dan terbaca dengan baik di tampilan mobile. Dan balasan duduk kasus ini yakni mengakalinya dengan memakai tag conditional Blogger.

Cara Membuat Iklan AdSense Responsif untuk Blogger AMP

Dibawah ini yakni teladan aba-aba yang diberikan Google di dashboard AdSense:

<amp-ad width="100vw" 
 height=320 type="adsense" 
 data-ad-client="ca-pub-1234567890004" 
 data-ad-slot="123456789" data-auto-format="rspv" data-full-width> 
 <div overflow></div>
</amp-ad>

Kode di atas tidak diterima di halaman xml Blogger.com, jadi aku coba mengkonversinya menjadi ibarat di bawah ini:

<amp-ad data-ad-client='ca-pub-1234567890004' 
 data-ad-slot='123456789' 
 data-auto-format='rspv' 
 data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
 <div overflow=''/> 
</amp-ad>

Agar tampilan iklan bekerja dengan baik baik di dekstop dan tampilan mobile, silahkan gunakan aba-aba iklan AMP di bawah ini:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- desktop -->
<amp-ad data-ad-client='ca-pub-1234567890004'
data-ad-slot='123456789'
height='250' layout='fixed-height' type='adsense'>
</b:if>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!-- AMP/mobile -->
<amp-ad data-ad-client='ca-pub-1234567890004'
data-ad-slot='123456789'
data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>

Silahkan copy aba-aba diatas, dan tempatkan iklan responsif AMP tersebut sesuai yang anda inginkan. Jangan lupa untuk mengganti ad-client dan ad-slot sesuai iklan AdSense anda.

Semoga mempunyai kegunaan :)
Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: