SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Country based images (Geo)

    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.

  2. #2
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Server Herder,
    Many thanks for your response.

    I think there must be a way to do this with JS.
    This site for example:
    http://www.geoplugin.com/quickstart
    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.

  4. #4
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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> 
    ......

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a chance to try this out earlier:

    Code:
    <!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:
    Code:
    London
    greatbritain-skin
    So essentially things are working.

    I have tried creating 2 css classes:

    Code:
    #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 ) 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.

  7. #7
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    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

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <?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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •