Alternate Language Web Page Redirect

The web browser provides information about the site visitor's preferred reading language.

This article describes how to redirect a site visitor to your alternate language pages using the language information from their browser.

Reasons for doing that include:

• Presenting an article in a language the site visitor prefers can be a user-friendly gesture.

• A sales page may be better understood when presented in a language the site visitor is comfortable with.

Of course, the alternate-language web page should be professionally written or transcribed by someone fluent with the target language.

When an alternate language preference is provided by the browser, and you have a web page for that language, these options are available.

• Automatically do a redirect to your alternate-language web page.

• Ask the site visitor if they want to see the web page for the alternate language.

Implementation is achieved by putting some JavaScript on a web page. The JavaScript has two places to customize.

And you must, of course, have an alternate-language web page available to redirect site visitors to.

The site visitor generally has instant online translation services available. Yet, professional web pages in the language or languages many of your site visitors prefer may markedly improve confidence.

To see an example confirmation box, the kind used when asking the site visitor if they want to see the web page for the alternate language, click here.

The JavaScript for Language Detection and Redirect

The JavaScript needs to be on every page that will provide the alternate-language option.

Here is the JavaScript source code. Customization notes follow.

<script type="text/javascript">
/*
   Browser Language Detection and Redirect
   March 1, 2021
   Will Bontrager Software LLC
   https://www.willmaster.com/
*/

var Destination = new Array(); // Leave this line as is.

// Two customizations --
//
// Customization #1
// Specify true if doing an automatic redirect. 
//   Otherwise specify false. The values true 
//   or false should not be quoted.

var Automatic = false;

// Customization #2
// Specify each applicable language code, its URL, a comma, 
//   and the content for the confirmation box - one per line.
// Here is the format:
//   Destination["CODE"] = "URL, CONTENT";

Destination["en-au"] = "https://example.com/au.html,To see the Australian English web page, press 'OK'. To stay here, press 'Cancel'.";
Destination["es"] = "https://example.com/spanish.html,Para ver la página web en español, pulse 'OK'. Para quedarse aquí, pulse 'Cancelar'.";
Destination["fr"] = "https://example.com/french.html,Pour voir la page web Français, appuyez sur « OK ». Pour rester ici, appuyez sur « Annuler ».";

// No other customization required. //
/////////////////////////////////////
var lang = navigator.language ? navigator.language : ( navigator.browserlanguage ? navigator.browserlanguage : ( navigator.systemLanguage ? navigator.systemLanguage : ( navigator.userLanguage ? navigator.userLanguage : '' ) ) );
lang = lang.toLowerCase();
var dest = Destination.hasOwnProperty(lang) ? Destination[lang] : false;
if(dest)
{
   var parts = dest.split(/,/);
   var url = parts.shift();
   var content = parts.join(",");
   if( Automatic ) { location.href = url; }
   else if(content.length)
   {
      if(confirm(content)) { location.href = url; }
   }
}
</script>

Customization notes:

The JavaScript has two places to customize.

The first place to customize is where you specify if you want an automatic redirect. If not, the alert method kicks in.

Find this line in the source code: var Automatic = false;

If you want to do an automatic redirect, change the value false to the value true (no quotation marks around these values).

The second place to customize is a list of language codes, URLs, and content for the confirmation box.

For each potential language redirect, those three items need to be on one line. Here is the way they look in the JavaScript source code.

Destination["en-au"] = "https://example.com/au.html,To see the Australian English web page, press 'OK'. To stay here, press 'Cancel'.";
Destination["es"] = "https://example.com/spanish.html,Para ver la página web en español, pulse 'OK'. Para quedarse aquí, pulse 'Cancelar'.";
Destination["fr"] = "https://example.com/french.html,Pour voir la page web Français, appuyez sur « OK ». Pour rester ici, appuyez sur « Annuler ».";

You'll see each line of the above code has this format.

Destination["CODE"] = "URL, CONTENT"

Replace CODE with the language code to match from the browser. (A list of language codes is at Web Browser Language Identification Codes.)

Replace URL with the URL of your alternate-language web page.

Replace CONTENT with the text for the confirmation box. (The confirmation box is similar to an alert box except it has two buttons instead of one. Tapping the "OK" button, in this case, causes the redirect to proceed. Tapping the "Cancel" button cancels the redirect.)

Each separate language code you want to match from the browser needs it own line of CODE-URL-CONTENT information.

Installing the JavaScript

Generally, browsers act on JavaScript as soon as they see the source code. Some gets deferred, but most gets acted on immediately, even if it is before the rest of the page is displayed in the browser window.

Therefore, it may be prudent to put the redirect JavaScript high in the web page source code.

The higher the source code is in the web page, the sooner the redirect can happen (if it's an automatic redirect) or the sooner the confirmation request can be made to the site visitor. This would be especially pertinent for web pages that load lots of images and take a while to render the web page.

As you make additional languages available for a web page, the JavaScript can be updated to accomodate.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager