Можно не читать, а смотреть

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

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

<script async src="https://aflt.market.yandex.ru/widget/script/api" 
type="text/javascript"></script>

<script type="text/javascript">
  ...
</script>

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

Какой способ выбрать

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

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

   Этот способ подходит, если вы вставляете на сайт один виджет или несколько виджетов с одинаковым кодом (например, настроен поиск по запросу из HTML‑элемента, в качестве которого используется заголовок статьи).

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

   Используйте этот способ, если вы:

   • ищете товары для виджета по параметрам, которые нельзя поместить в элемент head;
   • используете несколько виджетов с различным кодом.

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

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

   Совет

   Если вы вставляете скрипт для подключения к API в элемент head (способы 1 и 2), разместите его перед всеми скриптами, которые загружаются синхронно (скрипты без атрибута async). Это ускорит загрузку виджета на странице.

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

   Не рекомендуем использовать этот способ, он приводит к медленной загрузке виджетов. Используйте его только в том случае, если у вас нет доступа к элементу head.

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

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

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

Как настроить ширину и отступы виджетов

Вы можете настроить ширину и отступы для виджетов с помощью CSS-стилей.

Возможные стили:

Чтобы настроить ширину и отступы:

Для конкретных виджетов
Добавьте к контейнеру div нужного виджета атрибут style с правилами для настройки стиля. Например:

<div id="..." style="width: 970px; padding: 0px 4px;" ...></div>

Для всех виджетов на странице

1. Настройте CSS-стиль для всех элементов одного класса. Например, в элемент head добавьте стиль с селектором .marketWidget и правилами для ширины и отступа:

   <style>
     /* Селектор .marketWidget применяет правила
      * ко всем элементам с атрибутом class="marketWidget" */
     .marketWidget {
       width: 970px;
       padding: 0px 4px;
     }
   </style>
   

2. Добавьте атрибут class="marketWidget" ко всем контейнерам виджетов, чтобы к ним применялись правила из стиля. Например:

   <div class="marketWidget" id="widgetIntro"></div>
   ...
   <div class="marketWidget" id="widgetComparison"></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",
           type: "offers",
           params: {
             clid: 2310490,
             searchText: "apple ipad air",
             themeId: 2
           }
         });
         w.YaMarketAffiliate.createWidget({
           containerId: "marketWidget2",
           type: "offers",
           params: {
             clid: 2310490,
             searchText: "samsung galaxy tab",
             themeId: 2
           }
         });
       }
       w.YaMarketAffiliate
         ? start()
         : w.addEventListener("YaMarketAffiliateLoad", start);
     })(window);
   </script>
   

2. Разместите в коде страницы контейнеры div для виджетов.

   Пример для двух виджетов:

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

Как задать поисковый запрос в коде контейнера

В качестве элемента для поиска можно использовать контейнер виджета, добавив к нему атрибут с названием товара. Для этого нужно указать селектор контейнера в параметре searchSelector, а название атрибута — в параметре searchSelectorAttr. Это удобно, если требуется вставлять одинаковый скрипт виджета на разные страницы, меняя только код контейнера.

<script async src="https://aflt.market.yandex.ru/widget/script/api" 
        type="text/javascript">
</script>
<script type="text/javascript">
  ...
  w.YaMarketAffiliate.createWidget({
    containerId: "marketWidget",
    type: "offers",
    params: {
      clid: 2310490,
      erid: 'AX1LYwMgKYsyMqgz',
      searchSelector: "div#marketWidget",
      searchSelectorAttr: "data-search-text",
      themeId: 2
    }
  });
  ...
</script>

<div id="marketWidget" data-search-text="Яндекс Телефон"></div>

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

Все размеры указаны в пикселях.

Виджеты Маркета «Один товар»

Виджеты Маркета «Подборка товаров» и рекомендательные виджеты Маркета

Виджеты Маркета с информацией о товарах

Узнайте больше

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

Полезные ссылки

• Стать партнером
• API партнерской сети Маркета
• Личный кабинет Дистрибуции
• Справка Дистрибуции
• Политика Дистрибуции