DEV Community

Vinod Godti
Vinod Godti

Posted on

Capture Visitors in HTML/JS to your website

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")
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

To get current page URL

    console.log(location.href) 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

Collapse
slotix profile image
Dmitry Narizhnykh

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?"