How To Create A Simple Geo Redirect Using Javascript

Making sure your website is global ready is key to growing traffic. There are plenty of paid solutions out there that can help site owners get going straight away for example GeoTargetly. However, this guide will focus on helping you create your own simple geo redirect script to add to your website.

To start with you will need a GeoLocation api to connect to but don’t worry there are plenty to choose from with good free limits.

1. ipstack

Limitations:

• 5,000 requests per month
• Requires IP address parameter
• Requires registration to get your API key
• No SSL (https) with the free plan

ipstack - Free IP Geolocation API

2. IP Geolocation API

Limitations:

• 1,500 requests per day
• Requires registration to get your API key
• Requires SSL (https)

IP Geolocation API

3. ipapi

Limitations:

• 10,000 requests per month
• Requires registration to get your API key
• No SSL (https) support

ipapi - IP Address Lookup and Geolocation API

The Javascript

A simple fetch request will get this done, for example:

let apiKey = '1be9a6884abd4c3ea143b59ca317c6b2';
let url = 'http://api.ipstack.com/<ip_address>?access_key=apiKey //Change the apiKey and url to match the details provided by your chosen geolocation api provider.
// Make the request
fetch(url)
  // Extract JSON body content from HTTP response
  .then(response => response.json())
  .then(data => {
    console.log(JSON.stringify(data, null, 2))
    // Now something with the JSON response
  });

This will of course expose the api key to all your web visitors so you will have to weigh up whether it is worth supplying the data creating a simple server-side app i.e. using Google Cloud Functions, AWS Lambda, etc. Some paid plans offer URL restrictions so you can allow the api key to work only for the domains you specify.

Next you will want to extract the data you want to determine whether you need to redirect the visitor and to where.

An example response to the above fetch:

{
  "ip": "116.12.250.1",
  "type": "ipv4",
  "continent_code": "AS",
  "continent_name": "Asia",
  "country_code": "SG",
  "country_name": "Singapore",
  "region_code": "01",
  "region_name": "Central Singapore Community Development Council",
  "city": "Singapore",
  "zip": null,
  "latitude": 1.2931,
  "longitude": 103.8558,
  "location": {
    "geoname_id": 1880252,
    "capital": "Singapore",
    "languages": [
      {
        "code": "en",
        "name": "English",
        "native": "English"
      },
      {
        "code": "ms",
        "name": "Malay",
        "native": "Bahasa Melayu"
      },
      {
        "code": "ta",
        "name": "Tamil",
        "native": "தமிழ்"
      },
      {
        "code": "zh",
        "name": "Chinese",
        "native": "中文"
      }
    ],
    "country_flag": "http://assets.ipstack.com/flags/sg.svg",
    "country_flag_emoji": "🇸🇬",
    "country_flag_emoji_unicode": "U+1F1F8 U+1F1EC",
    "calling_code": "65",
    "is_eu": false
  }
}

You will only need the country code from this response to create the geo redirect"country_code" . A full list of the ISO 3166–1 alpha-2 country codes can be found here: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 For example if you wanted to check if a user is from the United Kingdom, the country code would be UK. Now develop the fetch request as follows:

fetch(url)
  // Extract JSON body content from HTTP response
  .then(response => response.json())
  .then(data => {
    var countryCode = data.country_code;
    if (countryCode === 'UK') {
      window.location = "https://www.example.co.uk"; // UK site link here
    } else if (countryCode == 'US') {
      window.location = "https://www.example.com"; // US site link here
    }
  });

This code simply checks the visitors country code and then redirects them to the correct website.

You can see the full code in action here:

https://uk.printframeco.com