[How-to] Use Geotargeting to Display a Visitors Location on a Page

widget
add-on

#21

That’s great. Thank you.

The geo-location is working but the embeded map isn’t. It simply doesn’t show. The custom html is there though.

Can you help?

Many thanks,


#22

Any joy @Rob?

Thanks


#23

Hey @Carl_Duncker my colleague @Noah figured this one out! Looks like you’ve got two different div tags with the #map-container ID on the page and one is currently hidden in the builder. What’s happening is that the script is only populating one of these divs with the map iframe. The one being populated is the hidden one which is why you’re not seeing it on the page.

The solution would be to remove the hidden div so that there is only one on the page.

Let me know how it goes!


#24

Hello @Rob,

This looks great but is it possible to pull the timezone based on the IP address? We want to display a specific time based on the location of the user.

Thank you.


#25

Hi @AlanJ unfortunately the specific timezone of the region the IP is located in isn’t something made available by the IP database from GeoIP-DB. It is possible to get the local timezone of the client browser though using some more custom javascript.

I don’t have any prepared workarounds for this at the moment I’m afraid. If I can somehow manage to find the time to take a shot at it I will, but can’t promise when that will be. In the meantime this Stackoverflow article has some potential solutions: https://stackoverflow.com/questions/6939685/get-client-time-zone-from-browser


#26

@Rob, hi. I’m curious. Can this script be used to push the location into an hidden field? Thanks.


How to capture a visitor's country in a form?
#27

Hi @Adrien it sure can! You’ll just need to add a line of code to push the value of the region into a field. For example to do this with a city you could have a hidden field in the form with an ID “city” and use the following line of code:

$("#city").val(city);

Just make sure that the line of code is in the success function of the ajax call and you’ll be all set!


#28

@Rob, I can not believe it. It just works! Thanks. Thanks. Thanks!


#29

Hello
I tried at
https://pertodesi.audicaoactiva.pt/loja/
But no results.
Did I miss something?

Thank you


#30

Hi @toniomorais it looks to be working for me. Here’s a screenshot: https://www.screencast.com/t/gvio3H7R8rr What are you seeing on the live page?


#31


Could be maybe because i’m in Portugal and database from GeoIP-DB don’t have any data on Portugal?
or I have to change something in script to say that are portuguese cities?

Thank you


#32

It is possible that GeoIP-DB doesn’t have data for Portugal. To be honest though I’d be surprised if that were the case as this they have data for much smaller countries. An easy way to test though is to go to this URL https://geoip-db.com/jsonp/ If GeoIP-DB has the data it will display the location information for where you are on the screen in json.

A potential cause could be if you have an internal firewall or proxy server set up from where you are testing from. Anything really that masks or hides your IP could cause issues when testing. Before giving up on this as a possible feature I’d recommend trying to test from different locations in the country. Perhaps you can send the link to some colleagues or friends in different places to see if they get the results?

Hope this helps a bit! Let me know if you have any luck.


#33

Thank you for you suggestions.
This was the result:

callback({“country_code”:“PT”,“country_name”:“Portugal”,“city”:null,“postal”:null,“latitude”:38.7139,“longitude”:-9.1394,“state”:null})

It identifies the country but not the city.

Is there a way to make this work using for example maxmind ? Because I know maxmind shows the Portuguese cities.

Thank you


#34

It’s possible that GeoIP-DB simply doesn’t have the city data for the specific IP you’re on other than the region. Although that’s pure speculation on my part. It really depends on what exists in their database which I don’t have direct access to.

It is absolutely possible to make this work with MaxMind, in fact that’s the service I originally created the workaround with. The downside (and the reason I changed it to GeoIP-DB) is that MaxMind is a paid service and you’ll need to register the domain with them before they will allow the API call to go through. If you are ok with paying for their service though I can say that it does work. Another caveat to this though is that I never tested it in Portugal so it’s possible that MaxMind will have the same issue as GeoIP-DB and not have the specific city data for Portugal.

If you do decide to go with MaxMind let me know though and I can DM you the code I originally used as that’s specific to the MaxMind API.


#35

Hello and thank you for the support.

Yes I would like to use the code to use with MaxMind.
I know that Maxmind Have data about Portugal cities.

Thank you


#36

Sorry for the delayed reply here @toniomorais. Here’s the original example page I created using MaxMind (it works because unbouncepages.com is registered with their service): http://unbouncepages.com/location-example/

The first step to get it working is to include the maxmind js library via a CDN link. Place this in the head of the page:

<script src="//js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script>

Then you can use the following code to apply the location data to the page. See the comments in the code for a more in depth explanation of what each part does:

<script>
  var getCity = function(el) {
    var cityContainer = $(el);
    
    var updateCityText = function (geoipResponse) {
      //get city, if on city available use the default "your city" 
      var cityName = geoipResponse.city.names.en || 'your city';
      
      //get region
      var regionName = geoipResponse.most_specific_subdivision.names.en;
      
      // combine city and region on page
      var city = cityName;
      if (cityName && regionName ) {
            city += ', ' + regionName;
        }
      
      // swap city on page
      cityContainer.text(city);
      
      // optional fill form fields with city value
      $("#city").val(cityName);
      $("#province").val(regionName);
      
      // Google map
      var frame = '<div class="embed-container maps"><iframe width="100%" height="481px" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBvWSn-wEccZ_YSMG-xW7CfyaecyV1j0uA&q='+cityName+'+'+regionName+'" allowfullscreen></iframe></div>'
      
      $("#map-container").html(frame);
         
    };
 
    var onSuccess = function (geoipResponse) {
      updateCityText(geoipResponse);
      console.log(JSON.stringify(geoipResponse, undefined, 4));
    };
    
    // If error show in console
    var onError = function(error) {
      console.log(JSON.stringify(error, undefined, 4));
    };
    geoip2.city(onSuccess, onError);
  };
  
  // Add ID or class of element to swap cit with (i.e. the textbox you'd like to display the location info in)
  getCity(".swap");
  
</script>

Hope this helps getting you started. Let me know here or feel free to direct message me if you hit any snags.


#37

The sample URL looks to not be working correctly and I feel like the script doesn’t work anymore. Can anyone confirm this for me?


#38

Hello,

We have 7 phone numbers (covering 7 world regions) and we would lke to use this to identify what country a visitor is in to show the corresponding phone number.

How would you do this?

Thank you @Rob !!


#39

Hi @EthosData! You’d need to write some more code to conditionally display the phone number based on the country. Something like this might work:

if (country == “name of country”) {
// display phone number
} else if (country == “name of other country”) {
// display different phone number
}

The above is just some psuedo code to get you started. You’ll need to target the html that is displaying the phone number and change the content with javascript.

Hope this helps!


#40

Thank you @Rob