Comment détecter l’emplacement des visiteurs de votre site Web à l’aide de JavaScript

Photo de Goran Ivos sur Unsplash

Détecter l’emplacement des utilisateurs de votre site Web est utile pour diverses raisons.

Vous pouvez par exemple vouloir afficher un contenu différent, peut-être dans différentes langues pour des personnes de différents pays, ou afficher des informations ciblées à l'intention des visiteurs de différents endroits.

Quelles que soient vos raisons, vous avez deux options:

  1. L'API de géolocalisation et
  2. Recherche d'adresse IP

L'API de géolocalisation

L’API de géolocalisation est une nouvelle fonctionnalité HTML5 permettant au visiteur d’une page Web de partager son emplacement avec vous s’il le souhaite.

Lorsque vous essayez de récupérer l'emplacement à l'aide de cette API, l'utilisateur est invité à indiquer à l'utilisateur s'il souhaite partager son emplacement avec votre site.

Exemple du type d'invite montré à l'utilisateur

Évidemment, cela signifie que vous ne recevrez pas l’emplacement si l’utilisateur décide de ne pas partager son emplacement avec vous.

Inconvénients: il ne fonctionne que sur des serveurs sécurisés (https). Il n'est pas pris en charge sur Internet Explorer 10 et inférieur, ni OperaMini.

La sortie du code ne nous donne que les coordonnées. Que se passe-t-il si vous avez besoin de l'emplacement réel ou si vous obtenez l'adresse en mots? Nous en reparlerons après la discussion sur la recherche d’IP.

Recherche d'adresse IP

Une recherche d'adresse IP est un autre moyen d'obtenir l'emplacement de votre visiteur. Nous utilisons généralement des services / API de recherche IP publics pour cette option. Certains d'entre eux sont des services payants et d'autres sont gratuits.

Les exemples incluent API de géolocalisation IP, IPinfo et GEOIP DB. Ils fournissent également les données dans divers formats, tels que JSON, XML et CSV. Pour bien comprendre comment utiliser ces services, lisez leur documentation.

J'utiliserai l'API de géolocalisation IP pour mon exemple. Je pourrais utiliser JavaScript en vanille, mais je ne le ferai pas. C’est plus facile avec des bibliothèques comme jQuery.

Ceci comme sortie sur ma console:

Inconvénients: Bien que le pays indiqué par la plupart des services de recherche IP soit presque toujours exact, les coordonnées ne le sont pas toujours. De plus, si vous allez faire beaucoup de demandes, certains de ces services nécessitent l’obtention d’une clé API et vous devrez peut-être payer pour le service.

Vous pouvez utiliser la recherche IP comme alternative ou sauvegarde pour l’API de géolocalisation dans les navigateurs qui ne prennent pas en charge la géolocalisation, ou vous avertir quand une erreur se produit, comme ceci:

Maintenant que nous avons notre emplacement d’une manière ou d’une autre, nous allons convertir la latitude et la longitude extraites en une adresse plus complète à l’aide de l’API de géocodage inversé de Google Maps.

Selon Google, le géocodage inversé est le processus de conversion des coordonnées géographiques en adresses lisibles par l'homme. Tout ce dont nous avons besoin, c'est d'une clé API. Suivez les étapes pour en obtenir un ici.

Voici ce que j'ai

Exemple de sortie de l'API de géocodage inversé

Vous pouvez jouer avec l'objet pour obtenir l'adresse souhaitée dans le format que vous préférez.

En réunissant tout cela, nous avons le code ci-dessous. (Notez que la fonction ipLookUp a été modifiée.)

À ce stade, nous savons comment récupérer l'emplacement de notre utilisateur, et vous pouvez maintenant adapter le code à votre propre projet.

J'espère que vous avez appris quelque chose, merci d'avoir lu!

Code source

Vous pouvez le trouver le code de cet article sur GitHub.