Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.
What can you customize in TranslateThis?
TranslateThis allows you to customize a variety of options including tracking with Google Analytics, styling options, callback functions, limiting supported languages, and the ability to confine the translation to a portion of the page.
To customize these settings, pass an array of options to the
In this example we are setting
GA to true to enable Google Analytics tracking, as well as flagging the scope of the translation to cause TranslateThis to only translate content within the element with id
Be careful when defining this option array—one common mistake is to leave a trailing comma after the last element in the array (notice in my example how
scope : 'main' doesn’t have a comma after it).
There are three callback functions in TranslateIt, which are called
onComplete. You can pass in either the function reference (the function without the parentheses) or define a function on the fly:
In this example, we defined the function
translateLoad() to called when TranslateThis loads and another
translateClick() for when the translation begins. Finally, we defined a function on the fly to be executed once the translation completes.
Changing dropdown languages
To change dropdown languages, simply pass an array of the Google Language codes in the option
These will fall in order down each column from left to right. For a complete list of the 52 language codes supported by TranslateThis see the
allLangs array in the default options for TranslateThis.
Why does TranslateThis run on the front end?
The disadvantages to running on the front-end is that TranslateThis doesn’t cache complete translated pages (although Google caches the translated chunks) and that it doesn’t translate subsequent pages on a site….yet (see below).
But TranslateThis can provide the perfect entryway to a backend system that also leverages the Google Language API, just use the
onClick callback which returns the language slug.
Are there any planned enhancements for TranslateThis?
For this release I focused on improving performance of the core translation functions as well as providing a nice user interface. So there are certain enhancements I have planned to build and release in the near future.
First, I want to build in cookie functionality so that the script translates pages that are visited subsequent to the initial translation. My only concern is that it would be very invasive on shared computers—think of a college campus with users of various languages. So I need to build a “cancel translating” button as well as an “undo translation” button before I can do this. And of course I’ll build a switch to turn it on or off.
Initially this cookie functionality will be confined to any individual (sub)domain but I’m toying with different ways of making it internet wide. This seems like it could be pretty cool, but again I’m not sure if it’s too invasive (any thoughts would be appreciated in the comments).
Update – Cookie functionality with the cancel and undo buttons has been implemented
Next there are a couple different button styling options I will be rolling out soon, including a list of flag icons next to the button.
And in the long term there may be ‘bit.ly’-style tracking or a caching method for complete pages.