Personalize Your UX By Location Using IPstack's Geolocation

Celý článek

Which site is better? This is the age-long question that many website owners are still trying to answer so they can dominate their niche.

Take a look at Google Search — there's no denying that it is the most visited search engine/website in the world. It begs the question of why people keep going back to it and the answer is quite simple.

They are not just good at what they do, they also care about their users (well...to an extent).

Google's search uses a ranking system that decides the result for a user's search. This system uses their location, speed of websites with search query content and a quadrillion other factors and does this in real-time too. The search the user asked for is now "personalized."

What is Personalization

Personalization is a means of meeting the customer's needs more effectively and efficiently, making interactions faster and easier and, consequently, increasing customer satisfaction and the likelihood of repeat visits

☝☝ That's the boring definition

Personalization simply means building a website that's unique to a user.

This article with show you how to use the user's location using IPstack's geolocation service.

What is IPstack

Ipstack.com is a provider of real-time geolocation data. The API is used by developers, SMBs and even large corporations all around the world in various implementations. The API covers more 2 million unique locations in more than 200.000 cities around the world and provides up-to-date data based on rock-solid sources.

I think that the fact that companies like Samsung, Airbnb, Microsoft and many other big names like this use their service speaks volumes of their reliability.

It is also free to use for up to ten thousand lookups monthly no credit card required.

The thing is, there's so much you could do if you have a user's location. You could decide to use a language specific to that users' location, give them results based on their surroundings, even the little things like congratulating them on a yearly festival only in their region. There's so much more, but, let's not get crazy.

Another common use of geolocation in personalizing a user's experience is location restriction. Take Netflix for example, they are not allowed to show certain movies in some countries, so this is where geolcation helps them out.

Getting started

The first thing you need to do to get started using IPStack is to head over to the website and create a free account (no credit card required).

After creating a free account, you can find the API key on the dashboard. It looks like an MD5 string or a bunch of hexadecimal characters, this is mine:

d89c9f9821b1972eeb19ca7fa1c5d656

Don't worry, this key above won't work as it is now deactivated

To check a the data behind an IP, just make an HTTP request to:

http://api.ipstack.com/134.201.250.155?access_key=YOUR_API_KEY_HERE

You can literally post it in the browser and get a response.

How to get a user's IP address in JavaScript (browser)

It's almost impossible to get a users' IP address in the browser. There are ways around it, but it involves you making multiple HTTP requests.

How I did it for an old project

1. Make a request to ICANHAZIP
2. Pass the IP address to the IP service.

We can say this works, but it introduces latency and according to our article on Improving JavaScript application performance we learnt that less requests means faster apps.

How to do it with IPstack

With IPstack, all you need to do is change the process above to:

http://api.ipstack.com/check?access_key=YOUR_API_KEY_HERE

We are no longer passing the IP address to IPstack. They'll help get the users' IP address and give you the location of the user.

The response

When you run the request, you might get a response similar to this.

{
  "ip": "134.201.250.155",
  "hostname": "134.201.250.155",
  "type": "ipv4",
  "continent_code": "NA",
  "continent_name": "North America",
  "country_code": "US",
  "country_name": "United States",
  "region_code": "CA",
  "region_name": "California",
  "city": "Los Angeles",
  "zip": "90013",
  "latitude": 34.0453,
  "longitude": -118.2413,
  "location": {
    "geoname_id": 5368361,
    "capital": "Washington D.C.",
    "languages": [
        {
          "code": "en",
          "name": "English",
          "native": "English"
        }
    ],
    "country_flag": "https://assets.ipstack.com/images/assets/flags_svg/us.svg",
    "country_flag_emoji": "????????",
    "country_flag_emoji_unicode": "U+1F1FA U+1F1F8",
    "calling_code": "1",
    "is_eu": false
  },
  "time_zone": {
    "id": "America/Los_Angeles",
    "current_time": "2018-03-29T07:35:08-07:00",
    "gmt_offset": -25200,
    "code": "PDT",
    "is_daylight_saving": true
  },
  "currency": {
    "code": "USD",
    "name": "US Dollar",
    "plural": "US dollars",
    "symbol": "$",
    "symbol_native": "$"
  },
  "connection": {
    "asn": 25876,
    "isp": "Los Angeles Department of Water & Power"
  }
  "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
  }
}

As you can see from the response above, you can see that IPstack returns a lot of information that we can use to enhance our user's experience.

GDPR compliance

If you haven't heard of GDPR, chances are that you might either fall into their trap or don't need it.

GDPR (General Data Protection Regulation) is a law that aims to protect the privacy of users in the European Union.

GDPR essentially prevents companies like Cambridge Analytica from gaining access to your data.

I asked an IPstack representative and they are GDPR compliant, so no worries there.

Conclusion

If you are concerned with speed, I did a bunch of tests on IPstack's response time and it happens in an average of 82ms on a slow network. For simplicity and scale, IPstack is a no brainer.

One more thing before ending this article, you should probably put your IPstack API behind a server. What I mean is you instead of making a direct request from the browser to IPstack, make a request to your own route — thus, safe-guarding your API key on your own server.

I talked to their reps and there's no way to handle that at the moment, but, they gave assurances that they'll get it done.

The UX enhancements knowing a users' location allows is near-infinite, so go build something awesome.