February 1st, 2010

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.


You should follow me on twitter here

Tags:
Categories: javascript

Previous post:

Share the love

Comments

Feel free to join the discussion, or trackback.

Tom says:

I’m a jquery n00b. I’d really like to use this IP detection to determine which version of amazon links to show to a user for my site. Can you show me how to modify the code to do that?
 Thanks

Phil says:

Hi Tom, sounds like a good use of Geolocation, I will come up with something and post it.

Maor says:

Looks like a good plugin to use.
Is there a way to auto generate the country list for the select box?

Thanks

Imtiyaz Quraishi says:

Hi Phil and Tom,
I tweaked your code a little and came up with this. The code below uses only the json function to display the divs or content based on the users ip address..

script:

$(document).ready(function() {
$.getJSON(‘http://api.wipmania.com/jsonp?callback=?’, ”, function(json) {
//set the country to users current location
$(‘#’+json.address.country_code).show();
});
 });

HTML code:

Afghanistan Job Opening 1
Afghanistan Job Opening 2

India Job Opening 1
India Job Opening 2

Saudi Job Opening 1
Saudi Job Opening 2

Imtiyaz Quraishi says:

I totally forgot that the browser will render the code. Here is an update:

Script:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$.getJSON(‘http://api.wipmania.com/jsonp?callback=?’, ”, function(json) {
//set the country to users current location
$(‘#’+json.address.country_code).show();
});
});
 </script>

HTML Code:

<div id=”showCountryDiv”>
<div id=”AF” style=”display:none”>
Afghanistan Job Opening 1<br/>
Afghanistan Job Opening 2
</div>
<div id=”IN” style=”display:none”>
India Job Opening 1<br/>
India Job Opening 2
</div>
<div id=”SA” style=”display:none”>
Saudi Job Opening 1<br/>
Saudi Job Opening 2
</div>
 </div>

Phil says:

Hi Imtiyaz,

Thanks for your comment and code, I think this makes a nice addition to the script. I will have a look at adapting the plugin so you can select other elements as well as a drop down list.

Phil

Phil says:

Hi Maor.

I would not suggest auto generating the country drop down with javascript as if the user does not have javascript enabled they would not be able to use the drop down. However you could look at feeding in data from a 3rd party and generating from the server side.

I would still make sure you have a default stand by option in case the 3rd party is not available.

Phil

Martin says:

Hello.
Thanks for the code. How can i intregrate the code that Imtiyaz made with the original code so i get a code that works like the following:

-Autodetect which country you are in
-select a language from the dropdown and the div will change to the div with the same lang id tag.

I am a Jquery uber noob and all help is welcome -Thanks

thomas says:

Well done, this is exactly what I was looking for. Unfortunately, I cannot see were at the jquery page I could download it. The downloads section fo the plugin leads to a page about patches. Thx for any help.

thomas says:

took it already from the examples and it works totally fine. thank you and the bear!

Phil says:

Hi Thomas,

Glad you liked the code and thanks for comment, there is a very happy teddy bear over here :-)

cardbaba says:

i was looking for this one..
thank you so much for sharing

Phil says:

My pleasure cardbaba, glad I could help

how to treat hypothyroidism says:

how to treat hypothyroidism…

Increase your conversion rates through geolocation | We love nice things…

App-Rank.org says:

App-Rank.org…

Increase your conversion rates through geolocation | We love nice things…

buy twitter followers says:

buy twitter followers…

Increase your conversion rates through geolocation | We love nice things…

pop up display booths says:

pop up display booths…

Increase your conversion rates through geolocation | We love nice things…

get your ex back says:

get your ex back…

Increase your conversion rates through geolocation | We love nice things…

stop masturbating says:

stop masturbating…

Increase your conversion rates through geolocation | We love nice things…

peeler says:

peeler…

Increase your conversion rates through geolocation | We love nice things…

visit the following webpage says:

visit the following webpage…

Increase your conversion rates through geolocation | We love nice things…

please click the up coming document says:

please click the up coming document…

Increase your conversion rates through geolocation | We love nice things…

burberry バーバリー ポーチ says:

burberry バーバリー ポーチ…

Increase your conversion rates through geolocation | We love nice things…

Foot Arch Support says:

Foot Arch Support…

Increase your conversion rates through geolocation | We love nice things…

Brandon says:

which is the list of countries that returns?

Join the conversation

Head of teddy bear appearing over the footer