Инструкция по размещению значка

Как интегрировать код значка

Участникам программы "Google Отзывы клиентов" нужно добавить к коду своего сайта два фрагмента. Один – для модуля опросов, другой – для значка программы. Сам значок размещать на сайте не обязательно. Если при интеграции кода у вас возникнут проблемы, посетите эту страницу.

В этом разделе подробно рассматриваются следующие темы:

Инструкция

Чтобы разместить значок программы "Отзывы клиентов" на сайте магазина, выполните следующие действия:

  1. Уточните используемую версию DOCTYPE.
  2. Добавьте на сайт код значка.

Далее мы расскажем, как это сделать.

Когда вы добавите код значка, на сайте магазина появится изображение с вашим рейтингом продавца:

Как правило, чтобы рейтинг продавца отображался на значке, за последний год у вашего магазина должно быть как минимум 100 отзывов.

Проследите за тем, чтобы значок не перекрывали другие элементы вашего сайта.

Уточните используемую версию DOCTYPE

Вы сможете разместить значок, только если страницы поддерживают DOCTYPE для HTML5. Открывающий тег этого элемента выглядит так:

<!DOCTYPE html>

Эта строка должна быть первой в HTML-коде сайта. Если вы используете DOCTYPE для HTML5, браузер отображает страницы в стандартном режиме, строго соблюдающем требования W3C и IETF, а не в режиме совместимости. Последний нужен для показа страниц, созданных для устаревших версий браузеров.

Примечание. Перед элементом DOCTYPE не должно быть пробела или комментариев.

Добавьте на сайт код значка

Разместить значок можно на любой странице сайта. Для этого к ее коду нужно добавить один фрагмент.

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

Вот как добавить значок:

  1. Вставьте в код страницы этот фрагмент:

    <!-- BEGIN GCR Badge Code -->
    <script src="https://apis.google.com/js/platform.js?onload=renderBadge"
      async defer>
    </script>

    <script>
      window.renderBadge = function() {
        var ratingBadgeContainer = document.createElement("div");
          document.body.appendChild(ratingBadgeContainer);
          window.gapi.load('ratingbadge', function() {
            window.gapi.ratingbadge.render(
              ratingBadgeContainer, {
                // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ
                "merchant_id":
    MERCHANT_ID,
                // НЕОБЯЗАТЕЛЬНАЯ ЧАСТЬ
                "position": "
    POSITION"
              });           
         });
      }
    </script>
    <!-- END GCR Badge Code -->

    Этот фрагмент нужно вставить в код страницы перед закрывающим тегом </BODY>. Относительно фрагмента HTML-кода модуля опросов его можно размещать в любом порядке.

  2. Замените переменные на нужные динамические значения. Подробная информация о каждом из параметров представлена в таблице ниже:
     
    Переменная Обязательная? Описание
    MERCHANT_ID Да Ваш идентификатор Merchant Center. Его можно посмотреть в Google Merchant Center.
    POSITION Нет Этим параметром определяется расположение значка на странице.
    • Укажите BOTTOM_RIGHT, чтобы значок отображался в правом нижнем углу.
    • Укажите BOTTOM_LEFT, чтобы значок отображался в левом нижнем углу.
    • Укажите INLINE, чтобы положение значка соответствовало месту его кода в коде страницы. Проследите, чтобы другие элементы не перекрывали значок. Есть более простой способ разместить значок таким образом, он описан здесь.

    Значение по умолчанию – BOTTOM_RIGHT.

     

  3. Чтобы установить язык значка, добавьте в код этот фрагмент:
     
    
    <!-- BEGIN GCR Language Code -->
    <script>
      window.___gcfg = {
        lang: 'LANGUAGE'
      };
    </script>
    <!-- END GCR Language Code -->
    

    Этот фрагмент нужно вставить в код страницы перед закрывающим тегом </BODY>. Относительно фрагмента HTML-кода модуля опроса его можно размещать в любом порядке.

    В качестве значения параметра lang вместо слова LANGUAGE вставьте во фрагмент одно из допустимых обозначений:

    • af
    • ar
    • cs
    • da
    • de
    • en
    • en-AU
    • en-GB
    • en-US
    • es
    • es_419
    • fil
    • fr
    • ga
    • id
    • it
    • ja
    • ms
    • nl
    • no
    • pl
    • pt-BR
    • pt-PT
    • ru
    • sv
    • tr
    • zh_CN
    • zh_TW

    Если вы не укажете значение параметра lang, то модуль опроса будет отображаться на языке браузера пользователя.

  4. Проделайте первые три шага на всех страницах, где хотите разместить значок.
  5. Вставьте фрагмент для модуля опроса в код страницы подтверждения заказа. Это действие обязательно.

Вот как разместить значок в произвольном месте на странице:

  1. Чтобы загрузить JavaScript для значка, в HTML-код страницы перед закрывающим тегом BODY вставьте следующий фрагмент:

    
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    
  2. Вставьте эту строку в ту часть HTML-кода, где вы хотите разместить значок:
    
    <g:ratingbadge merchant_id=MERCHANT_ID></g:ratingbadge>
    

    Вместо MERCHANT_ID вставьте свой идентификатор Merchant Center.

  3. Укажите язык значка. Как это сделать описано здесь.

  4. Добавьте модуль опроса на все страницы подтверждения заказа. Это действие обязательно.

Пример кода значка

Например, ваш идентификатор Merchant Center – 42 и вы хотите разместить значок в нижнем левом углу страницы. В таком случае код будет выглядеть вот так:


<!-- BEGIN GCR Badge Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderBadge"
  async defer>
</script>

<script>
  window.renderBadge = function() {
    var ratingBadgeContainer = document.createElement("div");
    document.body.appendChild(ratingBadgeContainer);
    window.gapi.load('ratingbadge', function() {
      window.gapi.ratingbadge.render(
        ratingBadgeContainer, {
          "merchant_id": 42,
          "position": "BOTTOM_LEFT"
        });
    });
  }
</script>
<!-- END GCR Badge Code -->

<!-- BEGIN GCR Language Code -->
<script>
  window.___gcfg = {
    lang: 'ru'
  };
</script>
<!-- END GCR Language Code -->

Если значок не отображается или при загрузке страницы появляются сообщения об ошибках, перейдите к разделу Устранение неполадок.

Эта информация оказалась полезной?
Как можно улучшить эту статью?

Требуется помощь?

Войдите в свой аккаунт, чтобы мы могли предоставить вам дополнительные варианты поддержки и быстрее решить вашу проблему.