Increase your conversion rates through geolocation

One of the most annoying things I find when filling in my address online is selecting the country. I have to search through a massive list and coming from the UK I have no idea if I need to find “United Kingdom”, “Great Britain”, “England” or some other variant. If I struggle occasionally with this (and I’m a web developer) other users must also find it hard.

What can we do to fix it?

Geolocation allows us to find out the user’s location, if we can use this technique to find a user’s country we can automatically choose which country to select in the country drop down list. Geolocation does not always work so the choice could be wrong. Also the user may want something delivered to a different country to what they are in. However, automatically selecting the country would be very helpful to a user in most cases.

Using a geolocation service which offers an API I have created a jQuery plugin which will automatically select a country based on the user’s current location. I will now go through the javascript examples arriving at the final plugin.

Example 1

Example 1 is a simple script that uses the Wipmania API to find the users current location and automatically select the user’s country in the country drop down list. The current default is set to Afghanistan (which at a guess is a country most people reading this will not be in).

The country drop down list (a SELECT element) has a large country list (of OPTIONS). Each option has a value which corresponds to the country’s ID from the API, i.e:

<option value=”UK”>United Kingdom</option>

These codes are based on the ISO 3166 standard (I think).

We will use javascript and the jQuery framework to find the user’s location and set the correct country as follows:

$.getJSON('http://api.wipmania.com/jsonp?callback=?',
                                   '', function(json) {
    $('select#country option[value='
                 + json.address.country_code + ']')
                 .attr('selected', 'selected');
});

We call the API using the jQuery getJSON function. To add a callback function to the Wipmania API you add the name of your callback function as part of the query. To do this in the jQuery function you add a question mark to the end of the URL and then add the callback function as a parameter.

Have a look at example 1 and see the country box change.

This approach also means that if you want to change a country name, for instance use “Great Britain” instead of the “United Kingdom” you change the name of the option but keep the value attribute the same, i.e.

<option value=”UK”>Great Britain</option>

Example 2

Calling an API each time for the same user would cause an unnecessary drain on the API so you should store the data you find in a cookie and use that next time rather than calling the API again.

Example 2 shows this with the following script

if ($.cookie("AddressCountry_ex2") == null) {
    $.getJSON('http://api.wipmania.com/jsonp?callback=?',
                                     '', function(json) {
        $('select#country option[value='
              + json.address.country_code + ']')
              .attr('selected', 'selected');
        $.cookie("AddressCountry_ex2",
               json.address.country_code);
    });
}

Example 3

Calling an API through javascript could lead to a situation where the user chooses the country before the API returns the information needed for us to choose the country field for them. If the user selects a different country to what the API returns and we override their decision it would be very confusing for the user.

As a result, example 3 now adds a click function to the country select box where if the user chooses a country we add this to the cookie:

$('select#country').click(function() {
    $.cookie("AddressCountry_ex3", $('select#country').val());
    isClicked = true;
});

We also have a variable “isClicked”, this is set to “true” and in our callback from the API we check this is false before setting the country drop down box, otherwise we use the value the user has already selected:

if ($.cookie("AddressCountry_ex3") == null) {
    $.getJSON('http://api.wipmania.com/jsonp?callback=?',
                                     '', function(json) {
        if (!isClicked) {
            $('select#country option[value='
                       + json.address.country_code + ']')
                       .attr('selected', 'selected');
            $.cookie("AddressCountry_ex3",
                          json.address.country_code);
        }
    });
}

Example 4

The final example takes all of the above and turns it into a jQuery plugin, you can now call the plugins as follows:

$(document).ready(function() {
    $('select#country').CountryLocator('my_cookie');
});

Where “select#country” is the drop down country list and “my_cookie” is the name of the cookie you want to use.

The plugin is available from the jQuery website.

Is this not a bit Big Brother?

I do not think people will mind their country being selected as it is very high level information. It is possible to find out more detailed information like State or County and this could unsettle people and I think more research would be needed to see if people are concerned and the best method to deal with these issues.  A button with “Find my location” at the top of an address form which is automatically filled by some javascript may be an option.

Going forward

This is a nice easy example of progressive enhancement for a website significantly increasing the usability of a common problem in web forms. Calling an external API like Wipmania for a very busy site would not work, instead you would want to move this to the server side if possible or call your own server for an AJAX call. You can get a free database export from IPInfo DB if you wanted to do this.

You may also want to look at extending the functionality to give more detailed location but be mindful of any big brother connotations as discussed above. It would be interesting to hear any comments you may have on this.