# Geo-target website visitors on the client side
### Include your scripts
Within the `<head>` element of the pages you want to include geo-targeting, include the following script:
````javascript
/*
* this first one will be your custom JavaScript for targeting users
*/
<script src="/path/to/file"></script>
/*
* this first one will be your custom JavaScript for targeting users
*/
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>
````
### First API call
The first thing that will happen is your page will make an API call to https://api.ipify.org just by including that script listed above in the `<head>`. The purpose of this API call is to obtain the visiting user's IP address. In the script link, we appended a callback to the URL -- `getIP`. Once the API call is made, it will automatically check your custom JavaScript (first script we linked to above) for a function called `getIP`.
### `getIP` function
This function will be called after the first API call has been made. What we want to do inside this function is first, check to see if the user has a location already stored in `localStorage` in their browser. So let's check this.
First, we'll set a variable to the value of our `localStorage` key named **country**.
````
var countrySet = localStorage.getItem('country');
````
The value of this will determine whether or not we have already stored a location for this user. If the value is set to `null`, then we know that we need to find the user's location. If the value is not set to `null`, then we know we have already logged the location for the user. Let's look at the code:
````
function getIP(json) {
var ip = json.ip;
if(countrySet !== null && countrySet == 'AU') {
window.location='http://myemma.com/australia';
}
if(countrySet === null) {
var url = 'https://freegeoip.net/json/?q=' + json.ip;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onload = reqListener;
xmlHttp.open( "GET", url, false );
xmlHttp.send();
}
}
````
In this code, beginning on line 3, we're checking to see if the `localStorage` value is already set with a country. In this case, we are specifically checking to see if the country is stored as **AU** for Australia. On line 4, we're redirecting the user to the Australian landing page because the location is already stored.
Checking to see if we've already stored the user's location is a wise thing to do because this will save us from making an additional API call to get the location information of the user's IP address.
On line 7, we begin to handle a user that does not have their location already stored in `localStorage`. If the country is set to `null`, then we make an additional API call to https://freegeoip.net with the obtained IP address appended onto the query string.
On line 10, we assign a callback function for when we obtain the location information of the user's IP address.
### I've got the user's location information -- now what?
As I mentioned right before this, we assigned a callback function in our `getIP` function to handle the location information after receiving it from our API call. Let's take a look at the code:
````javascript
function reqListener() {
var jsonReponse = JSON.parse(this.responseText);
if(jsonReponse.country_code == 'AU') {
window.location='http://myemma.com/australia';
}
localStorage.setItem('country', jsonReponse.country_code);
}
````
On line 2, we parse the JSON response that we received from the previous API call in our `getIP` function. On line 3, we check to see what our user's country is for their IP address. If the user's country is the one we are looking for, then we can add our code inside that if statement to do what we want with the user. In this case, we are just redirecting the user to a landing page made specifically for users in Australia.
Right after redirecting the user, we store the user's country in their browser's `localStorage` so we can reference it in future visits to our site without making that second API call again.
## A helpful tool I used when developing this solution was a Chrome extension called **[Hola Better Internet](https://hola.org/)**. This is allows you to view your site from another country's IP address.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.