Get Appointment

We have received your message and will contact you soon.

Thank you for choosing prositeweb, your web development agency in Montreal. Please call us at +1 (514) 548-2165 if you need immediate support.

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

The Google Translate API is a very fast 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 lost if they are not able to 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 offers 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 will be able to 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 on your website using the JavaScript library, you simply need to include the JavaScript code on your website. Then with a line of JavaScript code, you will bring up a language selection option. 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

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 that will initialize the “ matraduction” language selection form. In the initialization function, we transmit the identifier which will serve as the “translation_site_web” selection. The code above is more than enough to translate your website with Google's JavaScript library. [voir_demo title="See an example of using the Google library or download" demo="googletranslationjs.php"]

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, with very little effort, you can allow any visitor across the world to read your content.

Very easy integration.

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

It's 100% free

We will talk later about the option with API. But, what we can see is 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 the limit out of context. However, when you use the JavaScript library, you don't have the ability to make adjustments to 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. If you want advice on choosing the right translation module for your website, contact us .

It is not suitable for better SEO for search engines

Unless you make a little advance adjustments with 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, with the Google JavaScript translation, the content is displayed with different languages on the same page.

2 – Use of 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 your content for your website. This is the ideal option if you want to be more professional and better control what your customers read. In this section, we are going to your 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. A Google Cloud Console account
  4. You should also have some knowledge of managing MySQL databases

Before embarking on this approach, it is important to note that the Google Translate API is not always free. The cost depends on the usage rate. Therefore, when using, you should be sure to 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 website for translation . How to translate your website with Google Translation API or Google Translation? Then you need to login or create an account. Basically, 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: Sample screen of Google Cloud You must then click on the icon right 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 generally automatically filled in with data you provided when creating your account. Create a google cloud account When you click on the “Create” button, the platform will configure your new project. 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.

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 3 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 the approach you take, you could also use the OAuth Client ID. Google translation API key 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 Setup

To make this key 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 need to make a restriction of 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, add your website URL or IP.

Finally, select “Restrict Key” at the bottom of the page. In the restriction options you need to select. Indeed, with an API key, it is possible to use it on different websites. Therefore, someone who comes across this key can use it in their project. Thus, it is important to restrict its use to avoid abusive charges. Also, you can use your key for different types of projects (Adding a map to your website, authentication or translation). It is also for this reason that you must limit in the configuration. Restricting will help you, for example, better assess the usage quota. [the_call_to_action title="Do you need a professional web service for your multilingual site?" action_text="Contact us" action_type="modal" action_link="exampleModal" data_title="Get the extension download link directly in your email " data_action ="download" data_link="prositeweb_paiement"]

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 basic elements. 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 simply maneuver the codes, 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.

Installing and Configuring Google Cloud PHP Translate

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

A summary 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. Indeed, to include the components in your project, all you have to do is 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. You must replace "your_key" in the expression below with your API key that you created above.

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

Some recommendations

  • In order to use the resources optimally, you can, for example, do the translation and insert the data into a database. This will help you save in 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 take this into consideration.

Some alternatives 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 embarking on development, you must explore the market to see if there are any solutions that 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 WMPL extension is a translation tool for WordPress websites. It is a solution to which you can subscribe to translate your website in 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 get quality work done, contact us today .

Share :

npgilblas

WordPress Theme Design — Media Technology
03 May 2022
Online Store Design — White Definition
04 May 2022

Do you have a project in mind? Contact our web agency for a free evaluation.

We are the experts in creating websites, online stores and functionalities for websites based in Montreal. Contact us today to create your website starting at $1,200.