Detailed guide to translate your website with the Google translation API or JavaScript?

Guide détaillé pour traduire son site web avec API de traduction Google  ou Traduction Google ?

The Google Translate API is a speedy way you can use to make your content accessible to various people around the world. Indeed, there are thousands of languages around the world. Hence potential customers are lost if they cannot read our content. In this article, we look at two different approaches that can help you translate your website. We will also see the pros and cons of these approaches. Finally, we will give our point of view and our recommendations to easily offer quality content.

The two approaches of Google Translate to offer content in different languages

Google provides two possibilities that users can use to translate their content:

  • The use of the JavaScript library which allows you to add a translation button to your website
  • Google translation APIs.

In the first case, the user can display your website in any language offered by Google. However, in the second case, you have more flexibility in what you want to display as a language, we will talk about these two possibilities and make a comparison.

1 – Using the JavaScript library

To translate your website using the JavaScript library, you simply need to include the JavaScript code on your website. Then, you will bring up a language selection option with a line of JavaScript code. Users will then be able to use the language selection tool to translate the content of your website.

Sample JavaScript Library Code for Google Translate


<!DOCTYPE html>
<html lang="fr-CA">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8">
    <link rel="profile" href="//gmpg.org/xfn/11">
    <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
    <title>Page de traduction test</title>
    </head>
<body>

<h1>Bienvenue sur Prositeweb</h1>

<p>Votre agence web à Montreal.</p>


<div id="traduction_site_web"></div>

<script>
function matraduction() {
  new google.translate.TranslateElement({pageLanguage: 'fr'}, 'traduction_site_web');
}
</script>

<script src="//translate.google.com/translate_a/element.js?cb=matraduction"></script>
</body>
</html>

in the example above, we use the Google translation library to include the translation on the website (//translate.google.com/translate_a/element.js). Next, we create a JavaScript function to initialize the language selection form “matraduction”. In the initialization function, we pass the identifier that will serve as the selection “translation_site_web”.

The above code is enough to translate your website with Google’s JavaScript library.

See an example of using the Google library or download

Some Benefits of Google’s JavaScript Library

The translation JavaScript library can have several benefits. We will list them below.

Your website can be easily accessible in several languages

As we have seen, you can allow visitors worldwide to read your content with minimal effort.

Effortless integration.

To add such functionality to your website, you only need some knowledge of HTML. You can copy and paste even if you’re not a computer person.

It’s 100% free

We will talk later about the option with API. But, we can see that integrating the language module on its website is free. You don’t have to pay any usage fees.

Some Disadvantages of the JavaScript Translation Library

Here are some disadvantages.

It’s not flexible

Using Google to do the translation requires some revision afterwards. Indeed, the translation that the Google solution offers is not always precise, and it is sometimes at a limit out of context. However, when you use the JavaScript library, you can’t adjust the text that customers see on the website.

You are forced to use the Google logo on your page

The Google logo is displayed to indicate that the text is translated by Google translation. Which in some (cases) is not always professional.

Contact us for advice on choosing a suitable translation module for your website.

It is not suitable for better SEO for search engines

Unless you make a few advance adjustments to the programming, the content you submit cannot be easily indexed by search engines. Generally, several companies would like to have unique links per language. However, the Google JavaScript translation displays the content in different languages on the same page.

2 – Using Google Translate API

Google Translate API gives you a lot more options than the JavaScript library. Indeed, you can use it to integrate the translation module and better adjust the content for your website. This is ideal if you want to be more professional and better control what your customers read. This section will discuss how to integrate Google Translate API into its web project. We will focus on websites that use PHP. To be able to use this approach, you must have:

  1. A web server with command line access
  2. Knowledge of PHP
  3. An account Google Cloud Console
  4. You should also have some knowledge of managing MySQL databases

Before embarking on this approach, it is essential to note that the Google Translate API is not always free. The cost depends on the usage rate. Therefore, when using, you should pay close attention to queries.

Steps to use Google Translate API

  • Create the API for translation through the Google Cloud Platform account.
  • Download the SDKs (PHP) from GitHub
  • Use the example you will find in the README to see how to apply the translation.

For optimization purposes, you can create a database to save the texts you have translated. This will save you money on queries to avoid usage charges.

Create your API key for Google translation

Account creation.

To create your API key, you must go to the Google Cloud AI pour la traduction website.

Comment traduire son site web avec API de traduction Google ou Traduction Google ?

Then you need to log in or create an account. If you have a Gmail account, you can use it to access the Google Cloud account. First, you will need to configure a payment method. Trials are free for a certain period. You should refer to Google’s terms and conditions for more information.

Once your account is created, you will have access to a screen similar to this:

Exemple d'ecran de Google Cloud

You must click on the icon next to the Logo to create a project.

It will simply be a matter of clicking on the “New project” button, and then you must Give:

  1. A name for your project,
  2. A billing account
  3. your organization
  4. your area

Fields 3 and 4 are filled in automatically with the data you provided when creating your account.

Créer un compte google cloud

The platform will configure your new project when you click the “Create” button. You will therefore be able to generate your API key.

Generate the API key.

To generate the API key, you must click on the icon to the left of the logo (the three horizontal bars) and then click on the Marketplace tab. The Google platform will then redirect you to the list of Google APIs.

Google cloud Marketplace

Search the bar for the translation API with the keyword “translate”. You will see it appear in the “Cloud Translation API” list. For the rest, you must click on this API and activate it.

Choose the type of key and make a restriction.

Once you have created and activated the key, you will have to choose the type of key and restrict it. In this part, it will simply be a matter of going to the APIs and services tab and creating the identifier you want to use for your project. Before doing so, you must make sure that you have selected your new project (look in the tab at the top right of the Google Cloud logo). To generate a type of key,

  • Click on the three bars at the top (left of the logo)
  • Select APIs and Services
  • Next, click on the Credentials tab

The Google Cloud Platform generally offers you three types of credentials:

  • The API key
  • The OAuth Client ID
  • The service account

In the case of the Google Translate AI, we need the API key. Depending on your approach, you could also use the OAuth Client ID.

Clé API traduction Google

Now click on the “CREATE CREDENTIALS” button. You must, in the drop-down menu, click on API Key. The platform will generate a key that you must use for your project.

API configuration

To make this critical functional, you must:

  • Configure the OAuth authorization screen with information about your application (You will see the notice at the top of your page). You must click on the button on the right and follow the instructions.
  • Then you must restrict the key and protect it from being used outside the framework you want to fix. In this case, you just have to click on your new key and add your website URL or IP.

Finally, select “Restrict Key” at the bottom of the page. In the restriction options, you need to fix. Indeed, with an API key, it is possible to use it on different websites. Therefore, a person who comes across this key can use it in his project. Thus, it is essential to restrict its use to avoid abusive charges. Also, you can use your key for different tasks (adding a map to your website, authentication or translation). It is also for this reason that you must limit the configuration. Restricting will help you, for example, better assess the usage quota.

Do you need a professional web service for your multilingual website?

Get the download link for the extension directly in your email

contact-us

Use of the Google API translator on its website.

We will now see how to add the API key to your web project. Indeed, to be able to integrate Google Translate API into a web project, it is imperative to create the key, as we saw above. For what follows, here are the steps to follow:

  • Download Google Translate source codes (SDK) from GitHub
  • Follow the documentation to see how to implement it in your web project
  • Add your API key to activate the ability to do the translation.

We see together what needs to be done.

Download Google Translate source codes (SDK) from GitHub

For this part, you must have access to the command lines to configure and download all the components. Indeed, the GitHub code allows you to have the basics. However, when you run the queries in your command line, you could easily download the items to finalize your project. You can, for example, use puTTY to connect to your server via the command lines. It is also important to say that to maneuver the codes simply. You need to install the composer command on your web server. You will find via this link a documentation that can help you in this process.

Installation et configuration de Google Cloud PHP Translate

  • Visit the GitHub website where the code is located. Google Cloud PHP translate
  • At the level of the README.md documentation, you will see the instructions to follow to install the codes

A summary is below:

  • Install Composer to manage dependencies (resources you need for the project)
  • Install Cloud Translate components
$ composer require google/cloud-translate

The site also recommends that you install the entire suite if you wish.

$ composer require google/cloud

If you have Composer installed on your server, you should have no problem running the above queries.

Create sample code to use Google Cloud Translate

When you have installed the components on your website, you can include them in your project. To include the components in your project, you must use PHP’s “require” to call the autoload.php file. This dissolved an example.

require 'vendor/autoload.php';

The translation code could be similar to what you have below.


<?php 
require 'vendor/autoload.php';

use Google\Cloud\Translate\V2\TranslateClient;

$translate = new TranslateClient([
    'key' => 'your_key'
]);

// Translate text from english to french.
$result = $translate->translate('Hello world!', [
    'target' => 'fr'
]);

echo $result['text'] . "\n";

// Detect the language of a string.
$result = $translate->detectLanguage('Greetings from Michigan!');

echo $result['languageCode'] . "\n";

// Get the languages supported for translation specifically for your target language.
$languages = $translate->localizedLanguages([
    'target' => 'en'
]);

foreach ($languages as $language) {
    echo $language['name'] . "\n";
    echo $language['code'] . "\n";
}

// Get all languages supported for translation.
$languages = $translate->languages();

foreach ($languages as $language) {
    echo $language . "\n";
}
?>

Vous devez remplacer “your_key” dans l’expression ci-dessous par votre clé API que vous avez créé plus haut.

$translate = new TranslateClient([ 'key' => 'your_key' ]);

Some recommendations

  • To use the resources optimally, you can, for example, do the translation and insert the data into a database. This will help you save on queries and, consequently, costs.
  • You can extend the use of the API to several types of applications. For example, you could use it to create a WordPress, Joomla or Magento extension.
  • Keep in mind that using the Google Translate API may have a cost if you exceed the free query limit. So, when programming, you need to consider this.

Some alternative is the Google API translation.

Using a development approach can be worthwhile if you are doing custom development. Indeed, several content managers like WordPress, Magento or Shopify already offer the possibility of integrating third-party resources to do the translation. To this end, before developing, you must explore the market to see if any solutions meet your needs. It will simply be a question of evaluating the pros and cons before making your decisions. Below are some examples of alternative solutions.

WPML

The extension WMPL is a translation tool for WordPress websites. It is a solution to which you can subscribe to translate your website into WordPress. This solution has its advantages and disadvantages. However, it can help you focus better on your business.

Weglot

This is also another WordPress website translation tool.

Conclusion

Translating a website can be relatively easy if you have the right tools. Indeed, several solutions are at your disposal to assist you in your process. If you want to work with subject matter experts to do quality work, contact us today!

Leave a comment



Thank you

Thank you for contacting Prositeweb,
Go back to the home page

Please fill free to contact us at any time for any request regarding our services. Contact us.

Thank you