Solusi Custom Search Engine Adsense Untuk Blog AMP HTML

Solusi Custom Search Engine Adsense Untuk Blog AMP HTML Kayaknya belum afdol kalau blogger yang menjadi publisher Adsense tidak menggunakan semua fasilitas Adsense untuk mendapatkan penghasilan selain menerapkan iklan di blog.

Salah satunya adalah fitur Custom Search Engine Adsense, sepertinya tidak semua publisher Adsense mengoptimalkan pendapatannya dengan memasang Custom Search Engine di blog yang dikelolanya.

Biarpun banyak publisher yang menyebutkan hasil dari pencarian Adsense ini kecil, tapi lumayan juga untuk menambah penghasilan kan?

Sebenarnya triknya sama dengan penerapan pada blog non AMP, hanya saja pada blog AMP tidak menyimpan hasil pencarian di dalam blog (biasanya pada blog non AMP akan menyimpan kode untuk hasil pencarian di Laman/Page), tetapi menggunakan halaman di luar blog (seperti di Github) untuk menampilkan hasil pencarian. Karena jika di simpan di blog (di Laman/Page) maka akan error AMP.

Sebagai contoh atau demo Custom Search Engine Adsense pada blog AMP, silahkan coba search box pada blog ini.

Bagaimana, Anda mau mencobanya juga? Silahkan ikuti langkah-langkahnya berikut ini.

Membuat Custom Search Engine di Adsense

Silahkan masuk ke dashboard Adsense Anda lalu masuk ke My Ads > Search > Custom Search Engine, lalu silahkan klik tombol +New Custom Search Engine.

Langkah selanjutnya:
  • Kemudian silahkan berikan nama untuk Custom Search Engine blog Anda.
  • Untuk What to search silahkan pilih Only sites I select lalu masukan URL blog Anda pada kotak di bawahnya.
  • Silahkan sesuaikan negara dan bahasanya.
  • Kalau mau Anda bisa berikan Custom Channel.
  • Untuk Search Results silahkan pilih on my website
  • Untuk URL where search results will be displayed silahkan kosongkan dulu, nanti diedit dan masukan URL tempat hasil pencariannya (di sini kita akan menggunakan Github untuk menyimpan kode Search Results).
  • Lalu Save and Get Code.

Kemudian yang kita butuhkan adalah Search results code untuk disimpan di Github. Silahkan masuk ke repository Github Anda lalu create new file kemudian masukan Search results code tadi dan simpan dengan file *.html (contoh: searchresults.html). Kemudian ambil URL Rawgit dari file tadi.

Masuk lagi ke dashboard Adsense lalu edit Custom Search Engine yang dibuat tadi lalu masukan URL Rawgit dari file tadi di kotak URL where search results will be displayed.


Menyesuaikan Search Box Blog dengan Custom Search Engine Adsense

Sekarang tinggal menyesuaikan Search Box pada blog Anda. Kita tidak akan merubah tampilan Search Box blog, hanya merubah sedikit kode pada form Search Box agar menyambung ke halaman hasil pencarian yang sebelumnya kita simpan di Github.

Misalkan saya contohkan kode form Search Box blog Anda seperti di bawah ini.


<form action="//www.google.com/search" method="get" target="_blank" novalidate="">

  <input class="query" name="q" type="text"/>

  <button type="submit">Search</button>

</form>


Silahkan ganti URL pada action form dengan URL Rawgit untuk Search Results yang tadi dibuat (perhatikan, URL harus HTTPS).

Kemudian silahkan tambahkan kode berikut ini.


<input type='hidden' name='cx' value='partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxx' />

<input type='hidden' name='cof' value='FORID:10' />

<input type='hidden' name='ie' value='UTF-8' />


Silahkan sesuaikan kode partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxx dengan kode yang seperti itu dari kode Search Results.

Sehingga penampakannya menjadi seperti berikut ini.


<form action="URL Rawgit untuk Search Results" method="get" target="_blank" novalidate="">

  <input type='hidden' name='cx' value='partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxx' />

  <input type='hidden' name='cof' value='FORID:10' />

  <input type='hidden' name='ie' value='UTF-8' />

  <input class="query" name="q" type="text"/>

  <button type="submit">Search</button>

</form>


Selesai... silahkan test Search Box blog Anda.

Selamat mencoba....