Trik Memasang 2 Iklan AdSense di Tengah Postingan pada Template AMP Blogger

bungfrangki AMP HTML Blog Tips Trik Memasang 2 Iklan AdSense di Tengah Postingan pada Template AMP Blogger

Tutorial Blogger untuk tips AMP (Accelerate Mobile Page) kali ini membahas tentang cara pasang 2 unit iklan Adsense di tengah artikel postingan untuk template AMP di Blogger.

Trik Memasang 2 Iklan AdSense di Tengah Postingan pada Template AMP

Emang bisa? Mari kita lihat kembali apa itu AMP!

Apa itu AMP? AMP kependekan dari Accelerated Mobile Pages atau laman seluler yang dipercepat. Tujuan dibuatnya proyek AMP ini adalah untuk membuat halaman web (untuk tampilan seluler) yang mampu dimuat secara instan, lebih cepat. Berkali-kali lipat lebih cepat dari kecepatan tampilan desktopnya.

Intinya, AMP ini khusus diprioritaskan pada tampilan mobile, guna menghemat data serta memberikan pengalaman membuka situs lebih cepat dari biasanya. Untuk tujuan tersebut, dibuatlah struktur HTML khusus yang memenuhi kaidah-kaidah theme AMP, yang berbeda dengan struktur html biasanya.

Nah, dari penjelasan tersebut, kita akan coba memanfaatkan peluang dalam memaksimalkan iklan. Terutama iklan Google AdSense pada halaman desktop. Sebab untuk template versi desktop tidak perlu mengikuti (sepenuhnya) kaidah-kaidah validasi AMP tersebut.

Catatan:
Untuk menjalankan cara berikut ini perlu dipastikan bahwa template Blogger yang digunakan dan format postingan sudah dalam kondisi valid AMP.

Cara membuat dua slot iklan Adsense di tengah artikel pada template AMP di Blogger

Langkah 1

Langkah awal yang perlu dilakukan ialah, kita akan mengubah halaman indeksi AMP terpisah dari link/halaman canonical yang asli. Dalam hal ini kita akan memanfaatkan URL mobile m=1 untuk dijadikan sebagai syarat tampilan AMP. Artinya, halaman AMP hanya akan aktif pada perangkat mobile saja.

Caranya ialah, silahkan masuk ke Edit HTML:

Silahkan cari kode yang seperti ini (atau mirip):

<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>

Ganti menjadi seperti ini:

<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>

Cari lagi meta tag berikut:

<link expr:href='data:blog.url' rel='canonical'/>

Hapus kode tersebut, lalu ganti dengan kode ini:

<b:if cond='data:blog.isMobileRequest == "false"'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + "?m=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>

Simpan Theme.

Sampai disitu, pengaturan tampilan AMP hanya akan muncul pada URL mobile m=1 sudah berhasil diterapkan.

Langkah 2

Selanjutnya kita akan memasang JavaScript untuk menampilkan 2 slot iklan Adsene di tengah postingan.

Sebetulnya cara pemasangannya sama seperti cara memasang 2 slot iklan Adsense di tengah artikel pada postingan sebelumnya. Hanya saja kali ini kita akan menggunakan tag conditional khusus mobile.

Caranya adalah:

Cari kode berikut

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>

Lalu ganti kode tersebut dengan kode berikut ini:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='middleAds middleAds1' id='middleAds1'>
<div style='clear:both;'>

</div>
</div>
<div class='middleAds middleAds2' id='middleAds2'>
<div style='clear:both;'>

</div>
</div>
<div id='tgtPost'><data:post.body/></div>
<script type='text/javascript'>
function insertAfter(tbh,tgt) {
var prt = tgt.parentNode;
if (prt.lastChild == tgt) {prt.appendChild(tbh);}
else {prt.insertBefore(tbh,tgt.nextSibling);}}
var tgt = document.getElementById("tgtPost");
var midAd1 = document.getElementById("middleAds1");
var midAd2 = document.getElementById("middleAds2");
var showAd1 = tgt.getElementsByTagName("br");
var showAd2 = tgt.getElementsByTagName("p>");
if (showAd1.length > 0) {insertAfter(midAd1,showAd1[3]);}
if (showAd2.length > 0) {insertAfter(midAd1,showAd2[3]);}
if (showAd1.length > 0) {insertAfter(midAd2,showAd1[5]);}
if (showAd2.length > 0) {insertAfter(midAd2,showAd2[5]);}
</script>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>

Atau jika ditemplate hanya menemukan kode seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Tidak perlu lagi memasukkan kode yang ditandai pada kode di atas.

Keterangan:

Slot iklan pertama, letakkan di bawah kode 
Slot iklan kedua, letakkan di bawah kode 
Silahkan sesuaikan angka 3 dan 5 pada kode berikut, untuk mengatur pada (setelah) paragraf berapa iklan hendak ditampilkan:

if (showAd1.length > 0) {insertAfter(midAd1,showAd1[3]);}
if (showAd2.length > 0) {insertAfter(midAd1,showAd2[3]);}
if (showAd1.length > 0) {insertAfter(midAd2,showAd1[5]);}
if (showAd2.length > 0) {insertAfter(midAd2,showAd2[5]);}

Catatan: semakin besar angka yang Anda berikan, maka semakin ke bawah pula tempat iklan akan tampil.

Langkah 3

Saatnya memasang/meletakkan iklan Adsense pada slot widget yang tersedia. Cara pemasangannya adalah sebagai berikut.

Dalam hal ini, kita perlu memisahkan script iklan Adsense yang akan tampil pada tampilan AMP dan desktop.

Untuk itu, silahkan cari dan HAPUS terlebih dahulu kode js-ad, yang seperti ini:

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

Setelah itu, cari kode </head> atau </head> lalu letakkan kode berikut tepat di atas kode tadi:

<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
</b:if>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
</b:if>

Selanjutnya, untuk meletakkan slot iklan pada script widget yang akan menampilkan 2 slot iklan di tengah artikel, maka kita menggunakan format yang biasa (bukan format AMP). Yaitu kurang lebih yang seperti ini:

<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-format='rectangle' data-ad-slot='xxxxxxxxxxxxxx' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Atau seperti ini:

<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxxxx' style='display:inline-block; width:300px; height:250px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Langkah 4

Kita juga perlu mengubah seluruh script semua slot iklan (kecuali widget yang menampilkan 2 iklan di tengah artikel), entah itu di atas artikel, di bawah artikel, di sidebar blog, menjadi seperti ini:

<b:if cond='data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>

<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-format='rectangle' data-ad-slot='xxxxxxxxxxxxxx' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>

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

Perhatian:

Silahkan sesuaikan kode data-ad-client dan data-ad-slot pada script iklan sesuai dengan kode iklan Anda.
Hindari memblok URL m=1 pada robots.txt agar tidak error

Langkah 5

Rapikan tampilan iklan di tengah postingan tersebut dengan menambahkan CSS berikut ini di atas kode </style> pada post page:

/* Middle Ads */
.middleAds{margin:10px auto 4px;display:block;overflow:hidden;width:100%;height:auto;text-align:center}
.middleAds p{font-size:11px!important;font-weight:400;text-align:center;display:block;padding:0;margin:0 auto 5px!important;color:#bbb!important}

Simpan Theme.

Penutup

Perlu dipahami bahwa, 2 iklan Adsense di tengah artikel tersebut hanya akan tampil pada perangkat desktop saja, atau perangkat (device) lainnya selain yang menampilkan jenis url yang berakhiran m=1.

Artinya, 2 iklan di tengah postingan tersebut tidak akan tampil pada device mobile, yang dioptimalkan khusus untuk tampilan AMP. Tidak hanya iklannya, JavaScript yang baru saja ditambahkan tersebut tidak akan muncul juga pada tampilan AMP.

Tutorial cara memasang 2 slot iklan AdSense di tengah blog postingan/artikel pada template AMP Blogger sudah selesai, maka artikel ini harus diakhiri.

Jika ada pertanyaan silahkan klik tombol berkomentar, semoga bermanfaat, terima kasih!