Subscribe to a Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

Locating your siteโ€™s visitors can come in handy whether you are implementing purchasing power parity for your SASS or customizing content, currencies, and advertisements according to their location. It helps you tailor the content to visitors from different parts of the world.

Locating and tracking site visitors is a hassle, but not anymore. IPStack is super handy when it comes to handling all the geo-related tracking of your audience.

Last year, Ahmad Awais built an open-source Covid19 tracking tool, corona-cli. It displays the latest stats of the disease throughout the world. If we were to take it further, we could include IP tracking to automatically show information relevant to the visitorโ€™s country so that the users wonโ€™t need to specify their country manually. Pretty neat, right? I can think of many more use-cases like these from the top of my head. I am sure you can too.ย 

To implement site visitorsโ€™ tracking and identification, you need a geolocation API. IPAPI by ipstack is the one I recommend because of its extensive information without compromising performance. Not only that, I went through some user reviews, and it turns out it is pretty accurate as well.

With that said, letโ€™s jump in and see how we can use IPAPI to get location-related information.ย 

ipstack-cover

โšก๏ธ Information provided by IPAPI

The data provided by the API is categorized into location, currency, timezone, connection, and security modules. For visitor tracking and identification, you only need the first three modules. These modules provide information-based features that ipstack offers. Here is a brief breakdown:

  • ๐Ÿ“Œย Location:ย It includes all the location parameters like region, city, etc.
  • โฐย Timezone:ย It gives the Time zone of the visitors and time-related metadata.
  • ๐Ÿ’ตย Currency:ย Information aboutย Primary currency, code, symbol, and more.ย 

Enough talk. Letโ€™s see the API in action now.ย 

Ipapi Thedevcouple

๐Ÿ’ป Working with IPAPI

First, go ahead on the IPAPI or ipstack website and sign up using a free or a premium plan as per your requirement. Once you have successfully signed up, you will be redirected to the quick-start guide page.ย 

โ†’ Step 1 – API Access Key

The first thing you will see is your API access key. Copy it and store it somewhere, as we will use this key to make API calls.

ipstack Quickstart

โ†’ย  Step 2 – Requesting the API

The next step is requesting the API for IP-related information. The API provides you three lookup options:ย ย 

  • Standard Lookup:ย Gets data for a single IP Address.
  • Bulk Lookup:ย Gets data for multiple IP Addresses
  • Requester Lookup:ย Gets data of the requester.ย ย 

Using any of these endpoints is pretty straightforward. You can find more about them in the documentation. For our testing, we will use the standard lookup method. The quick start guide conveniently creates the API endpoint using your IP address and your access key.

ipstack Quickstart 2

Now, you can open the API endpoint/link in a new tab to see the response. If you are using a free plan, you will get a response like this:ย 

{
"ip": "2400:adc7:901:c900:552c:21b1:----:----",
"type": "ipv6",
"continent_code": "AS",
"continent_name": "Asia",
"country_code": "PK",
"country_name": "Pakistan",
"region_code": null,
"region_name": null,
"city": null,
"zip": null,
"latitude": 30,
"longitude": 70,
"location": {
"geoname_id": null,
"capital": "Islamabad",
"languages": [
{
"code": "en",
"name": "English",
"native": "English"
},
{
"code": "ur",
"name": "Urdu",
"native": "ุงุฑุฏูˆ",
"rtl": 1
}
],
"country_flag": "http://assets.ipstack.com/flags/pk.svg",
"country_flag_emoji": "๐Ÿ‡ต๐Ÿ‡ฐ",
"country_flag_emoji_unicode": "U+1F1F5 U+1F1F0",
"calling_code": "92",
"is_eu": false
}
}

As you can see, the response in the free plan includes the location module and gives location information according to different parameters. If you are subscribed to their Basic plan or higher, the response will additionally include Currency, Timezone, and Connection modules. To give you an idea, it will look like this:ย 

{
    "ip": "161.185.160.93",
    "hostname": "161.185.160.93",
    "type": "ipv4",
    "continent_code": "NA",
    "continent_name": "North America",
    "country_code": "US",
    "country_name": "United States",
    "region_code": "NY",
    "region_name": "New York",
    "city": "Brooklyn",
    "zip": "11238",
    "latitude": 40.676,
    "longitude": -73.9629,
    "location": {
        "geoname_id": 5110302,
        "capital": "Washington D.C.",
        "languages": [
            {
                "code": "en",
                "name": "English",
                "native": "English"
            }
        ],
        "country_flag": "http://assets.ipapi.com/flags/us.svg",
        "country_flag_emoji": "๐Ÿ‡บ๐Ÿ‡ธ",
        "country_flag_emoji_unicode": "U+1F1FA U+1F1F8",
        "calling_code": "1",
        "is_eu": false
    },
    "time_zone": {
        "id": "America/New_York",
        "current_time": "2018-09-24T05:07:10-04:00",
        "gmt_offset": -14400,
        "code": "EDT",
        "is_daylight_saving": true
    },
    "currency": {
        "code": "USD",
        "name": "US Dollar",
        "plural": "US dollars",
        "symbol": "$",
        "symbol_native": "$"
    },
    "connection": {
        "asn": 22252,
        "isp": "The City of New York"
    },
    "security": {
        "is_proxy": false,
        "proxy_type": null,
        "is_crawler": false,
        "crawler_name": null,
        "crawler_type": null,
        "is_tor": false,
        "threat_level": "low",
        "threat_types": null
    }
}

Step 3 – Integrate into your application

Now that we have seen what kind of information we can get, we can utilize it in our applications. IPAPIโ€™s JSON and XML API design makes it super easy to integrate into your application.

For a fun, quick demo, I coded a simple React application. The idea is to show the userโ€™s country flag emoji alongside their name using IPAPI. Your application might differ; therefore, this is the only piece of code you need to worry about. I am sending a GET request through Axios on the API endpoint and then used an IP address and my access key. The response is received and stored in the data variable.

// importing axios in the file
const axios = require('axios');

// function making the api call
(async () => {
    await axios
        .get('http://api.ipapi.com/YOUR_IP_ADDRESS?access_key=YOUR_API_ACCESS_KEY')
        .then(({ data }) => console.log(data))
        .catch((err) => console.log(err));
})();

ย As we can see from the previous response, the country emoji resides in the location module. So, I extract the country emoji using data.location.country_flag_emoji and then pass it to my front-end code. Here is the result, with the country emoji being shown to the visitor:

Ipstack Country Emoji

Pretty cool. ๐Ÿคฉ This was a quick tutorial on implementing visitor tracking and identification on your site using ipstack API. I leave the rest up to you and your imagination to utilize it according to your use case.ย 

๐Ÿ”ฅ Performance

When it comes to integrating APIs like this in your application, performance is the biggest concern. No one wants their site to hold off on content while waiting for the API to respond. I ran a few tests to check the performance of IPAPI.ย 

โšก๏ธ On the first test, I got an awe-inspiring response time of 187ms

๐Ÿš€ I then tested for different endpoints and the response time never went above 200ms.

What do these numbers translate to? Close to zero impact on your page loading speed which is very impressive. ๐Ÿ’ฏ

Wrapping up

With an uptime ofย 99.759 for the last 90 days, IPAPI is a reliable and quick way to introduce location, time zone, and currency-related features in your application.ย 

It has been my go-to choice for implementing features like these in my projects. So far, my experience with IPAPI has been outstanding. So, if you are looking to buy something like this, definitely give it a go.ย 

Have you used IPAPI or any similar service to drill userโ€™s information? Which service did you use, and how was your experience? Let us know your thoughts in the comments section below.ย 

We’ve written a whole series of extensive reviews featuring IPStack and its other products. Feel free to check these out here โ†’

๐Ÿ™Œ

SUBSCRIBE TO DEVELOPERS TAKEAWAY!

A Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

DevKinsta โ€“ One Suite For All Your WordPress Development IPWhoIs.io Review โ€“ย Get User Location Data In An Instant Rank Math Plugin For Your SEO Needs
There are currently no comments.

๐Ÿ™Œ You must have something to say here...