Cara menambahkan iklan adsense di dalam artikel Hugo

Adsense adalah penyedia program periklanan yang disediakan oleh Google, dimana kita dapat memiliki penghasilan dengan memasang iklan didalam website. Kamu bisa menampilkan iklan di footer, header, bahkan di tengah artikel.

[toc]

Nah, pada Kali ini Emalution akan membahas bagaimana cara menambahkan iklan Adsense di tengah artikel Hugo. Untuk pengguna WordPress, Blogspot mungkin akan banyak artikel yang sudah membahasnya, dan cukup mudah untuk diterapkan. Tetapi Bagaimana jika kamu menggunakan Framework HUGO?

Tenang, untuk pengguna HUGO menambahkan iklan adsense di tengah artikel juga dapat dilakukan. Walaupun tidak semudah pengguna Blogspot atau WordPress. Tetapi saya yakin, kamu pasti bisa mengikutinya!

Sebelum masuk ke panduannya, saya mau mengenalkan HUGO Static Website dan juga Adsense. Berikut penjelasannya,

Pengertian HUGO

HUGO adalah Framework yang digunakan untuk membuat website static seperti Landing Page, Blog, Protofolio, dan sebagainya. Website hasil generate HUGO ini berbentuk statis, jadi untuk membangun website dengan HUGO tidak memerlukan database.

HUGO di tulis menggunakan bahasa GO, sesuai dengan tagline HUGO \”The world\’s fastest framework for building websites\” framework ini diklaim lebih cepat dari framework sejenisnya seperti Jekyll, Octopress, 11ty, dsb. Tetapi tenang, karena untuk membuat web menggunakan HUGO kamu tidak perlu menulis kode Go dari awal. Jadi jangan takut!

Pengertian adsense

Adsense adalah program periklanan berbasis CPC atau Cost per Click yang dibuat oleh Google, dimana dengan Adsense ini pemilik website dapat memiliki penghasilan.

Setelah mengetahui apa itu HUGO dan Adsense. Lanjut saja kita ke tahapan menambahkan iklan adsense di tengah artikel Hugo

Menambahkan Iklan di dalam artikel HUGO

1. Hal pertama yang perlu dilakukan adalah membuat partials template baru, dan dapat dibuat seperti layout/partials/adsenseinarticle.html. Setelah membuat template partial, didalam file adsenseinarticle.html silahkan isi dengan kode berikut,

<!-- in-article ad -->
<script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>
<ins class=\"adsbygoogle\"
     style=\"display:block; text-align:center;\"
     data-ad-layout=\"in-article\"
     data-ad-format=\"fluid\"
     data-ad-client=\"{{.Site.Params.Adsense.client}}\"
     data-ad-slot=\"{{.Site.Params.Adsense.inArticleSlot}}\"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Pada kode diatas terdapat 2 Variable yaitu .Site.Params.Adsense.client, dan .Site.Params.Adsense.inArticleSlot. Dimana value untuk variable tersebut bisa didapatkan melalui Google Adsense Dashboard.

Cara mendapatkan kode data-ad-client dan data-ad-slot Adsense

Berikut cara Untuk mendapatkan ad-client dan ad-slot,

1.1 Silahkan kamu membuat Ad Unit dari halaman Adsense dari menu Ads > Overview > By Ad Unit > In Article ads.

1.2 Setelah setting unit iklan, silahkan pilih Save and get code untuk mendapatkan kode.

1.3 Setelah itu silahkan simpan kode pada ad-client dan ad-slot seperti gambar berikut,

2. Setelah mendapatkan kode ad-client dan ad-slot, selanjutnya tambahkan kode tadi di file config.toml dibawah [params.adsense] seperti berikut,

[params.adsense]
client = \"ca-pub-12345678\"
inArticleSlot = \"12345678\"

3. Setelah selesai membuat template partials, dan menambahkan value nya di file config.toml. Selanjutnya kamu harus edit single.html template.

Silahkan buka file layouts/_default/single.html, dan cari {{ .Content }}. Setelah menemukan, silahkan ubah {{ .Content }} menjadi,

{{ replace .Content \"<!--adsense-->\" (partial \"adsenseinarticle.html\" .) | safeHTML }}

Setelah selesai. Untuk memanggil adsense di dalam artikel, kamu hanya perlu menambahkan tag <!--adsense-->. Contohnya,

Ini paragraf pertama.

Ini paragraf kedua.

<!--adsense-->

Ini paragraf ketiga.

5. Selesai! Silahkan publish artikel kamu, dan periksa hasilnya. Contohnya akan seperti gambar berikut,

Gimana? Mudah bukan? Selamat mencoba dan tetap semangat! Kalau kamu ada kendala, atau pertanyaan. Bisa komen diartikel di bawah, atau bisa hubungi saya dari sosial media yang tertera.

referensi : Inserting an Ad Unit to Hugo Content without Shortcode