Website translation button / widget not working with Google Sites (new)

[Michael David]

Dear Team,

Request to repost here from another forum

https://support.google.com/translate/thread/93461673?hl=en# 

Thank you for re-opening Google Translate of websites for non-profit sites during the pandemic.  I would like to offer translation services for our Hand Surgical Unit's site (www.uhcwhand.org) which is created using Google Sites (the new version).  I have registered my interest at https://docs.google.com/forms/d/e/1FAIpQLSfAyBtxLmBe3s1m-6nkSBcs7W_8EAUmwmPTEXlSqctg1QCRBw/viewform

After completing the registration process, embedding the code on either a page or the shared footer of my Google Site editor, displays the button correctly.  However once the page is published the button does not translate the website, but instead translates just that frame housing the button.

Code inserted into a frame using the "embed" option of Google Sites is:

<div id="google_translate_element"></div>

<script type="text/javascript">

function googleTranslateElementInit() {

  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

}

</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Any help would be appreciated greatly.

Kind regards,

Michael.

Details

Translate not displaying output,  Other, Safari

[Manuel Alaman Escolano]

Hi,

At first sight, the issue may be related to the organization of the divisions of your code. A sanity check is that  we are sure that the request reaches the endpoint and is able to translate a piece of the code, however it is just a part of the page. Google is able to access your HTML page and translate a part of it. Bear in mind that this widget is only functional on public websites on the Internet.

However, bear in mind that now Translate has been integrated into Chrome directly and a pop-up will be shown to users who speak another language. I guess that the functionality is covered by this, is that sufficient for your HTML page?

[Michael David]

Dear sir,

Thank you for writing back.  I take your point completely that one alternative would to mandate users use Chrome.  However, we are hoping to expand our virtual clinic services and reduce hospital visits during the pandemic.  I cannot guarantee patients will be willing to download and install Chrome (even if I placed a link on the page), and the return to the site to view in their own language.  I was really hoping to get this widget working, but to translate the entire site rather than just the frame it is placed in.  I had hoped since I was using Google Sites that this would not be too great a struggle.  Equally, if the two Google services are not compatible, then I am not sure if there are alternatives available.

Forgive me with regards to answering your comments on the code division organisation.  I am a hand surgeon and still a novice at this.  Running the website is something I do on the side, particularly during the pandemic.  I simply copied and pasted the code from the Google Form result that was displayed after I registered for the renewed translation service.  

As I said, I would extremely grateful for more help on getting the button to work somehow.

Kind regards,

Michael.

[Michael David]

Just as an aside.  A rather less elegant solution seems to be just using the announcement banner to link to Google Translate directly, inputting the website details into the URL string.  Forgive me if I have used the wrong words to describe what I mean.  Essentially, this link shows it is technically possible to translate the entire site: https://translate.google.com/translate?hl=en&sl=en&tl=fr&u=https%3A%2F%2Fwww.uhcwhand.org%2F&sandbox=1

The original widget is still visible in the footer.  (Have tried placing it elsewhere on the page to no avail.)  Interesting that when using the link above the horizontal navigation page does not work properly ... will try the vertical one.  Translation also can't seem to cope with collapsible text.

Kind regards,

Michael.

[Manuel Alaman Escolano]

Hi,

I understand that the widget solution is the one that best fits your requirements. It is true that it is possible to directly translate the website using Google Translate and the URL for the website.

As it is very difficult to understand how your complete website works just with the piece of code that you provided. However, the piece of code provided looks good and should be working. Let me attach a couple of tutorials [1,2] and maybe you can follow them in order to check if there is something missing on your code.

[1] - 

https://www.w3schools.com/howto/howto_google_translate.asp

[2] -

https://www.coderepublics.com/howto/how-to-google-translate.php

[Michael David]

Thank you once again.  Both links very useful and go through some of the theory ... which is useful for me.  However, despite trying again from scratch using their code, the same thing happens.  It seems to only wish to translate the "frame" or "box" (or whatever the correct word should be), which Google Sites creates to allow me to "embed" this source html code.  I have put an example on one of my sub-pages here: https://www.uhcwhand.org/covid-19

Is it something to do with the way Google Sites arranges content on its pages?

Kind regards,

Michael.

[Manuel Alaman Escolano]

Thanks for providing the example, I could inspect the code of you page from there.

It seems to me that it is translating only the subsection where the button is [1]. That is what I was referring to when I said "the organization of the divisions of your code", I would try to place the button on a higher hierarchy and see if that way the full website gets translated. 

[Michael David]

Thanks for taking a look.  Yes that is where I have been struggling too.  Google Sites does not seem to allow me to place the code anywhere except one of their embedded frames or divisions.  Not sure if you have much interaction with Google Sites, so apologies if outside your usual scope.

Kind regards,

Michael

[Manuel Alaman Escolano]

I did not know that you were using Google sites.

Even though I am familiar with web oriented languages, I am not familiar with Google sites. However I took a look at Google sites and it seems that the only way of embedding code is using the Emdeb, which places the button on a specific division of the code so it does not translate the full site. Apparently, the HTML piece of code that you provided is not meant to be used like that on Google Sites.

I found this announcement from Google (it's from 2009 though) and most of the links provided are not available anymore.

Another workaround would be including your important text within the button and that is working for me [2].

[1] -

https://googleblog.blogspot.com/2009/12/translate-google-sites-with-one-click.html 

[2] -

<html>

<body>

<p> This is your important text.</p>

<div id="google_translate_element"></div>

<script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');}

</script>

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

</body>

</html>