สถานที่ตั้งของผู้ใช้

Geolocation API ช่วยให้คุณค้นพบตำแหน่งของผู้ใช้เมื่อได้รับความยินยอมจากผู้ใช้

Paul Kinlan

Geolocation API ช่วยให้คุณค้นพบตําแหน่งของผู้ใช้โดยได้รับความยินยอมจากผู้ใช้ คุณสามารถใช้ฟังก์ชันนี้ในการทำงานต่างๆ เช่น การนำผู้ใช้ไปยังจุดหมายของตนและการติดป้ายสถานที่ในเนื้อหาที่ผู้ใช้สร้าง เช่น การทำเครื่องหมายสถานที่ถ่ายภาพ

นอกจากนี้ Geolocation API ยังช่วยให้คุณเห็นว่าผู้ใช้อยู่ที่ไหนและคอยสังเกตผู้ใช้ในขณะที่เคลื่อนที่ไปมา โดยต้องได้รับความยินยอมจากผู้ใช้เสมอ (และเมื่อหน้าเปิดอยู่เท่านั้น) การทำเช่นนี้ทำให้เกิดกรณีการใช้งานที่น่าสนใจจำนวนมาก เช่น การผสานรวมกับระบบแบ็กเอนด์เพื่อเตรียมคำสั่งซื้อสำหรับการรวบรวมข้อมูลหากผู้ใช้อยู่ใกล้ๆ

คุณจำเป็นต้องตระหนักถึงสิ่งต่างๆ มากมายเมื่อใช้ Geolocation API คู่มือนี้จะอธิบายถึง Use Case และวิธีแก้ปัญหาที่พบบ่อย

หมายเหตุ: ตั้งแต่ Chrome 50 เป็นต้นไป Geolocation API จะทำงานได้ในบริบทที่ปลอดภัย (HTTPS) เท่านั้น หากเว็บไซต์โฮสต์ในต้นทางที่ไม่ปลอดภัย (เช่น HTTP) คำขอตำแหน่งของผู้ใช้จะไม่ใช้อีกต่อไปแล้ว

สรุป

• ใช้ตำแหน่งทางภูมิศาสตร์เมื่อมีประโยชน์ต่อผู้ใช้
• ขออนุญาตเป็นคำตอบที่ชัดเจนต่อท่าทางสัมผัสของผู้ใช้
• ใช้การตรวจหาฟีเจอร์ในกรณีที่เบราว์เซอร์ของผู้ใช้ไม่รองรับตำแหน่งทางภูมิศาสตร์
• อย่าเรียนรู้วิธีใช้งานตำแหน่งทางภูมิศาสตร์เพียงอย่างเดียว แต่ให้เรียนรู้วิธีที่ดีที่สุดในการใช้ตำแหน่งทางภูมิศาสตร์ด้วย
• ทดสอบตำแหน่งทางภูมิศาสตร์กับเว็บไซต์ของคุณ

ควรใช้ตำแหน่งทางภูมิศาสตร์เมื่อใด

• ค้นหาว่าผู้ใช้อยู่ใกล้กับสถานที่ตั้งทางกายภาพที่เฉพาะเจาะจงมากที่สุดที่ใดเพื่อปรับแต่งประสบการณ์ของผู้ใช้
• ปรับแต่งข้อมูล (เช่น ข่าวสาร) ตามสถานที่ตั้งของผู้ใช้
• แสดงตำแหน่งของผู้ใช้บนแผนที่
• แท็กข้อมูลที่สร้างขึ้นในแอปพลิเคชันของคุณด้วยตำแหน่งของผู้ใช้ (หรือติดแท็กภาพให้กับภาพ)

ขออนุญาตอย่างมีความรับผิดชอบ

การศึกษาผู้ใช้ล่าสุดได้แสดงให้เห็นว่าผู้ใช้ไม่ไว้วางใจเว็บไซต์เพียงแค่แจ้งให้ผู้ใช้ยื่นเรื่องโต้แย้งเมื่อโหลดหน้าเว็บ แล้วแนวทางปฏิบัติแนะนำมีอะไรบ้าง

สมมติว่าผู้ใช้ไม่ได้ให้ตำแหน่งของตนแก่คุณ

ผู้ใช้จำนวนมากไม่อยากให้ตำแหน่งกับคุณ คุณจึงต้องใช้รูปแบบการพัฒนาเชิงป้องกัน

1. จัดการข้อผิดพลาดทั้งหมดจาก API ตำแหน่งทางภูมิศาสตร์เพื่อให้คุณปรับเว็บไซต์ให้สอดคล้องกับเงื่อนไขนี้ได้
2. ระบุให้ชัดเจนและชัดเจนเกี่ยวกับความจำเป็นในการระบุสถานที่ตั้ง
3. ใช้โซลูชันสำรองหากจำเป็น

ใช้ตัวเลือกสำรองหากต้องใช้ตำแหน่งทางภูมิศาสตร์

เราขอแนะนำว่าไซต์หรือแอปพลิเคชันของคุณไม่จำเป็นต้องมี การเข้าถึงตำแหน่งปัจจุบันของผู้ใช้ อย่างไรก็ตาม หากเว็บไซต์หรือแอปพลิเคชันต้องใช้ตำแหน่งปัจจุบันของผู้ใช้ เรามีโซลูชันของบุคคลที่สามที่จะช่วยให้คุณคาดเดาตำแหน่งของบุคคลดังกล่าวได้อย่างดีที่สุด

โซลูชันเหล่านี้มักจะทำงานได้โดยการดูที่อยู่ IP ของผู้ใช้ และจับคู่กับที่อยู่จริงที่ลงทะเบียนไว้กับฐานข้อมูล RIPE ตำแหน่งเหล่านี้มักไม่แม่นยำมากนัก โดยปกติแล้วจะระบุตำแหน่งฮับโทรคมนาคมหรือเสาสัญญาณโทรศัพท์มือถือที่ใกล้กับผู้ใช้มากที่สุด ในหลายๆ กรณี สัญญาณอาจไม่แม่นยำขนาดนั้นเลย โดยเฉพาะอย่างยิ่งเมื่อผู้ใช้ใช้ VPN หรือบริการพร็อกซีอื่นๆ บางบริการ

ขอสิทธิ์เข้าถึงตำแหน่งจากท่าทางสัมผัสของผู้ใช้เสมอ

อย่าลืมให้ผู้ใช้ทราบเหตุผลที่คุณสอบถามตำแหน่งของผู้ใช้ และประโยชน์ที่ผู้ใช้จะได้รับ ขอให้แสดงในหน้าแรกทันทีที่เว็บไซต์โหลดขึ้นส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี

ควร: ขอสิทธิ์เข้าถึงตำแหน่งด้วยท่าทางสัมผัสของผู้ใช้เสมอ

ไม่ควร: ขอให้แสดงในหน้าแรกขณะที่เว็บไซต์โหลดอยู่ ซึ่งจะทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี

แต่ให้ใช้คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่ชัดเจนหรือบ่งชี้ว่าการดําเนินการจะต้องเข้าถึงตำแหน่งของผู้ใช้แทน จากนั้น ผู้ใช้จะสามารถเชื่อมโยงข้อความแจ้งของระบบสำหรับการเข้าถึงกับการดำเนินการที่เพิ่งเริ่มต้นได้ง่ายขึ้น

ระบุตัวบ่งชี้ที่ชัดเจนว่าการดำเนินการจะขอตำแหน่ง

ผลการศึกษาของทีม Google Ads เมื่อมีการขอให้ผู้ใช้จองห้องพักโรงแรมในบอสตันสำหรับการประชุมที่กำลังจะเกิดขึ้นในเว็บไซต์ของโรงแรมแห่งหนึ่ง ผู้ใช้ได้รับแจ้งให้แชร์ตำแหน่ง GPS ทันทีหลังจากแตะคำกระตุ้นให้ดำเนินการ "ค้นหาและจอง" ในหน้าแรก

ในบางกรณี ผู้ใช้อาจหงุดหงิดเพราะไม่เข้าใจว่าทำไมถึงแสดงโรงแรมในซานฟรานซิสโกเมื่อต้องการจองห้องพักในบอสตัน

ประสบการณ์ที่ดีขึ้นคือทำให้ผู้ใช้เข้าใจว่าทำไมคุณถึงขอตำแหน่งของพวกเขา เพิ่มเครื่องหมายซึ่งเป็นที่รู้จักกันดีซึ่งใช้กันโดยทั่วไปในหลายๆ อุปกรณ์ เช่น ตัวค้นหาช่วง หรือคำกระตุ้นการตัดสินใจที่ชัดเจน เช่น "ค้นหาใกล้ฉัน"

ใช้เครื่องมือค้นหาช่วง

คำกระตุ้นให้ดำเนินการที่เฉพาะเจาะจงเพื่อค้นหาใกล้ฉัน

ค่อยๆ กระตุ้นผู้ใช้เพื่อให้สิทธิ์เข้าถึงตำแหน่งของตน

คุณไม่มีสิทธิ์เข้าถึงสิ่งที่ผู้ใช้กำลังทำอยู่ คุณจะทราบได้ว่าผู้ใช้ไม่อนุญาตให้เข้าถึงตำแหน่งของตน แต่คุณไม่รู้ว่าบุคคลเหล่านั้นให้สิทธิ์คุณเข้าถึงเมื่อใด คุณรู้แค่ว่าได้รับสิทธิ์เข้าถึงเมื่อผลการค้นหาปรากฏขึ้น

แนวทางปฏิบัติที่ดีคือ "กระตุ้น" ผู้ใช้ให้ดำเนินการหากต้องการให้ผู้ใช้ดำเนินการจนเสร็จสมบูรณ์

เราขอแนะนำให้คุณดำเนินการดังต่อไปนี้

1. ตั้งตัวจับเวลาที่ทริกเกอร์หลังจากช่วงเวลาสั้นๆ 5 วินาทีถือว่าเหมาะสม
2. หากได้รับข้อความแสดงข้อผิดพลาด ให้แสดงข้อความต่อผู้ใช้
3. หากได้รับการตอบกลับในเชิงบวก ให้ปิดตัวจับเวลาและประมวลผลผลลัพธ์
4. หากยังไม่ได้รับการตอบกลับในเชิงบวกหลังจากหมดเวลา ให้แสดงการแจ้งเตือนแก่ผู้ใช้
5. หากมีการตอบกลับในภายหลังแต่การแจ้งเตือนยังคงอยู่ ให้นำออกจากหน้าจอ

button.onclick = function () {
  var startPos;
  var nudge = document.getElementById('nudge');

  var showNudgeBanner = function () {
    nudge.style.display = 'block';
  };

  var hideNudgeBanner = function () {
    nudge.style.display = 'none';
  };

  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);

  var geoSuccess = function (position) {
    hideNudgeBanner();
    // We have the location, don't display banner
    clearTimeout(nudgeTimeoutId);

    // Do magic with location
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    switch (error.code) {
      case error.TIMEOUT:
        // The user didn't accept the callout
        showNudgeBanner();
        break;
    }
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

การสนับสนุนเบราว์เซอร์

เบราว์เซอร์ส่วนใหญ่สนับสนุน Geolocation API แต่แนวทางปฏิบัติที่ดีคือการตรวจสอบการสนับสนุนก่อนที่จะดำเนินการใดๆ

คุณสามารถตรวจสอบความเข้ากันได้ได้ง่ายๆ โดยการทดสอบการมีอยู่ของออบเจ็กต์ตำแหน่งทางภูมิศาสตร์ ดังนี้

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
} else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

การกำหนดตำแหน่งปัจจุบันของผู้ใช้

Geolocation API เป็นวิธีที่ง่ายแบบ "ครั้งเดียว" ในการรับตำแหน่งของผู้ใช้ นั่นคือ getCurrentPosition() การเรียกวิธีนี้จะรายงานตำแหน่งปัจจุบันของผู้ใช้ไม่พร้อมกัน

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  navigator.geolocation.getCurrentPosition(geoSuccess);
};

หากแอปพลิเคชันในโดเมนนี้ส่งคำขอสิทธิ์เป็นครั้งแรก เบราว์เซอร์มักจะตรวจสอบสิทธิ์ของผู้ใช้ นอกจากนี้ อาจมีค่ากำหนดที่จะอนุญาตหรือไม่อนุญาตการค้นหาสิทธิ์เสมอ ซึ่งในกรณีนี้กระบวนการยืนยันจะถูกข้าม ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์

อ็อบเจ็กต์ตำแหน่งอาจมีข้อมูลมากกว่าแค่ละติจูดและลองจิจูด เช่น ระดับความสูงหรือทิศทาง ทั้งนี้ขึ้นอยู่กับอุปกรณ์ตำแหน่งที่เบราว์เซอร์ของคุณใช้อยู่ คุณไม่สามารถบอกได้ว่าระบบตำแหน่งใช้ข้อมูลเพิ่มเติมใดจนกว่าระบบจะส่งคืนข้อมูลมาจริงๆ

การดูตำแหน่งของผู้ใช้

Geolocation API ช่วยให้คุณรับตําแหน่งของผู้ใช้ (เมื่อได้รับความยินยอมจากผู้ใช้) ด้วยการเรียกไปที่ getCurrentPosition() แบบครั้งเดียว

หากคุณต้องการตรวจสอบตำแหน่งของผู้ใช้อย่างต่อเนื่อง ให้ใช้เมธอด API ตำแหน่งทางภูมิศาสตร์ watchPosition() โดยทำงานในลักษณะเดียวกับ getCurrentPosition() แต่เริ่มทำงานหลายครั้งเมื่อซอฟต์แวร์ระบุตำแหน่ง:

1. ล็อกผู้ใช้ได้แม่นยำมากขึ้น
2. กำหนดว่าตำแหน่งของผู้ใช้กำลังเปลี่ยนแปลง

var watchId = navigator.geolocation.watchPosition(function (position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

กรณีที่ควรใช้ตำแหน่งทางภูมิศาสตร์เพื่อดูตำแหน่งของผู้ใช้

• คุณต้องการข้อมูลล็อกที่แม่นยำยิ่งขึ้นในตำแหน่งของผู้ใช้
• แอปพลิเคชันของคุณต้องอัปเดตอินเทอร์เฟซผู้ใช้ตามข้อมูลตำแหน่งใหม่
• แอปพลิเคชันของคุณต้องอัปเดตตรรกะทางธุรกิจเมื่อผู้ใช้เข้าสู่โซนที่กําหนด

แนวทางปฏิบัติแนะนำเมื่อใช้ตำแหน่งทางภูมิศาสตร์

ล้างข้อมูลและประหยัดแบตเตอรี่เสมอ

การเฝ้าติดตามการเปลี่ยนแปลงตำแหน่งทางภูมิศาสตร์ไม่ใช่การดำเนินการที่เสรี ขณะที่ระบบปฏิบัติการอาจเริ่มใช้คุณลักษณะของแพลตฟอร์มเพื่อให้แอปพลิเคชันสามารถเชื่อมต่อกับระบบย่อยทางภูมิศาสตร์ คุณซึ่งเป็นนักพัฒนาเว็บไม่รู้ว่าอุปกรณ์ของผู้ใช้มีการสนับสนุนอะไรบ้างในการตรวจสอบตำแหน่งของผู้ใช้ และในขณะที่คุณกำลังดูตำแหน่งหนึ่งๆ นั่นหมายถึงคุณกำลังมีส่วนร่วมกับอุปกรณ์โดยใช้การประมวลผลเพิ่มเติมมาก

หลังจากที่ไม่จำเป็นต้องติดตามตำแหน่งของผู้ใช้อีกต่อไปแล้ว ให้โทรหา clearWatch เพื่อปิดระบบตำแหน่งทางภูมิศาสตร์

แก้ไขข้อผิดพลาดอย่างมีชั้นเชิง

แต่น่าเสียดายที่การค้นหาตำแหน่งบางรายการอาจไม่สำเร็จ อาจระบุตำแหน่ง GPS ไม่ได้ หรือผู้ใช้ปิดการค้นหาตำแหน่งไปโดยกะทันหัน ในกรณีที่เกิดข้อผิดพลาด ระบบจะเรียกใช้อาร์กิวเมนต์ที่ 2 ที่ไม่บังคับของ getCurrentPosition() เพื่อให้คุณแจ้งให้ผู้ใช้ทราบในโค้ดเรียกกลับได้

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };
  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

ลดความจำเป็นในการเริ่มใช้ฮาร์ดแวร์ระบุตำแหน่งทางภูมิศาสตร์

สำหรับการใช้งานหลายๆ กรณี คุณไม่จำเป็นต้องใช้ตำแหน่งอัปเดตล่าสุดของผู้ใช้ เพียงแค่ใช้ค่าประมาณคร่าวๆ เท่านั้น

ใช้พร็อพเพอร์ตี้ที่ไม่บังคับ maximumAge เพื่อบอกให้เบราว์เซอร์ใช้ผลการค้นหาตำแหน่งทางภูมิศาสตร์ที่ได้รับล่าสุด วิธีนี้ไม่เพียงส่งคืนข้อมูลอย่างรวดเร็วขึ้นเมื่อผู้ใช้เคยขอข้อมูลก่อนหน้านี้เท่านั้น แต่ยังป้องกันไม่ให้เบราว์เซอร์เริ่มอินเทอร์เฟซฮาร์ดแวร์ตำแหน่งทางภูมิศาสตร์ เช่น การสามเหลี่ยม Wi-Fi หรือ GPS

window.onload = function () {
  var startPos;
  var geoOptions = {
    maximumAge: 5 * 60 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

อย่าปล่อยให้ผู้ใช้รอ ตั้งค่าระยะหมดเวลา

หากคุณไม่ได้กำหนดระยะหมดเวลา คำขอตำแหน่งปัจจุบันของคุณอาจไม่แสดงผลอีก

window.onload = function () {
  var startPos;
  var geoOptions = {
    timeout: 10 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

ต้องการตำแหน่งคร่าวๆ แทนตำแหน่งแบบละเอียด

หากต้องการค้นหาร้านค้าที่ใกล้ที่สุดสำหรับผู้ใช้ คุณก็ไม่จำเป็นต้องใช้ความแม่นยำแค่ 1 เมตร API นี้ออกแบบมาเพื่อมอบตำแหน่งคร่าวๆ ที่จะแสดงผลได้เร็วที่สุด

หากต้องการความแม่นยำสูง คุณลบล้างการตั้งค่าเริ่มต้นได้ด้วยตัวเลือก enableHighAccuracy ให้จำกัดเวลาใช้ วิธีนี้แก้ไขได้ช้ากว่า และใช้แบตเตอรี่มากกว่า

window.onload = function () {
  var startPos;
  var geoOptions = {
    enableHighAccuracy: true,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

จำลองตำแหน่งทางภูมิศาสตร์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เมื่อตั้งค่าตำแหน่งทางภูมิศาสตร์แล้ว คุณต้องทำดังนี้

• ทดสอบวิธีการทำงานของแอปในตำแหน่งทางภูมิศาสตร์ต่างๆ
• ยืนยันว่าแอปของคุณมีประสิทธิภาพลดลงอย่างค่อยเป็นค่อยไปเมื่อตำแหน่งทางภูมิศาสตร์ไม่พร้อมใช้งาน

ซึ่งทำได้จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
2. กด Esc เพื่อเปิดลิ้นชักคอนโซล
3. เปิดเมนูลิ้นชักคอนโซล
4. คลิกตัวเลือกเซ็นเซอร์เพื่อแสดงแท็บเซ็นเซอร์

จากที่นี่คุณสามารถลบล้างตำแหน่งเป็นเมืองหลักที่กำหนดไว้ล่วงหน้า ป้อนตำแหน่งที่กำหนดเอง หรือปิดใช้ตำแหน่งทางภูมิศาสตร์โดยการตั้งค่าการลบล้างเป็นไม่พร้อมใช้งาน

ความคิดเห็น