Options for Detecting Website Visitor's Location

published on 14 December 2020

Location data can help to improve the user experience of your website and increase conversion rates. There are many potential use cases: targeting messages, personalizing content, form pre-filling, redirecting users to local sites etc.

To accomplish this, you have to choose which method to use to identify your users' location. There are many options to use: reverse geocoding by using browser's Geolocation API, IP-address based reverse geocoding, timezone based detection, or use machine learning. We'll cover all these in this post.

Reverse Geocoding method

To use the location data on your site, you usually need to use a 3rd party reverse geocoding service that can extract readable place names (eg. country, state, city) for your users' coordinate-data IP-address data. In most cases, you pass the raw data (IP-address, latitude/longitude coordinates) from your website to the service provider's API, and they return the "geocoded" data to your website.

There's also a new reverse geocoding approach that uses machine learning directly in the client-interface preventing your users' coordinate data from leaking to 3rd parties.

When choosing the right approach, you need to evaluate the most critical requirements in your case such as data quality and accuracy, API speed, price, or privacy aspects.

Reverse Geocoding with Geolocation API

Geolocation API  allows your website to access your website user's location that is usually detected by the device's GPS sensor. For privacy reasons, it only works in HTTPS, and the users need to permit to use their data.

If the user allows your site to use her data, you need to pass the user's latitude and longitude coordinate-data to a reverse geocoding service of your choice.

Here's an example code from w3 that returns the latitude and longitude of the user's position:

<script> var x = document.getElementById("demo"); function getLocation() {   if (navigator.geolocation) {     navigator.geolocation.getCurrentPosition(showPosition);   } else {     x.innerHTML = "Geolocation is not supported by this browser.";   } } function showPosition(position) {   x.innerHTML = "Latitude: " + position.coords.latitude +   "<br>Longitude: " + position.coords.longitude; } </script>

You can then use any of the reverse geocoding services available and convert the position.coords.longitude and position.coords.latitude to understandable location data. Here are examples of few available providers:

Location detection with IP-address

You can use your visitor's IP-address to get her approximate location. It's not as accurate as using the Geolocation API method, but the upside is that it does not require your user's permission. Remember to consider the need to keep your users aware of how you use or store their IP-addresses.

To access your user's IP-address and extract the location information, you need to either purchase IP-address data and use it to map the location of your users, or rely on external services. Here are a couple of options:

Time zone based detection

If the location's accuracy is not a high priority to you and it's enough to have an educated guess of the user's country or continent, you can use the time zone of your users' browser. Below is an example of how to read it with JavaScript: var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

Privacy-First detection with Machine Learning

A new kid in the block is a privacy-first approach that uses neural networks for reverse geocoding directly in the browser. The benefit is that the user's coordinate data will not leave the client, making it more privacy-friendly. This way, developers and companies have a smaller risk of adopting their privacy policies and data security processes regarding data-privacy legislation.

Here's an example code how to use pointNG service to detect the user's location without passing data to 3rd party services: <script src="https://cdn.pointng.io/pointng-min.js"></script> <script> const pointng = new PointNG({ api_key: API_KEY }); pointng.getLocation().then(function(prediction) { console.log(pointng.prediction) }) </script>

You can get the free API key by signing up here.

Conclusion

These methods listed here are just a few examples for detecting the user location. If you feel that it's missing a crucial example of something that should be updated, please let us know!

Read more