Change URL with JavaScript based on geoip country

Question

I'm looking for a way to change the url of an anchor tag based on country. I'm using maxmind's geoip2 JavaScript service for detecting the country.

I was thinking of changing the URL on click, so I didn't make unnecessary calls to maxmind. Is this a good idea or is there a better way of doing it?

Below is the code I've got so far, but it isn't working:

var theAnchor = document.getElementsByClassName('geotarget');

theAnchor.onclick = function () {
  var country = geoipResponse.country.iso_code;
  var linkUK = "<?php the_field('link_uk'); ?>";
  var linknUS = "<?php the_field('link_us'); ?>";
  if ( country == "GB" ){
    window.open(linkUK);
  } else {
   window.open(linkUS);
  }
};

HTML:

<a href="" class="geotarget">
   <img class="img-responsive" src="<?php the_field('image'); ?>" alt="" />
</a>

Answer 1

I'd replace the URL's on page-load so that people can still middle-click to open in a new tab. Click events on links always bug me.

Since you want to reduce the amount of calls to the geoip2 service you can hit it once then cache the result in session on the server.

Something like this:

$(function () {
  var country = "<?php COUNTRY_CODE ?>";
  if(!country)
  {
    country = geoipResponse.country.iso_code;
  }

  var linkUK = "<?php the_field('link_uk'); ?>";
  var linknUS = "<?php the_field('link_us'); ?>";
  if ( country == "GB" ){
    $('.geotarget').attr("href", linkUK)
  } else {
    $('.geotarget').attr("href", linkUS)
  }
});