Ecommerce is international. Businesses that don’t recognize the multilingual nature of ecommerce may be missing out on an opportunity for growth.
In this article, I will introduce the “Google Language API Family,” a set of four robust tools, two of which have the potential to make an immediate, positive impact on the way an ecommerce business deals with non-English speaking customers.
The four APIs that comprise the Google Language Family are:
- The Google Translate API;
- The Google Transliterate API;
- The Google Virtual Keyboard API;
- The Google Diacritize API.
Let’s begin with the Translate API because it’s the most beneficial.
The Google Translate API
The Google Translate API is surprisingly easy to use. You can invoke the API on either the server side, or on the client side with just a few lines of JavaScript. The process is fairly typical and developers with AJAX experience will recognize the logic. You submit a request to the API, and handle the response with a callback method.
Begin by programmatically gathering the following items:
- The text to be translated. Don’t forget to encode the text with JavaScript’s escape() function. Otherwise, any special characters and punctuation embedded in the text will cause errors.
- The source and target language. If you want to translate from English to French, the source language will be “en” for English, and the target will be “fr” for French. A full list of language codes is available in the official documentation.
- The name of your callback handler method. This is the method that will handle Google’s response to your request.
- Your API key. You can obtain an API key from Google’s API console. The key is free, but you do need a Google account.
Now you’re ready to send a request to the Translate API. Here’s how the JavaScript request, and parameter list, will look:
https://www.googleapis.com/language/translate/v2?key=your-api-key-here8&source=en&target=fr&callback=translationResponseHandler&q=hotdogs%20and%20hamburgers;
In the example above, we are requesting that “hotdogs and hamburgers” be translated from English to French.
The documentation lists quite a few parameters that you can supply in order to further customize the translation. At a minimum, you’ll be sending five name-value pairs:
- key - Your API key.
- source - The language code of the text to be translated.
- target - The text will be translated into this language.
- callback - The name of your callback method, the method that will handle Google’s response.
- q - The text that is going to be translated.
Your callback method will handle the response, which will arrive as JSON and include the translated text. Here’s a simple example:
// the callback method function translationHandler(response) { var theTranslation = response.data.translations[0].translatedText; }
Thankfully, parsing JSON with JavaScript does not require much effort. To extract the translation, simply drill down to the translatedText node with the following syntax:
response.data.translations[0].translatedText
At this stage, you can display the translation to the user.
Now let’s put everything together into one HTML file. I’ve modified Google’s sample code to make it easier to read and understand.
<html>
<head>
<title>Google Translate API Example</title>
</head>
<body>
<div id="textToTranslate">Translating is easy and fun!</div>
<div id="translation"></div>
<script>
function translationHandler(response) {
document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
}
</script>
<script>
// the <script type="text/javascript"> element
var translatingScript = document.createElement('script');
translatingScript.type = 'text/javascript';
// fetch the text that will be translated
var textToTranslate = escape(document.getElementById("textToTranslate").innerHTML);
// set the src of the translating <script src=...>
translatingScript.src = 'https://www.googleapis.com/language/translate/v2?key=your-key-here&source=en&target=fr&callback=translationHandler&q=' + textToTranslate;
// when the translating script is appended to the <head>,
// the request is sent to the Google Translate API is sent
document.getElementsByTagName('head')[0].appendChild(translatingScript);
</script>
</body>
</html>
The output will look something like this:
Let’s use the standalone Google Translate tool to check the results. I highly recommend that ecommerce merchants use this web-based tool to communicate with their customers. One of my own ecommerce businesses targets the European market. I’ve been thanked many times by customers because I put in an extra effort to write emails in their own languages. The tool is easy to use and free.
Yes, it works. Or should that be, Oui, ça marche! Here's an example.
As you can see, only a few lines of code are required to take full advantage the Google Translate API.
Suggested Uses
If you’re still wondering how the Google Translate API can help ecommerce merchants, consider these suggestions.
- When a visitor enters an ecommerce site, check the visitor’s language settings. If the language is not English, invoke the Translate API to display a welcome message in the visitor’s language.
- Build a simple translation client that will support a live chat application.
- Allow customers to chat with the merchant in languages other than English.
- Create an in-page translation tool that will accompany “Contact Us” and product review pages. Customers that do not have a strong command of the English language will be able to use the tool to submit product reviews and contact the merchant with questions. It’s an effective way to engage all customers, regardless of their English language skills.
The Google Transliterate API
The second member of the Google Language API Family is Google Transliterate. A transliteration is not the same as a translation. Rather, a transliteration converts the the sound of a series of Roman (English) characters into the the equivalent word or words in another language.
For example, the sound “da” in English is meaningless. In Russian, however, “da” means “yes.” The transliteration of “da” in Russian is да, which translates to “yes” in English. I’ve inserted some images below to support this example.
I hope that the Russian speaking readership will forgive me. “Da”, unfortunately, is the extent of my knowledge of the Russian language.
While the Google Transliteration API is indeed powerful, I can’t think of a good reason to incorporate transliterations into an ecommerce application. Accordingly, I thought it best to briefly describe the Transliteration API, instead of providing extensive code samples. You can consult the official documentation for more information. If you discover an appropriate ecommerce use for transliterations, please let me know in the comments section.
The Google Virtual Keyboard API
The Google Virtual Keyboard is closely related to Google Translate. As I suggested earlier, it might be useful to allow customers to communicate with an ecommerce merchant in many languages. It could also be helpful in dealings with international suppliers, who may not speak your language.
While Google Translate can help you to translate text, it can’t do the typing for you. Enter Virtual Keyboard. This tool allows users to type in any language using a familiar keyboard layout.
A combination of Google’s Virtual Keyboard and the Translate API will provide customers with the tools they need to communicate with you, regardless of where they happen to be located in the world, and regardless of the physical keyboard attached to the computer they happen to be using.
Implementing a virtual keyboard on your website is easy. As with the Translate API, all that’s required is a few lines of JavaScript code.
Begin by including the Google’s API script in the <head> section of your web page.
<script type="text/javascript" src="https://www.google.com/jsapi?key=your-api-key-here"></script>
Don’t forget to insert your own Google API key where it says your-api-key-here.
Next, load the Virtual Keyboard API script with the google.load command.
google.load( "elements", "1", { packages: "keyboard" } );
You’ll notice that load accepts three arguments: the module name, the module version, and a list of settings. In this case, elements is the name of the module that contains the virtual keyboard functionality. The settings parameter is an array of strings that allows us to load more than one API with a single call to load. For now, we only require the keyboard package.
Having loaded the Keyboard API, we need to specify a callback method that will eventually create an instance of the virtual keyboard.
google.setOnLoadCallback(keyboardLoadedCallbackHandler);
To summarize, we begin by loading the Virtual Keyboard API. When the API is loaded and ready, the API will notify our callback method. Now we can create an instance of the keyboard inside the callback method, and display the keyboard to our users.
// the callback method creates an instance of a keyboard
function keyboardLoadedCallbackHandler() {
var kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.MONGOLIAN_CYRILLIC],
['productReviewText']);
}
The call to new google.elements.keyboard.Keyboard requires two parameters: a list of language layouts, and an HTML element that will display the keyboard’s output, i.e., the keystrokes.
In the example above, I could have supplied a long list of layouts, MONGOLIAN_CYRILLIC, followed by RUSSIAN, ARABIC, KOREAN, or any of the other keyboard layouts supported by Google. The first layout in the list is displayed by default, while the rest are accessible by clicking on the left and right toggle arrows, found on the top, right-hand side of the virtual keyboard.
The second parameter supplied when creating a keyboard object is a list of the HTML text element IDs that will display the keyboard’s output. In the sample code above, I specified that the productReviewText element will display the user’s keystrokes.
Now let’s put it all together into one code file.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://www.google.com/jsapi?key=your-api-key-here"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
google.setOnLoadCallback(keyboardLoadedCallbackHandler);
function keyboardLoadedCallbackHandler() {
var kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.MONGOLIAN_CYRILLIC,
google.elements.keyboard.LayoutCode.RUSSIAN],
['productReviewText']);
}
</script>
</head>
<body>
Yes, we accept product reviews in Mongolian.<br/>Here's a Mongolian virtual keyboard to help you out.<br/>
<textarea id="productReviewText" style="width: 420px; height: 80px;"></textarea>
</body>
</html>
The output should look something like this:
The Google Diacritize API
The final member of the Google Language API Family is the Diacritize API. Diacritical marks are symbols added to letters indicating a special pronunciation. These symbols help pronounce words correctly. In some languages, diacritical marks are called accents. For example, the French word for student, élève, contains two accented characters, or diacritical marks.
As with transliteration, there is probably little valid ecommerce use for the Diacritize API. For now, it's enough to know that the Google Diacritize API can be used to add diacritical marks to text. You pass an unaccented string to the API, and receive the same string with the pronunciation accents added.
If you can determine an ecommerce use-case for this API, please let me know in the comments, below.
Conclusion
Ecommerce is international and multi-lingual. If you sell to customers around the world, or even locally to people that do not have full command of the English language, you should consider adding some of the functionality offered by the Google Language API Family.
Though an ecommerce operation may likely never require transliterations and diacritical text, I’m reasonably certain that an ecommerce business can benefit from the Translation and Virtual Keyboard APIs. Allowing customers to communicate in their own language is an easy way to engage the community and promote a business. With a little creativity, and a few lines of code, you can open doors to a world of new business opportunities.
Related Articles
- Working with Google's New Font API
- Develop a Store Finder with the Google Maps API, Part 6 Markers
- Seven Examples of Sites Using Map APIs
