Implementing Geolocation

Mon, 30th September 2019

What is Geolocation?


Geolocation is the identification of a user’s location by device or via the internet. When you know the location of your users, you can take this advantage to enhance your user’s experience.

More than 2000 years ago, the ancient Greeks triangulated their position of the stars and that was “geolocation” for them. It was not until 1999 for the first commercial GPS phone to be available on the market. But geolocation or GPS wouldn’t have existed if it weren’t for Roger R. Easton, Dr. Ivan Getting and Bradford Parkinson - thanks guys!

Geolocation is available on most browsers and mobile devices and is now common but there are still some cross browser as its not been standardised.

Geolocation in Practise


5d88df1d24b15490559260.png

Icons made by Eucalyp from www.flaticon.com


Our client wanted to create a better user experience and offer region specific product information, in the (sometimes multiple) languages appropriate for that part of the world.

In this example, each product was stickered with a QR code. Once this is scanned, it redirects users to our website. But what happens if someone physically located in the UK sends the website URL to someone in Portugal - will the language change to suit the user’s region?

To handle scenarios like the above, we used Prismic (a CMSAAS) to provide separate content tagged by region and language, each targeting a different geographical group of users.

Our product is available in 16 regions, and we need to support 12 different languages. That’s a lot of different content, in a lot of different languages! We can’t rely on the QR code to tell us where the user is - instead the geolocation functionality is implemented on the site itself. With the user’s permission, the website can now easily identify a user’s location and automatically change the content into the correct language.

We also did added an IP lookup backup. IP lookup is a little different to geolocation. It determines country, region, state, city or postal code and not the exact location of a user.

Only after implementing all the above were, we were able to give users a website that accurately detects wherever they are in the world and offers the correct content, in the correct language. Phew!

The Great Wall of China (we’re not talking about the actual wall if you’re wondering!)

In case you weren’t aware, access to Google is heavily restricted in China.This is because Google gives unprecedented and mostly unfiltered access to information, and the Chinese government prefers to keep a tighter rein on what can be easily accessed within its borders.

aerial-shot-ancient-architecture-1653823.jpg

Photo by Tom Fisk from Pexels


In response, the Chinese tech community has its own search engines Sogou and Baidu, and following a similar stance they have also their own social media platforms, for example, Renren (Facebook) and Weibo (Twitter).

A recent project of ours came up against a side effect of the Google restrictions:

Video
Our client uses a YouTube channel to provide video content which features on the website’s landing page. YouTube is associated with Google, so we had to find an alternative. So for the Chinese site we embedded a HTML5 video instead, which is served through a CDN located in Singapore for better latency when serving the video asset.

Forms
To reduce spam submission, we made use of the popular Google recaptcha form. Anything associated with China is automatically blocked. The form uses a Google domain so this was altered to a non-Google domain: recaptcha.net.

Geolocation
We are also primarily using Google maps API on the website. As you know, Google maps doesn’t work in China so don’t be surprised if you see buildings emerging in the river nearby whilst trying to use the app. For browsers that don’t support geolocation, or if you’re in China... IP lookup backup to the rescue!

As you can see there are a few considerations once you start developing websites internationally. It’s not as easy as you think.

Don’t forget your edge cases!


Edge case is something that can occur but rarely occurs so you should always plan for the unexpected.

What if your sales people in Germany are sending out the website URL in their footer? Of course they want the recipients to be automatically shown the German language version - but in today’s Europe that recipient could be in France, Switzerland or the UK.

As a piece of additional functionality, you might want to allow for parameters to be passed allowing the geolocation functions to be overridden.

Once your users have the correct information for their region, is the translated information suited for the design of the website? How does the information display in all the languages? Content might need to work in a right to left format for Eastern markets. Is the copy too big once translated? Your navigations might not have enough space.

So when you decide to design a multilingual website, bear in mind that you might need to design a website that is flexible and committed to any scenario for great user experience.

As with any technology, geolocation comes with its own set of risks. The main risk that is everyone’s concerned about is privacy. We recommend that you only share your location if you know that the website is trusted and protect your devices with a security software.

Now you know about the Great Wall of China, why not target China as a new market for your business? Happy geolocating!