We can capture visitor's IP,geo-location and page URLs visited in a website. We can also capture from which device, platform and browser user as visited the webpage.
Why we should capture visitor's details
To know the from which location traffic comes into our website. From this visitor's history, we can also analyze the user's behaviour. As per the user's behaviour we can target our potential customer.
Let's capture the visitor's geo-location
To gather the geo-location(longitude and latitude) of the visitor,We have HTML Geolocation API.we can access geolocation by calling method getCurrentPosition of navigator.geolocation object.
first we have check that browser or device support navigator.geolocation object or not
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
console.log("longitude:"position.coords.longitude)
console.log("latitude:"position.coords.latitude)
})
}else{
console.log("Geolocation is not supported by this device/browser")
}
NOTE: This API is strictly privacy-based means the browser will prompt for visitor's permission, when the user accepts to share location then only we can get the geolocation.
Page URLs and referrer URL
To know from which website/webpage visitors came to your webpage/website we will use document.referrer.
console.log(document.referrer)
To get current page URL
console.log(location.href)
Browser/Platform Details
We have navigator.userAgent to get the visitor's browser/platform details.
console.log(navigator.userAgent)
//Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/76.0.3809.100 Chrome/76.0.3809.100 Safari/537.36
IP Address and location
There are various web services to get IP address, city, region and country name. We may not get accurate details, But we can still rely on these services.
fetch("https://ipapi.co/json/")
.then(response=>response.json())
.then((responseJson=>{
console.log(responseJson)
}))
{
"ip": "2409:4062:115:954b:211e:e74:5180:15ae",
"city": "Bhubaneswar",
"region": "Odisha",
"region_code": "OR",
"country": "IN",
"country_name": "India",
"continent_code": "AS",
"in_eu": false,
"postal": "751030",
"latitude": 20.2724,
"longitude": 85.8339,
"timezone": "Asia/Kolkata",
"utc_offset": "+0530",
"country_calling_code": "+91",
"currency": "INR",
"languages": "en-IN,hi,bn,te,mr,ta,ur,gu,kn,ml,or,pa,as,bh,sat,ks,ne,sd,kok,doi,mni,sit,sa,fr,lus,inc",
}
Limitations:
1,000 requests per day
Requires SSL (https)
Note:- We can use various analytics services to track visitors to our website. To track website traffic by your own way then you can use the above hack.
Top comments (1)
Cool!
A drawback requiring permission to share visitors' locations with your site. In case of negative response you have no way to get the user's location. Please check out my article I've published recently "How to detect the location of your website's users with Javascript for free?"