Contents of this article reposted from https://medium.com/@benlobaugh/how-to-use-the-maxmind-javascript-api-to-control-content-by-city-state-or-country-e078b408acc5

Controlling what a website visitor sees, based on their geo location, is a fairly common activity today. Most often, this happens on the server, before the content is generated for the visitor to see, but what if you do not have access to manipulate server side code and can only update the javascript that the site is using? Using the MaxMind Javascript API makes this much easier than you might think.

In this article I am going to show you how I accomplished this, in a way that you can easily replicate. What I am not going to do is show you how to build a website or teach Javascript principles.

Let’s consider this scenario:

• HTML has already been generated by the server
• There is no access to change the server side code
• We do have that ability to add Javascript to the site
• All elements that must be hidden have the class attribute of “geo-hide”
• Visitors from Washington State, USA must not see the specified content

Prerequisites:

• Working website with edit access for javascript
• MaxMind account. The free trial will suffice

We will be using the MaxMind GeoIP2 Javascript Client API and the GeoIP2 Precision Service.

Architecting the solution

• When a page loads, determine what state the visitor is making the request from
• If the state is not Washington, allow them to see all the content
• If the state is Washington, remove all HTML elements with the class attribute of “geo-hide” from the DOM

Note: This solution does require javascript be enabled on the visitor’s browser. It is rare that javascript is disabled these days. If you are concerned, look up any of the methods of requiring javascript to be enabled in a browser.

Another Note: This solution does not provide any protection against bots. MaxMind charges per query to their API- to save money, be sure you only query Maxmind on legitimate visits.

Final Note: This solution will query MaxMind on every page load. It is advised to use some caching method to prevent unnecessary calls. For example, you could cache the geolocation response as a session cookie. If the cookie is set, do not call Maxmind, if not, call Maxmind.

Include the GeoIP2 Javascript client library

MaxMind has already built a Javascript library that contains the functionality we need. All that needs to be done is to include it.

Add the following script include:

<script src=”//geoip-js.com/js/apis/geoip2/v2.1/geoip2.js” type=”text/javascript”></script>

Set up the content control code

The Javascript API has a single object that lets us easily retrieve the visitor location. It is

geoip2.city( onSuccess, onError );

The two parameters are callbacks, the first contains the geolocation data, the second contains an error, in the event that a geolocation could not be determined.

Plug that into a simple object and we have the following.

var geoipcheck = (function () {
 var onSuccess = function (geoipResponse) {
 var state = geoipResponse.subdivisions[0].iso_code;  if ( WA == state ) {
    var elements = document.getElementsByClassName(‘geo-hide’);
    while(elements.length > 0){
      elements[0].parentNode.removeChild(elements[0]);
    }
 
   }
 }; var onError = function (error) {
  // Error control code here
 }; return function () {
   geoip2.city( onSuccess, onError );
 };
}());geoipcheck();

As you can see in the onSuccess function, if the visitor’s state is listed as WA, or Washington, the HTML elements with the class of “geo-hide” will be removed from the DOM.

This is by no means a foolproof, or complete, solution, but it will get you up and running with the ability to control content via geolocation. This is particularly useful on services such as Shopify which do not allow you to alter what is rendered on the server side of things.