Localization: Website User Language Detection

Apr 9, 2018 01:30 · 688 words · 4 minutes read frontend javascript language apache htaccess webdev quicktips

Lokalizacja: Wykrywanie języka użytkownika witryny

Did you get that? Yeah.. Me neither. Well, Google Translate says it’s Polish for this article’s title: “Localization: Website User Language Detection”.

Why shouldn’t we be serving our user’s content in the correct language or at least have more than one available?

Sexy Singles in your area?

Sexy Singles in your area!

VPN’s are a thing now. People are starting to actually use them. This is good, but there’s a downside when it comes to websites that serve you content based on your location, which in turn is based on your IP Address.

Here’s a secret: IP’s lie. Most of my web content now comes in Dutch because of my VPN usage patterns. How do we turn this around?

Browser Languages

Your browser knows you. You browser knows what languages you understand.

Well, most of the time that is. Still, it’s more accurate than IP Location.

Request Headers

As you can see above, my browser’s supported languages are present even when requesting a webpage. We can customize .htaccess to redirect the user based on the Accept-Language value or we can just JavaScript a redirect.


Method 1 - IP Address

1 - NO.

2 - NO.

3 - Execute the following in your console:

echo "NO."


It’s not just the issue of people traveling and having an IP address of a foreign country, thus getting content delivered in the language of the country they’re in, it’s the issue of triggering that same issue by using a VPN when they’re home sitting on their couch.

But hey, if you really want to do it:

$.post('http://ip-api.com/json')
	.done(function(res){
		console.log(res.countryCode);
	})
	.fail(function(xhr, status, error){
	    //error handling goes here
});

You will be reliant on a third party service to do this for you, unless you want to go through a lot of trouble.

Also, beware of Adblockers as that piece of code will be blocked by most.


Method 2 - Browser Available Languages

Your browser has a list of supported languages.

(Chrome: Settings > Advanced > Languages)

Chrome Supported Languages

In my case, that’s English and Portuguese.

Now here’s the logical part: If you’re German and you speak no english will you have your Chrome installed in english? Most likely: no.

My english is fluent yet I have Portuguese added as well. If a website is displayed to me in Portuguese, that’s ok. If it is displayed in English, that’s also ok.


Implementation

Here’s a redirect in case the user does not have “pt” or “pt-PT” (Portuguese) in their browser:

var language = navigator.languages || window.navigator.userLanguage || window.navigator.language;

var browser_pt = false;

for (i = 0; i < language.length; i++) {
    if (language[i] == "pt" || language[i] == "pt-PT") {
        browser_pt = true;
    }
}

if (!browser_pt) {
    window.location = "https://cmiguel.com/webdesign/en";
}

This example is from my Web Design page, which defaults to Portuguese but will redirect to the English version if “pt” or “pt-PT” isn’t found on the browser’s language list.

You can easily modify this to include a list of possible languages and redirects like shown below

var language = navigator.languages || window.navigator.userLanguage || window.navigator.language;

for (i = 0; i < language.length; i++) {
    if (language[i] == "pt" || language[i] == "pt-PT") {
        window.location = "https://somewebsite.example/pt";
    }
    else if (language[i] == "de" || language[i] == "de-DE") {
        window.location = "https://somewebsite.example/de";
    }
    else if (language[i] == "es" || language[i] == "es-ES") {
        window.location = "https://somewebsite.example/es";
    }
}


Method 1+2 - Why not both?

You can always try and validate Method 1 with Method 2.

Italian IP Address + “it-IT” in the browser’s language list = Italian confirmed.


Method 4 - .htaccess

As correct as Method 2, this uses the browser’s supported languages to redirect the user as needed.

If the term “htaccess” is new to you, just read this DigitalOcean .htaccess guide

RewriteEngine On

RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^$ http://somewebsite.example/en/ [L,R=301]

RewriteCond %{HTTP:Accept-Language} ^de [NC]
RewriteRule ^$ http://somewebsite.example/de/ [L,R=301]

RewriteCond %{HTTP:Accept-Language} ^nl [NC]
RewriteRule ^$ http://somewebsite.example/nl/ [L,R=301]



Conclusion

It’s 2018, VPN’s are taking over, people travel frequently.

Don’t serve content based on IP Address location if your goal is to translate a page, just go with the browser’s available languages via JavaScript redirection or .htaccess rules.