Создание плагина Google-Translate не отслеживает посетителей, если они не попросят - PullRequest
Новая
       19

Создание плагина Google-Translate не отслеживает посетителей, если они не попросят

0 голосов
/ 12 апреля 2019

Я хочу внедрить плагин GoogleTranslate на моем личном сайте.Однако я не хочу, чтобы Google мог отслеживать всех посетителей моего сайта по их сценарию;если только мои посетители не решат использовать эту функцию.

Я включу код Google ниже, так как я должен вставить его в тело моей страницы: 

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

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

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




I would appreciate to have specific code to use, not just an explanation. Basically, I want Google's script to load only when a visitor decides s/he wants to use it and actually clicks on it.

1 Ответ

1 голос
/ 01 мая 2019

Приведенный ниже код не будет загружать скрипт с серверов Google, пока не будет нажата кнопка «Загрузить Google Translate». 

<html>
  <head>
    <script>
      function loadGoogleTranslate() {
        var scriptTag = document.createElement('script'); 
        scriptTag.type = "text/javascript"; 
        scriptTag.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; 
        var head = document.getElementsByTagName('head')[0]; 
        head.appendChild(scriptTag);
      }

      function googleTranslateElementInit() {
        // Hide the section containing the "Load Google Translate" button
        var beforeLoadSection = document.getElementById('before-load');
        beforeLoadSection.style.display = 'none';

        // Set up Google Translate now that their script has loaded
        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

        // Show the section containing the Google Translate element
        var afterLoadSection = document.getElementById('after-load');
        afterLoadSection.style.display = '';
      }
    </script>
  </head>
  <body>
    <div id="before-load">
      <button onclick="window.loadGoogleTranslate()">Load Google Translate</button>
    </div>
    <div id="after-load" style="display:none">
      <div id="google_translate_element"></div>
    </div>
  </body>
</html>

Вы можете убедиться, что скрипт Google не загружен до нажатия кнопки, просмотрев сетевой трафик (например, на вкладке «Сеть» в DevTools в Chrome).

Обратите внимание, что вы также можете просто создать ссылку, подобную этой, по которой пользователи могут щелкнуть, чтобы получить доступ к переведенной версии вашей страницы, никакой изящный Javascript не требуется: https://translate.google.com/translate?hl=&sl=en&tl=ar&u=https%3A%2F%2Fstackoverflow.com%2Fq%2F55643969%2F3063273

Я выделил детали, о которых вам нужно беспокоиться:

  • ru - это язык "from" (в данном случае английский)
  • ar - это язык "to" (в данном случае арабский)
  • длинная строка текста - это URL-кодированная форма страницы для перевода. Google "URL кодировать", если вы хотите узнать, как это сделать. Javascript имеет встроенную функцию, которая может помочь

P.S. Вы, вероятно, получили отрицательное мнение от кого-то, потому что ему не нравятся вопросы типа «напишите мой код». Если бы вместо этого вы включили минимальный, полный и проверяемый пример (MCVE) , то, вероятно, вас бы не понизили, но создать MCVE может быть очень сложно, если вы не знаете, с чего начать. Вот дополнительное чтение по этому вопросу, если вы хотите узнать больше о культуре здесь: https://meta.stackoverflow.com/a/345249/3063273

P.P.S. Если вы хотите использовать приведенный выше необычный код Javascript, имейте в виду, что вы не можете использовать его в iframe. Если вы не знаете, что такое iframe, не беспокойтесь об этом.

...