Amazon AJAX Javascript Link Localiser

6 min read

I recently wrote about how a cache everything on this site on CloudFlare - including the HTML pages. This does not play nice with my geo-aware cache setup which I used to generate specific pages with localised links depending which country my visitor came from. To get around this problem I have written some Javascript to be able to localise links and through an AJAX 1 call get the visitors location. It works by

  1. Getting the country code from the visitors IP address using AJAX using freegeoip.net 2. This makes it cache friendly
  2. The country code is mapped to which Amazon store it should redirect to - including which affiliate tag to use. This can be configured / changed.
  3. The amazon affiliate link is localised as specified in the data-amazon-asin attribute on the link itself.

Demo

Since we are talking about actual working amazon affiliate links below, I will present my disclaimer first!

My script will generate real Amazon affiliate links. When clicking on these links Amazon links you consent to installing an Amazon affiliate cookie on your computer. For this demo you do not need to click on the actual links, you can just hover over the link to see the changed link or inspect it using your browser. If you want to withdraw your consent, just delete the cookies from this site using your browser.

Now lets use an example link to Amazon:

https://www.amazon.com/dp/B0084A7PI8/?tag=serek-eu-us-20

With an data-amazon-asin attribute:

data-amazon-asin="[us][es]B0084A7PI8[uk][de]B00JGFDKBQ[it][fr]B00PQC72ZS[ca]us"

That results in the following clickable link:
Test link to Amazon

The link should already be localised depending on the country you arrived from. The buttons below will simulate that you arrive from another country by setting the cookie with a different country and re-running the script. Then the link above should be changed / localised. You can use the developer tools on your browser to see the changes in the HTML or just click on the link.

The expected results are

Notice that all the above countries have an Amazon store. To redirect countries without Amazon stores we could do the following:

data-amazon-asin="[us][es]B0084A7PI8[uk][de]B00JGFDKBQ[it][fr]B00PQC72ZS[ca][AT][BE][DK][FI][NL][NO][PL][SE][LI][LU][PT][AD]us"

Which would redirect a bunch of countries to the US Amazon affiliate store, but it is cumbersome to write each time. Therefore it is possible define the mapping of countries to other countries in this way:

var amazonAffiliateRegions = {
  "DE":"DE", //Germany
  "AT":"DE", //Austria
  "BE":"DE", //Belgium
  "DK":"DE", //Denmark
  "FI":"DE", //Finland
  "NL":"DE", //Netherlands
  "NO":"DE", //Norway
  "PL":"DE", //Poland
  "SE":"DE", //Sweden
  "LI":"DE", //Liechtenstein
  "LU":"DE", //Luxembourg
  "ES":"ES", //Spain
  "PT":"ES", //Portugal
  "AD":"ES", //Andorra
  "GB":"UK", //United Kingdom
  "UK":"UK", //United Kingdom (dummy, used since I use UK and not GB)
  "IE":"UK", //Ireland
  "IM":"UK", //Isle of Man
  "IT":"IT", //Italy
  "VA":"IT", //Holy See (Vatican City State)
  "FR":"FR", //France
  "CA":"CA", //Canada
  "US":"US", //United States
  "CN":"CN", //China
  "BR":"BR", //Brazil
  "IN":"IN", //India
  "MX":"MX", //Mexico
  "DEFAULT":"US"  //If no match found above, use this country as default
};

The above is the default mapping. Lets try to play again with some different countries. We use the same links as before:

https://www.amazon.com/dp/B0084A7PI8/?tag=serek-eu-us-20

With an data-amazon-asin attribute:

data-amazon-asin="[us][es]B0084A7PI8[uk][de]B00JGFDKBQ[it][fr]B00PQC72ZS[ca]us"

That results in the following clickable link:
Test link to Amazon

The expected results are

Installation

WordPress

I have made two simple WordPress plugins - one for getting and storing the country code in a cookie. The second reads the country code form the cookie and transforms the links.

  1. Go into your WordPress plugin folder, e.g. /var/www/html/wordpress/wp-content/plugins
  2. git clone https://github.com/WordPress-plugins-serek/geo-ip
  3. git clone https://github.com/WordPress-plugins-serek/javascript-amazon-affiliate-link-localiser
  4. Log into WordPress and activate the above plugins

Custom

If you don’t have WordPress or just want to integrate the files manually do the following:

  1. Download the file amazonAjaxLinkLocaliser.js
  2. Download the file geoip.js
  3. Add the following to your site (replace yoursite.com with the correct path to the files)
<script src="//yoursite.com/geoip.js" defer></script>
<script src="//yoursite.com/amazonAjaxLinkLocaliser.js" defer></script>

Configuration

Edit the amazonAjaxLinkLocaliser.js file and add your own Amazon affiliate IDs in amazonAffiliateTags

var amazonAffiliateTags = {
        "US":"serek-eu-us-20",
        "CA":"serek-eu-ca-20",
        "DE":"serek-eu-de-21",
        "UK":"serek-eu-uk-21",
        "ES":"serek-eu-es-21",
        "IT":"serek-eu-it-21",
        "FR":"serek-eu-fr-21",
        "CN":"serek-eu-cn-23",
        "JP":"",
        "MX":"",
        "IN":"",
        "BR":""
};

Notice that if you do not supply a Amazon affiliate tag for a store that you have configured, I will insert my own tag. Next you might want to tweak the mapping of countries to Amazon stores:

var amazonAffiliateRegions = {
  "DE":"DE", //Germany
  "AT":"DE", //Austria
  "BE":"DE", //Belgium
  "DK":"DE", //Denmark
  "FI":"DE", //Finland
  "NL":"DE", //Netherlands
  "NO":"DE", //Norway
  "PL":"DE", //Poland
  "SE":"DE", //Sweden
  "LI":"DE", //Liechtenstein
  "LU":"DE", //Luxembourg
  "ES":"ES", //Spain
  "PT":"ES", //Portugal
  "AD":"ES", //Andorra
  "GB":"UK", //United Kingdom
  "UK":"UK", //United Kingdom (dummy, used since I use UK and not GB)
  "IE":"UK", //Ireland
  "IM":"UK", //Isle of Man
  "IT":"IT", //Italy
  "VA":"IT", //Holy See (Vatican City State)
  "FR":"FR", //France
  "CA":"CA", //Canada
  "US":"US", //United States
  "CN":"CN", //China
  "BR":"BR", //Brazil
  "IN":"IN", //India
  "MX":"MX", //Mexico
  "DEFAULT":"US"  //If no match found above, use this country as default
};

The most important configuration here is the default country. All the countries on the right hand side is the ones you should use in the data-amazon-asin attribute, e.g. [de][es][uk][it][fr][ca][us][cn][br][in][mx]. A full list of country codes can be found here. You can also tweak the mapping of Amazon stores to their url endings, but this should not be needed:

var amazonAffiliateTLDs = {
 "DE":"de",
 "UK":"co.uk",
 "ES":"es",
 "IT":"it",
 "FR":"fr",
 "CA":"ca",
 "US":"com",
 "CN":"cn",
 "JP":"co.jp",
 "MX":"com.mx",
 "IN":"in",
 "BR":"com.br"
};

Lastly there is a setting that defines if the script should try to localise a link if it is already is localised to the target region:

var doNotLocaliseLinksThatMatchRegionAlready = false;

I use it since I embed link to the .com Amazon store with my affiliate links already. No need to waste resources localising these again.

Next action

  1. Asynchronous JavaScript and XML (AJAX) is a set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications. Ajax allows for Web pages, and by extension Web applications, to change content dynamically without the need to reload the entire page 

  2. A free and open source public HTTP API to search the geolocation of IP addresses. It uses a database of IP addresses that are associated to cities along with other relevant information like time zone, latitude and longitude. You’re allowed up to 15,000 queries per hour by default. Once this limit is reached, all of your requests will result in HTTP 403, forbidden, until your quota is cleared. Alternatively it can be downloaded and installed locally to bypass these limits. 

↑ back to top