Cara Mendeteksi Pengunjung yang Menggunakan Smartphone (Mobile) pada Blogger - Elang Sakti
Download Ebook Belajar Arduino PDF, Arduino untuk pemula
Jasa Pembuatan Program Arduino, pemrograman Arduino
# Hack Your Skills! to be Professional Mechatronics

Cara Mendeteksi Pengunjung yang Menggunakan Smartphone (Mobile) pada Blogger

1 komentar
Tulisan ini akan berfokus pada cara mendeteksi pengunjung blog atau website yang menggunakan handphone / smartphone (mobile), khususnya untuk website atau blog yang dibangun dengan blogger. Selain menggunakan javascript, kita bisa menggunakan data API yang disediakan oleh blogger. Tapi sebelum itu, apa sih gunanya membeda-bedakan pengunjung website berdasarkan perangkat yang digunakan? Lalu kalau sudah bisa membedakan antara pengunjung yang menggunakan mobile dengan pengunjung yang menggunakan desktop, terus mau diapakan?

Cara Mendeteksi Pengunjung yang Menggunakan Smartphone (Mobile) pada Blogger

Baik, pendeteksian perangkat yang digunakan pengunjung merupakan informasi yang penting, baik untuk mengoptimasi website, atau untuk menganalisa seperti apa pengungjung yang banyak mengakses website atau blog kita. Berikut sebagian manfaat yang akan bisa kita dapatkan ketika kita bisa mendeteksi browser atau perangkat yang digunakan oleh pengunjung website kita:

  • Kita bisa membedakan template antara pengguna mobile dan pengguna desktop.
  • Kita bisa membuat template yang lebih ringan untuk pengguna mobile, sehingga konsumsi bandwidth kita dan bandwidth pengunjung bisa diminimalisir
  • Dengan template yang lebih "ringan", maka waktu loading website akan lebih cepat dan pengunjung tidak terlalu lama menunggu
  • Kita bisa menentukan bagian dari website yang perlu ditampilkan atau tidak, kita bisa mengurangi gambar, mengurangi menu, dll
  • Kita bisa memetakan kelas dari pengunjung website kita, apakah pengguna awam atau kelas menengah ke atas (tapi ini lebih kompleks)

Baik, itu sedikit manfaat ketika kita bisa membedakan antara user yang menggunakan browser pada smartphone atau mobile, atau user pengunjung yang menggunakan browser desktop.

Untuk website yang dibangun dengan blogger, maka ada satu data yang bisa dijadikan acuan, yaitu data:blog.isMobile. Data ini akan bernilai true apabila pengguna menggunakan browser pada perangkat mobile, dan akan bernilai false apabila pengguna menggukan browser pada komputer dekstop. Untuk mendeteksi apakah menggunakan mobile atau tidak, maka kita bisa menggunakan script untuk pengkondisian seperti berikut:

<b:if cond='data:blog.isMobile == "true"'>
  <!-- if mobile -->
<b:else/>
  <!-- if not mobile -->
</b:if>

Pada kasus yang saya alami, script di atas tidak bisa digunakan untuk mendeteksi pengguna mobile atau bukan, fyuh! Ketika saya menggunakan smartphone untuk mengetesnya, nilai isMobile selalu false, artinya smartphone saya terdeteksi bukan sebagai mobile. Saya pun bingung dan saya coba menggunakan beberapa aplikasi mobile test yang ada di online, dan hasinya keren, sama saja. Semua aplikasi mobile test tetap terdeteksi sebagai bukan mobile. :D

Alternatif solusi yang terpikirkan untuk masalah ini mungkin hanya satu, deteksi lebar layar dengan javascipt!

Tapi saya berpikir, masak google sampai sebodoh ini sampai sistem yang dia buat tidak bisa mendeteksi perangkat mobile? Padahal url ketika saya buka dengan smartphone masih tersemat ?m=1 di akhir linknya. Artinya, google bisa mendeteksi bahwa yang saya gunakan adalah perangkat mobile, bukan perangkat desktop.

Sekedar tambahan, jika kita mengunjungi suatu website yang dibuat dengan blogger dengan smartphone (mobile), maka setiap url akan ditambahkan satu parameter, yaitu parameter 'm' yang artinya mobile. Parameter m=1 jika perangkat yang digunakan adalah mobile, sedangkan m=0 (atau tidak ada paramter) jika perangkat yang digunakan bukan mobile. Ini terisi secara otomatis, tapi kita juga bisa mengisinya dengan manual. Secara logika, harusnya google bisa mendeteksi bahwa ini mobile, bukan selain mobile.

Saya kembali cari-cari di google API, dan akhirnya belum ketemu juga. Tapi setelah beberapa puluh menit, solusi ditemukan di stackoverflow. Ternyata ada satu data yang bisa digunakan untuk mendeteksi mobile, dan data ini merefer ke paramter m=1 atau m=0. Variabel untuk data tersebut adalah data:blog.isMobileRequest, yap, bukan data:blog.isMobile. Jika m=1, maka data:blog.isMobileRequest = true, jika parameter m=0 atau tidak terdefenisi, maka data:blog.isMobileRequest = false.

Dan setelah dicoba, cring, pengguna mobile pun terdeteksi. Yess! Sehingga kode yang saya gunakan untuk mendeteksi pengguna mobile yaitu:

<b:if cond='data:blog.isMobileRequest == "true"'>
  <!-- if mobile -->
<b:else/>
  <!-- if not mobile -->
</b:if>

Semoga cerita ini membuat Anda semua bahagia, dan selamat berakhir pekan! :D


Written by Hari Santoso
Cara Mendeteksi Pengunjung yang Menggunakan Smartphone (Mobile) pada Blogger
Bahasan: Tulisan ini akan berfokus pada cara mendeteksi pengunjung blog atau website yang menggunakan hand...
Published at Sabtu, 13 Juni 2015, Updated at Sabtu, 13 Juni 2015
Reviewed by dr. on
Rating: 4.7

1 komentar :

  1. sangat membantu gan, terima kasih atas ilmunya...

    BalasHapus