DEV Community

Vinod Godti
Vinod Godti

Posted on

14 1

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
slotix profile image
Dmitry Narizhnyhkh

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →