Kuinka havaita verkkosivustosi kävijöiden sijainti JavaScriptin avulla

Kuva Goran Ivos on Unsplash

Verkkosivustosi käyttäjien sijainnin tunnistaminen on hyödyllistä monista syistä.

Voit esimerkiksi näyttää erilaista sisältöä, ehkä eri kielillä, eri maista tuleville ihmisille, tai näyttää kohdennettuja tietoja vierailijoille eri paikoista.

Riippumatta syistäsi, sinulla on kaksi vaihtoehtoa:

  1. Geolocation API ja
  2. IP-osoitteen haku

Geolocation-sovellusliittymä

Maantieteellisen sijainnin sovellusliittymä on uusi HTML5-ominaisuus, jonka avulla verkkosivun kävijä voi jakaa sijaintinsa kanssasi, jos he niin valitsevat.

Kun yrität hakea sijainnin tällä sovellusliittymällä, käyttäjälle näytetään kehote, jossa kysytään, haluavatko hän jakaa sijaintisi sivustosi kanssa.

Esimerkki käyttäjälle näytetystä kehotteen tyypistä

Tämä tarkoittaa tietysti, että et saa sijaintia, jos käyttäjä päättää olla jakamatta sijaintiaan kanssasi.

Haitat: Se toimii vain suojatuissa palvelimissa (https). Sitä ei tueta Internet Explorer 10: ssä tai sitä uudemmissa versioissa eikä OperaMinissa.

Koodin tulos antaa meille vain koordinaatit. Entä jos tarvitset todellista sijaintia tai saat osoitteen sanoin? Puhumme tästä sen jälkeen, kun keskustelemme IP-hakuista.

IP-osoitteen haku

IP-osoitteen haku on toinen tapa saada vierailijasi sijainti. Käytämme tähän vaihtoehtoon yleensä julkisia IP-hakupalveluita / sovellusliittymiä. Jotkut näistä ovat maksullisia palveluita ja osa ilmaisia.

Esimerkkejä ovat IP Geolocation API, IPinfo ja GEOIP DB. Ne tarjoavat tietoja myös eri muodoissa, kuten JSON, XML ja CSV. Lue nämä asiakirjat saadaksesi hyvät käsitykset näiden palveluiden käyttämisestä.

Käytän IP-paikannussovellusliittymää esimerkissäni. Voisin käyttää Vanilla JavaScriptiä, mutta en. Se on helpompaa kirjastoissa, kuten jQuery.

Tämä on konsolin tulosteena:

Haitat: Vaikka useimpien IP-hakupalveluiden antama maa on melkein aina tarkka, koordinaatit eivät aina ole tarkkoja. Lisäksi, jos aiot tehdä paljon pyyntöjä, jotkut näistä palveluista vaativat API-avaimen hankkimisen, ja joudut ehkä joutumaan maksamaan palvelusta.

Voit käyttää IP-hakua vaihtoehtona tai varmuuskopiona paikannusliittymän sovellusliittymälle selaimissa, jotka eivät tue paikannusta, tai kertoa sinulle, kun tapahtuu virhe:

Nyt kun sijaintimme on tavalla tai toisella, aiomme muuntaa noutaman leveys- ja pituusasteen kattavammaksi osoitteeksi käyttämällä Google Mapsin käänteisen geokoodauksen sovellusliittymää.

Googlen mukaan käänteinen geokoodaus on prosessi, jolla muunnetaan maantieteelliset koordinaatit ihmisille luettaviksi osoitteiksi. Tarvitsemme vain api-avaimen. Noudata vaiheita saadaksesi täällä.

Tässä on mitä sain:

Esimerkki käänteisen geokoodauksen sovellusliittymästä

Voit leikkiä esineellä saadaksesi halutun osoitteen haluamassasi muodossa.

Kaiken kaikkiaan, meillä on alla oleva koodi. (Huomaa, että ipLookUp-toimintoa muokattiin.)

Tässä vaiheessa me tiedämme, kuinka noutaa käyttäjän sijaintimme riippumatta siitä, ja voit nyt räätälöidä koodin omaan yksilölliseen projektiisi.

Toivottavasti olet oppinut jotain, kiitos lukemisesta!

Lähdekoodi

Löydät tämän artikkelin koodin GitHubista.