Как вставить виджеты на сайт

  1. Как разместить код виджета
  2. Как добавить несколько виджетов на одну страницу
  3. Какую область выделить под виджет

Как разместить код виджета

Код состоит из трех частей, которые можно расположить разными способами:

КодГде расположить
Способ 1Способ 2Способ 3

1. Скрипт для подключения к API виджетов:

<script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
В элементе headВ элементе headВ элементе body

2. Код с параметрами виджета:

<script type="text/javascript">
  ...
</script>
В элементе headВ элементе bodyВ элементе body

3. Контейнер div, в котором будет отображаться виджет:

<div id="..."></div>
В элементе bodyВ элементе bodyВ элементе body
Какой способ выбрать
  1. Скрипт для подключения к API и код с параметрами — в элементе head.

    Рекомендуемый способ — так виджеты загружаются быстрее, повышается CTR виджета и увеличивается количество кликов.

  2. Скрипт для подключения к API — в элементе head, а код с параметрами — в элементе body.

    Используйте этот способ, если вы ищете товары для виджета по параметрам, которые нельзя поместить в элемент head. Рекомендуем размещать код с параметрами как можно выше в элементе body.

    В этом случае виджеты загружаются не сразу, а по мере загрузки страницы. То есть, медленнее, чем в первом варианте.

  3. Скрипт и код с параметрами — в элементе body.

    Не рекомендуем использовать этот способ, он приводит к медленной загрузке виджетов. Если размещаете скрипт и код в элементе body, советуем расположить их как можно выше.

Примечание. Вы можете загружать виджеты синхронно. Однако в этом случае сайт будет загружаться медленнее.
Пример кода

Код в элементе head:

<script src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
<script type="text/javascript">
      window.YaMarketAffiliate.createWidget({
        containerId: "marketWidget",
        ...  // Параметры виджета
      });
</script>

Код в элементе body:

<div id="marketWidget"></div>

Как добавить несколько виджетов на одну страницу

Чтобы разместить несколько виджетов на одной странице:

  1. Вызовите в скрипте метод YaMarketAffiliate.createWidget нужное количество раз:

    <script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
    <script type="text/javascript">
      (function (w) {
        function start() {
          w.removeEventListener("YaMarketAffiliateLoad", start);
          w.YaMarketAffiliate.createWidget({
            containerId: "marketWidget1",
            ...   // Свойства первого виджета
          });
          w.YaMarketAffiliate.createWidget({
            containerId: "marketWidget2",
            ...   // Свойства второго виджета
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
  2. Разместите в коде страницы контейнеры div для виджетов:

    <div id="marketWidget1"></div>
    ...
    <div id="marketWidget2"></div>

Какую область выделить под виджет

Виджеты «Где купить товар» (размеры в пикселях)
ВиджетШиринаВысота
Товар и список предложенийМинимум 240Минимум 351
Список предложений (без товара, полный)Минимум 240Минимум 129
Список предложений (без товара, краткий)Минимум 240Минимум 104
Список предложений с изображениямиМинимум 240Минимум 144
Товар и лента предложенийМинимум 240Всегда 403
Лента предложений (без товара)Минимум 240Всегда 221
Виджеты «Подборка товаров» и рекомендательные виджеты (размеры в пикселях)
ВиджетШиринаВысота
ВитринаМинимум 120Минимум 200

Для каждой строки (начиная со второй): минимум — 185, максимум — 235

Список товаровМинимум 240Минимум 110
КарусельМинимум 300Минимум 250
Полноразмерная подборкаВсегда 300Всегда 600