Country based images (Geo)

Zedge · July 13, 2010, 3:00pm

Dear Sitepoint members and helpers,
I am trying to create a website which has background images specific to a visitors country.
The reason is to display different pricing/currency info.

You can see what I am after at:
http://http://vps.net

The cost that the user sees on the home page is dependent on their location.

What I would be keen to know is the systems/code they have used to do this. I can see that they are changing the body class dependent on the visitors origin, but if anyone can help to give me some more detail / script examples, it would be very much appreciated.

Kind Regards,
Zed.

Zedge · July 14, 2010, 9:28pm

Hi Server Herder,
Many thanks for your reply - I had not seen this before I posted in the php section.
I agree, if it can be done on the server side, then it is better.

So far (as I say in my other post),
I have an implementation which looks like this:


<?php 
session_start();
if(empty($_SESSION['countryCode'])) {
    require_once('geoplugin.class.php');
    $geoplugin = new geoPlugin();
    $geoplugin->locate();
    $countryCode = $geoplugin->countryCode;
    $_SESSION['countryCode'] = $countryCode;
} else {
    $countryCode = $_SESSION['countryCode'];
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
 
<body class="<?php echo $_SESSION['countryCode']; ?>" id="home"> 

<?php echo $_SESSION['countryCode']; ?>
	
</body>
</html>

This has the desired effect and changes the body colour to the .GB class colour. (y)

The next thing I would like to do is to change it to be a bit more like your javascript solution using a class map.

If you are able to help out on the code front, it would be great as I’m a little bit rusty!

I have taken note of your comment:

Client side you don’t have as much control: You can configure the timeout on the server, not the client. Security is also a consideration here. Not to mention overhead caused by the reflows that will occur by setting the body’s class.

In terms of security - do you see any problems with the current direction? Also, what about the reflows to the body class? Is there a better way of doing things?
Also, if you can provide advice on timeout, that would be great too.

I am keen that this script is very clean, secure, efficient and effective as I don’t wnat a simple thing to possibly damage the site. Presumably I need an alternative should contact be unavailable from geoplugin.com?

Many thanks for any help anyone can give.

Kind Regards,
Zed.

ServerHerder · July 14, 2010, 3:53pm

My mantra is typically If it can be done on the server, it should be done on the server.

Client side you don’t have as much control: You can configure the timeout on the server, not the client. Security is also a consideration here. Not to mention overhead caused by the reflows that will occur by setting the body’s class.

Make the call one time server-side and set a session cookie that contains the Geo-info you care about. That way you limit the # of calls to the service easily.

Zedge · July 14, 2010, 11:49am

Hi Immerse,
Thanks for your reply.
It’s a valid point you make.
What I intend to do is to keep the default images i.e. when no body alteration is changed as USD - this way even if JS is turned off, the user is presented with USD by default.
What do you think?

Even though the concept seems to work - perhaps this is something better dealt with serverside.
Geoplugin.com has a webinterface:
http://www.geoplugin.com/webservices/php
What do you think?
I’ll also pose the question in the PHP forum.

Zed.

Zedge · July 13, 2010, 7:19pm

Dear Server Herder,
Many thanks again for your reply. My javascript knowledge is not 150%, but I understand it enough to know that you understand my issue and that the code is along the right lines
I will give it a go and let you know how I get on. In the mean time, if anyone has any other methods/suggestions, I am very happy to hear them.
Jquery will be implemented for the site and I was wondering whether there is a neat method using Jquery along the lines of your method Server Herder?
Thanks again!
Zed.

ServerHerder · July 13, 2010, 4:42pm

Those services probably provide that information by having the client make a call to their service. They can obtain the IP address from this call and then presumably will populate a bunch of JavaScript functions which return those values.

If you wanted to set the class on the <body> based on those calls you could try something like this:


<head> 
<script src="http://www.geoplugin.net/javascript.gp"></script> 
<script type="text/javascript"> 
function getCountryClass(){ 
var classMap= { 
    "US": "unitedstates-skin", 
    "GB": "greatbritain-skin", 
    _default: "default-skin"
}, 
countryCode= geoplugin_countryCode()
; 
if( countryCode in classMap ) 
   return classMap[countryCode]; 
else 
   return classMap['_default']; 
</script> 
</head> 
<body> 
<script type="text/javascript"> document.body.className= getCountryClass(); </script> 
......

Immerse · July 14, 2010, 8:09am

The source code can only be changed on the server.
If you change stuff around with JS, then it will change the DOM, which is the document the browser has built based on the source code it receives from the server.

Don’t worry about it.

Worry about this:
What if a user visits your site, but has their Javascript turned off. They’ll see the default skin, but also the default prices? That might be a bit susceptible to fraudulent activities

Zedge · July 14, 2010, 2:34am

I had a chance to try this out earlier:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />

<script src="http://www.geoplugin.net/javascript.gp"></script> 

<script type="text/javascript"> 
function getCountryClass(){ 
var classMap= { 
    "US": "unitedstates-skin", 
    "GB": "greatbritain-skin", 
    _default: "default-skin"
}, 
countryCode= geoplugin_countryCode(); 
if( countryCode in classMap )
   return classMap[countryCode]; 
else 
   return classMap['_default'];
}
</script> 

</head>
 
<body class="_default" id="home"> 

	<script type="text/javascript"> document.body.className= getCountryClass(); </script>

	<script type="text/javascript"> document.write(geoplugin_region()); </script>

	<br />

	<script type="text/javascript"> document.write(getCountryClass()); </script>

</body>
</html>

The output on my html page is:

London
greatbritain-skin

So essentially things are working.

I have tried creating 2 css classes:

#home.greatbritain-skin  {background-color: blue}
#home._default {background-color: blue}

And for me, the background changes to the correct one which is great.

My query is: - in the http://vps.net example I gave earlier, if you look at the page source, the body class changes in writing to whichever is deemed correct by their geo device. In my code (because js is clientside :D) the source code stays as _default.
Is this correct/good practice?
My other question is whether there is a better way of changing the body tag and carrying out the getCountryClass with jQuery? Generally any other better ways of doing this? Im concerned about cleanliness and efficiency.

Thanks for all of your help
Zed.

ServerHerder · July 13, 2010, 4:12pm

This site provides geo-ip lookup as a service: http://www.maxmind.com/app/web_service

However, Javascript does not provide you with access to the IP address of the client so you’ll need to perform the lookup server-side and either use it to modify the HTML or populate a javascript variable.

The HTML5 specification defines how to obtain location information directly from the client; however, it’s probably not widely-supported for your needs.

Zedge · July 13, 2010, 4:32pm

Dear Server Herder,
Many thanks for your response.

I think there must be a way to do this with JS.
This site for example:

can be used to get a lot of information from a visitors ip

Presumably, one could use the following country code:

geoplugin_countryCode()

  function geoplugin_countryCode() { return 'GB'; }

to return where the visitor is based at and then use an “onload” to do as vps.net has done and alter the body class.
Once the body class has been altered, then it should be possible to manipulate the css based on the clasee e.g. .GB

If anyone has some examples / thoughts / recommendations / succestions - it would be greatly appreciated.

I think google also has a geo api of sorts with which similar things could be done?

Kind Regards,
Zed.