Adding Google Translate on website tutorial

Does your website need Google Translate ?

Before adding anything on your website it is important to check whether it is required or not.Google translate helps visitors from language other than that of your website language make sense of your content.But Google Translate widget is a heavy resource.It takes 7 HTTP requests and 87000 bytes.So it is important to check if you have visitors from other language group visiting your website.

If you have decent number of visitors with different language than that of your website then it is good to use Google Translate on your website.The best thing is to have your content in different languages.But it is not possible for every website owner to manually translate their entire content to different languages.Google Translate does give a meaningful translation of your content.Visitors can make sense of your content.

To find out whether your website needs the Google Translation widget you can use below method

Google Analytics language option
Google Analytics language option
  • Sign into your Google Analytics account
  • Navigate to section Audience –> Geo –> Language
  • This section gives number of visits to your website from different language group.
  • Now using this section you will get an idea about popularity of your website in different language groups.If decent percentage of your website traffic is from language group other than your website language then you should consider translation service.
  • You should also note that Google Chrome automatically detects your website language and visitor browser language.In case visitor browser language is different then your content language then it prompts from automatic translation.
  • On Language page of Google Analytics Click on Secondary dimension.From the drop down select Browser.The result will give you views from different language group with browsers.
  • Now you should check number of visits from language group other then that of your website language and not using Chrome browser.
  • If you have good amount of visitors then it is time to use Google Translate.

We will see next steps to add Google Translate on your website.

Steps to create Google Translation widget

Step 1

First sign into your Gmail account.After signing into the account open this link in same browser.On the page displayed you can see features offered by Google Translate.You will also see a button Add your website.Click on the button Add your website.

Step 2

Google Translate Add Website
Google Translate Add Website

After clicking on add your website button you can see page (as shown in below image).On this page you should enter the website on which you are planning to use Google Translate widget.Also you need to select original language of your website on this page.After making these two changes Click on the Next button.

Step 3

Google Translate Plugin Setting
Google Translate Plugin Setting

On this page you need to configure your Google Translate widget.Configuration depends on your preference.But I am providing options preferred by me and reason of doing the same.

  • Translation Language Select the option All languages
  • Display Mode Select Automatic.With Automatic option the translation widget is displayed if browser language of visitor is different then that of your website content.There is no need to display this widget to visitors with same language group as that of your website content.So I prefer using Automatic in Display Mode.
  • Advanced Select the option Automatically display translation widget to users speaking languages than the language of your website content.Also if your website has content in more than one language then select the option your page contains content in multiple language.I would recommend selecting the option Track translation traffic using Google Analytics.For this option you need to enter your Google Analytics Web Property ID.If you see your Google Analytics tracking code you can see something with UA.You need to entire all UA string into Paste your Google Analytics web property id.

Step 4

After making all configuration changes above click on Get Code button.You will get Google Translation widget code on the next page.The code contains two parts (as shown below)

First Part

<meta name="google-translate-customization" content="d365b0956a9c406f-b06bd82de4154c64-gcd5abd44f35f4de4-a"></meta>

Second Part

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Copy both parts of the code.We will use these separately in next step.

Steps to add Google Translation widget

Above we have seen that Google Translation widget code consists of two parts.The first part starts with meta tag.This meta tag part should be added before </head> tag.The second ad code should be added in place you want to display the widget.I am providing detailed instructions for WordPress below.

In WordPress you will find </head> tag in header.php file of your theme.You need to place meta tag just above it and save the file.You can also locate other meta tags in the file and place this tag above or below that one.

Now to add Google Translation widget sidebar is preferable place.To add the Google Translation widget in sidebar drag text widget.Add the second part of the code in that text widget and save the widget.

Google Translation WordPress plugins

There are many plugins available in WordPress which provides translation feature.But I would not recommend using plugins for adding Google Translation widget.Plugins should be used for features complicated in nature.This widget can be added with simple easy to follow approach without much coding knowledge.So you should avoid using plugin.

But in case you are willing to use plugin for this purpose then I have compiled list of plugins for this purpose

Google Language Translator

This plugin does the same thing we did above.It does provide shortcode feature.This feature helps you add the widget to posts and pages also.You can add the same to specific pages or posts also.You can download the plugin from this link.

Transposh Translation widget for WordPress

This plugin is one of the most downloaded WordPress translation plugin.It offers automatic translation as well as human translation.It offers you choice between Google Translate,MS Translate or Apertium backends.You can download this plugin from this link.

SZ Google for WordPress

This plugin offers great number of features.It offers support for various Google products like Google +,Google Analytics,Google Drive,Google groups,Google Panoramio,Google Translate and Google Youtube.So if you want to use other Google products along with Google Translate then this plugins is for you.

You can download this plugin from this link.

Tracking usage of Google Translate

Earlier while creating Google Translate widget code we inserted Google Analytics profile id.Now we will track usage of Google Translate widget with Google Analytics.You can see usage details at Behavior –> Events –> Overview.After adding the widget you should check usage statistics.
As mentioned above the widget is a heavy resource.So this is important.If the widget is not used too much then it is not wise idea to use this widget on your site.

Consider sharing this plugin in case you found this useful.

Leave a Comment