Geo-Customizing
Customize your content based on the visitor's location
What is Geo-Customizing ?
Geo-customizing is a tool provided with your Web-Stat account that allows you to automatically adapt and customize your web site's content to a visitor's geographical location ; there are many reasons why you might want to do this:
Prevent SPAM
Show a GDPR compliance message to EU visitors and EU visitors only
Target the products you present to your audience
Customize the banners you display on your site so that they are only shown to visitors from certain states or countries
Block people outside of your sales area from accessing your site (to cut down on useless support request for instance)
The list is long so we'll stop right here!
Here is what one of our clients had to say about Web-Stat Geo-customizing:
S.J.Haenn
PopUpPortal.com
And here is what another client says on her own site
What are the requirements ?
In order to use Geo-customizing, two conditions must be met :
You need to have a account or above. If necessary you can upgrade here.
You need to use the tool on your own site. Geo-customizing for your account will only work for the URL that you entered in the Settings.
How do I implement Geo-customizing ?
Edit your site's HTML and place this in the <head> section:
The script will create a global JavaScript object named GEO with the following data.
var GEO = { "ip": "Visitor's IP - example: 74.244.143.12", "country_code": "Visitor's 2-letter country code - example: US (see list here)", "country_name": "Visitor's country name - example: United States", "is_eu": "Whether the visitor is connecting from the EU: 1 if he is, 0 if he is not", "region": Visitor's region/state name - example: South Carolina "city": "Visitor's city name - example: Charleston", "post_code": "Visitor's postal code - example: 29200", "latitude": "Approximate visitor's latitude - example: 32.8255", "longitude":"Approximate visitor's longitude - example: -79.968", "isp": "Visitor's ISP - example: AT&T Internet", "referer": "The visit's referrer if any - example: http://www.google.com", "last_visit_time": "UNIX timestamp of previous visit by this visitor, if any", "seconds_since_las_visit": "Number of seconds since last visit by this visitor, if any", "n_visits": "number of visits by this visitor", "error": "Any error, normally empty." }
You can then use the GEO object on your page to display customized content.
Example 1
Imagine that you have three banner ads : one for California (banner_ca.gif), one for Texas (banner_tx.gif) and one for the rest of the world (banner_generic.gif). You want to display the Texas banner to visitors from Texas, the California banner to visitors from California, the generic banner (banner_generic.gif) to anyone else in the US, and nothing at all for people who are not in the US. Here would be the code to add to your page at the place where you want the banner to appear :
<img src="" id="banner" alt="Banner Image" style="visibility:hidden;"> <script> window.onload = function() { if (typeof GEO === "undefined") { return; } if (GEO.error) { console.log("Web-Stat Geo-Customization script error: "+GEO.error); } if (GEO.country_code == 'US'){ if (GEO.region == 'California'){ updateBannerImage('banner_ca.gif'); } else if (GEO.region == 'Texas'){ updateBannerImage('banner_tx.gif'); } else{ updateBannerImage('banner_generic.gif'); } } else{ document.getElementById('banner').style.display = 'none'; } }; function updateBannerImage(newSrc) { var img = document.getElementById('banner'); img.style.visibility = 'hidden'; img.src = newSrc; img.onload = function() { img.style.visibility = 'visible'; }; } </script>
Example 2
You want your site to be accessible only from the US, Canada and the UK. You don't sell in other countries and you don't want people to write to support asking for your product when you can not fullfill their orders
<script> window.onload = function() { if (typeof GEO === "undefined") { return; } if (GEO.error) { console.log("Web-Stat Geo-Customization script error: "+GEO.error); } if (GEO.country_code != 'US' && GEO.country_code != 'CA' && GEO.country_code != 'GB'){ alert('Sorry this site is only accessible from the USA, Canada and Great Britain'); window.location = 'https://www.wikipedia.com'; } }; </script>
Example 3
Display a message to all EU visitors to inform them of your use of cookies and/or the collection of IP addresses.
Note: we use local storage to prevent this message from being shown multiple times to the same visitor.
<div id="gdpr_info_message" style="display:none;">>Insert here the message you wish to display to your visitors. This section goes anywhere you wish on your page</div> <script> window.onload = function() { if (typeof GEO === "undefined") { return; } if (GEO.error) { console.log("Web-Stat Geo-Customization script error: "+GEO.error); } if (GEO.is_eu == '1'){ var gdpr_message_already_shown = localStorage.getItem(\gdpr_message_already_shown'); if (gdpr_message_already_shown != 'yes'){ document.getElementById("gdpr_info_message").style.display = 'block'; localStorage.setItem('gdpr_message_already_shown', 'yes'); } } }; </script>
Note: when using Geo-Customizing you need to remember that the geographic information we use is derived from IP addresses. While we do everything to make it as precise and complete as possible, we can not, for technical reasons, have a 100% accuracy rate, so it is possible for the data contained in the geo array to sometimes be incomplete or inaccurate. You need to plan for that possibility in your application.
Need help? Have questions? Write to us and we'll get right back to you!