[How-to] Use Geotargeting to Display a Visitors Location on a Page
Want to take the personalization of a page to the next level? Maybe you want to display a visitor’s location on the page or pre-fill a city/ region form field.
Now you can using a FREE IP lookup database called GEOLOCATION DB and all it takes is a simple AJAX call and some basic JS. Even better, it’s written for you!
You can see this in action (built in Unbounce) here:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
UPDATE
Step 0
Geolocation DB now requires users to signup in order to use their service. It’s a free signup that will give you a unique API key that must be included in the URL in the code that makes the request to get the location of a visitor.
Once you’ve signed up for a free account you will wan to use the jsonp URL that is provide. It should look something like this:
Copy this JavaScript and add it to the page “before body end tag”:
REMEMBER TO UPDATE THE URL
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery.ajax({
url: "https://geolocation-db.com/jsonp/tYOUR API KEY]",
jsonpCallback: "callback",
dataType: "jsonp",
success: function( location ) {
var country = location.country_name;
var region = location.state;
var city = location.city;
var lat = location.latitude;
var long = location.longitude;
// add classes to display location info on page
//City
jQuery(".cityText").text(city);
//Region
jQuery(".regionText").text(region);
//Country
jQuery(".countryText").text(country);
}
});
</script>
Step 2.
Decide on the text you’d like to use to dynamically display the location information (the AJAX call will make available the country, region, city, latitude, and longitude information from a visitors IP).
Double click the text box and click the “view source” button in the bottom right. Wrap the text you wish to be dynamic with a span and assign the relevant class to display the location information. Here’s a screenshot of what that would look like to display the city info:
####The Default classes for the script are as follows. You can change them if you wish, just be sure to update the javascript to match!
City = "cityText"
Region = "regionText"
Country = "countryText"
Step 3. OPTIONAL Prefill Form Fields with Location Information
You can pre-fill a form field or preselect a dropdown (as long as the option exists) by adding some code to the script. Make sure the ID of your field in the form matches the ID in the code below (you can edit either or both to match):
> $("#cityField").val(city);
> $("#provinceField").val(region);
> $("#countryField").val(country);
Step 4. OPTIONAL Add a Google Map Displaying the Visitors City
Add a custom HTML widget to the page and paste in the following div tag:
<div id="map-container"></div>
Then paste in the following code into the script. Note you can change the size of the map by adjusting the “height” attribute of the iframe:
We tried using a paid service (MaxMind) to locate our visitors and match them to the nearest campus. It was not accurate enough for us to implement it. See the thread below for more details.
I would be interested in learning about the accuracy of GEOIP-DB. My guess is that if it’s free, it’s less accurate than paid services.
I used MaxMind originally for this scrip actually without realizing it was a paid service (someone must have registered unbouncepages.com). As soon as I realized it was paid I started looking for alternatives and found GeoIP-DB. I’ve tested it with a few services that emulate traffic from different locations and it’s faired well:
IP location though in general won’t always be 100% accurate as there is no way to account for VPNs, proxys, and a whole bunch of other stuff as you know I’m sure. And of course you’ll always be reliant on someone else’s database of existing IP addresses and the corresponding information.
In the limited testing I’ve done with GEOIP-DB though I haven’t seen it miss yet. Full transparency though I haven’t tested this in rural areas or locations where ISP coverage is limited. So it’s not going to be the best solution for everyone.
There are other ways to achieve a similar end result though (granted with a bit more work). For example, you can target your ads based on region if you’re running PPC and use Unbounce’s DTR feature to swap text out based on the specific ad or region.
As with anything though you’ll want to test to make sure it’s doing what you need and expect it to do.
Nice results! Glad to see you tested this as much as you did.
I am on a company IP that spans all of our locations (15 cities). GeoIP-DB matched me to the correct location. Not sure if it was just luck, or if GeoIP-DB has some more sophisticated geo-mapping than simply the IP address.
I know Google’s Geolocation API service uses cell tower data as well. But that wouldn’t help in this instance since I am on a desktop.
Hi Rob,
Thank you for adding this feature. I am not sure what I am doing wrong, but I can not get the city name to show up no matter what. I copied and pasted the java script in the page and used exactly the same format in the text replacement and nothing shows up. I would appreciate any help,
Regards,
Hey @Samir sorry to hear you’re having some trouble. I’m happy to take a closer look for you. Could you share the URL of your page and I’ll have a look for you.
Please note that I also added the optional map and that is not showing up in my page either.
Any help will be appreciated.
Thank you,
hey @Samir I got this working for you on the page. This one is actually my fault as the instructions aren’t as clear as they could be. The map code needed to be wrapped in the existing AJAX function. I made that change for you and the map is displaying now 🙂
Hi @Rob, Thanks for fixing the map, however the city name is still not showing up in the title. Can you please take a quick look at that too?
Thanks so much
Samir
Hey @Rob, sorry to bother you again. Any update on the location/City name not showing up in the headline issue? Thank you!
Where are you testing from? It might be that for whatever reason your specific location isn’t part in the GeoDB database of IP addresses. Or if you’re on a network that uses a proxy or a VPN setup that could certainly have an impact.
I hope this at least supplies some peace of mind for you. The code does appear to be working correctly, so the either the IP you’re on isn’t part of the GeoDB database or it’s being masked/blocked and isn’t visible.
Try running the URL through some similar location testing services to see if you get similar results. Let me know if there is anything I can do to help!
Hi @Rob, Thank you for this great information, Yes you were right! For some reason, our IP is not allowing the location to show.
Once I put it on LTE on my phone I was able to see the location, however the location name it is showing me (and my colleague’s mobile device) is about 65 miles away! I am not sure if this is due to iphone’s location identifier on our phones, but since majority of today’s users convert on their mobiles, if we can do a more generalized region name it will be more helpful, otherwise, this information might actually hurt the conversion rather than helping it.
Thanks again, and if you have any suggestions will be glad to hear them.
Regards
Mobile traffic will definitely be less accurate due to the way mobile networks work, especially for smaller towns that are close together (often sharing a single cell tower). For example you could be connecting via a cell network in that city 65 miles away.
There is a more general region available though. All you need to do to access that instead is change the class of your span tag to be ‘regionText’ instead of cityText and you’ll be all set 🙂
Hi @Rob, Thanks so much. I will try the region option for sure.
Additionally, I’ve inserted the map element which I’d like to use.
The script says .cityText whilst the span codes use cityText. Could that be the issue.
Could you be so kind as to view the page, the script and make a recommendation please?
Thank you
Hi @Carl_Duncker! I’ve had a look and there was a small syntax error in the code you had in script manager (the map code was sitting outside the main function which was throwing an error). I jumped in and fixed that syntax issue for you and the script is working now.
One thing I noticed though is that the length of the text for my region was causing a display issue in the headline as there wasn’t enough space for it to display in place of “England”. Here’s a screenshot so you can see what I mean: https://www.screencast.com/t/3kZTeUH9d
I disabled the script in script manager for now until you have a change to play around with the spacing for text on the page. It’s working now though and is still in the account, just not being applied. Once you’re ready just hop into script manager and enable the script to have it start working.
Let me know how it goes!
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.
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.
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.
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
@Rob, hi. I’m curious. Can this script be used to push the location into an hidden field? Thanks.
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!
to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks