How to: geolocation-based redirect in JavaScript

JavaScript frontend integration is one of IPinfo's most popular integration methods. It is easy to setup and helps you customize the experience for your users within a few hours. In this post, we'll try to build one such integration using some best practices.

To get started, please logon to IPinfo.io and create an account to get started. Our free account has 50,000 API requests, making it perfect for starting out. Our API, however, can scale to billions of requests while being most accurate. Read more about our accuracy here. Once you have logged onto your IPinfo account, you should be able to look up your API key from the dashboard. Keep that API key handy as it'll come into play soon.

In the examples ahead, we will detect the country of the user/browser client IP and redirect them to a country-specific URL. To get this information, we'll hit IPinfo using an AJAX call and then use the response.

A common question is how do I know my IP so I can find which country it belongs to. Detecting your/client's IP on the internet isn't straight-forward. On the internet, you are given an IP by your Internet Service Provider which may change. You may use services like What is my IP to know your IP. Fortunately, your IP is sent to servers for every request you make to that server. So when you make a call to IPinfo, we already know your IP, this makes the integration even simpler.

The first step is to check the response. This will give you a sense of the data being sent back to your IPinfo.

Navigate to https://ipinfo.io/json?token=<YourToken>. The response should look like this:

The country key of the JSON response has the country details which we require.

Note: If you do not get a valid response or have the key "readme" with value "https://ipinfo.io/missingauth", your token isn't configured properly or is having problem fetching your account details.

Please verify that the token code is correct or contact our support team.

After successfully verifying our API credentials and response, the next step is implementation.

Using IPinfo's API requires a HTTP call to IPinfo.io in either a jQuery or ES6 fetch.

$.get('https://ipinfo.io/json?token=<YourToken>', function(data) {
    console.log('Response', data);
});

Fetching these details and logging it to the console allows users to run an initial test. A solution based on fetch API would look like this:

fetch('https://ipinfo.io/json?token=<YourToken>')
    .then(res => res.json())
    .then(data => console.log('Response', data))

To get IP address using JavaScript; access data.ip from the response data.

To setup a redirect using the country data now is super simple! The jQuery example for it followed by the fetch API version.

$.get('https://ipinfo.io/json?token=<YourToken>', function(data) {
    window.location.href = '/welcome?country=' + data.country;
});

fetch('https://ipinfo.io/json?token=<YourToken>')
    .then(res => res.json())
    .then(data => {
        window.location.href = '/welcome?country=' + data.country
    })

This will redirect an US user to /welcome?country=US and an UK user to /welcome?country=UK.

Wahoo! And just like that, you can redirect to different pages based on their IP's country.

While this works, we do not recommend using this version on a production site. There are a couple of better optimizations that can help reduce your costs and speed up your site.

No more bots!

The first optimization is to filter out all the bots so you don't end up using your API limits to get their country codes. Here's how you can filter out bots using JavaScript in the browser.

if (navigator.userAgent.match(/bot|spider/i)) {
    //Request is a bot, do nothing
} else {
    fetch('https://ipinfo.io/json?token=<YourToken>')
        .then(res => res.json())
        .then(data => window.location.href = '/welcome?country=' + data.country)
}

Great! You've now filtered out bots so your monthly requests aren't eaten up by nosy machines.

Remember me

Next, let's look at how and when to make the requests to find more ways to optimize the API. The https://ipinfo.io/json responds with the data associated with the current IP making the request i.e. the client browser. Most users integrate IPinfo at a site level and try to check for IP addresses on all pages. The problem is that if your site visitors typically visit multiple pages, you'll soon run out of the 50,000 free API requests. In short, a good solution shouldn't query for data you already have. That's where caching comes into play.

if (navigator.userAgent.match(/bot|spider/i)) {
    //Let's check if we have the value in localstorage
    if (localStorage.getItem('country')) {
        //Already have the value in localStorage, no need to make a call to IPinfo
        window.location.href = '/welcome?country=' + localStorage.getItem('country')
    } else {
        // No cached data, let's get it from IPinfo
        fetch('https://ipinfo.io/json?token=<YourToken>')
            .then(res => res.json())
            .then(data => {
                //We have the data, let's cache it in localStorage before redirecting
                localStorage.setItem('ipinfo', data.country)
                window.location.href = '/welcome?country=' + data.country
            })
    }
}

And there you have it! An optimized, performant integration for IPinfo's API using JavaScript.

Note: You may also use cookies instead of localStorage and have expirations to refresh their location information on a periodic basis.

Can you think of more optimizations? We would love to know about them!