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

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

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

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

Код Где расположить
Способ 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 виджета и увеличивается количество кликов.

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

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

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

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

    • используете несколько виджетов с различным кодом.

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

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

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

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

    Если размещаете скрипт и код в элементе 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>

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

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

<div id="..." style="width: 970px; padding: 0px 4px;" ...></div>
Возможные стили
Атрибут Описание Значение
width

Задает ширину виджета.

Можно использовать любые значения, допустимые в CSS.

"970px"
padding

Задает отступ между виджетом и тем элементом, в который он вставлен.

Можно использовать любые значения, допустимые в CSS.

Если вы указали:

  • 1 значение — отступ будет одинаковым со всех сторон;
  • 2 значения — первое значение задает отступ от верхнего и нижнего края, второе — от левого и правого;
  • 3 значения — первое значение задает отступ от верхнего края, второе — от левого и правого края, а третье — от нижнего края;
  • 4 значения — поочередно устанавливаются отступы от верхнего, правого, нижнего и левого края.

"0px 4px"

Вы также можете изменить внешний вид виджетов с помощью различных параметров. Подробнее см. в разделе Вопросы по внешнему виду виджетов.

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

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

  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. Это удобно, если требуется вставлять одинаковый скрипт виджета на разные страницы, меняя только код контейнера.

Внимание. Если поисковый запрос задан в коде контейнера, виджет отобразится позже, чем при поиске по текстовому запросу, — только после загрузки полного HTML-кода страницы. Пользователи могут не увидеть виджет до его загрузки (например, если пролистают его или уйдут со страницы) и не совершить оплачиваемые клики.
Пример

В элементе head:

<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,
      searchSelector: "div#marketWidget",
      searchSelectorAttr: "data-search-text",
      themeId: 2
    }
  });
  ...
</script>

В элементе body:

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

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

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

Виджеты Маркета «Где купить товар»
Виджет Ширина Высота
Список предложений с описанием товара Минимум 240 Минимум 351
Список предложений без описания товара Минимум 240 Минимум 129
Компактный список предложений без описания товара Минимум 240 Минимум 104
Подробный список предложений Минимум 240 Минимум 144
Витрина Минимум 260

Минимум 319

Для каждой строки — 178

Карусель с описанием товара Минимум 240 Всегда 403
Карусель без описания товара Минимум 240 Всегда 221
Виджеты Маркета «Подборка товаров» и рекомендательные виджеты Маркета
Виджет Ширина Высота
Витрина Минимум 120 Минимум 200

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

Список товаров Минимум 240 Минимум 110
Компактный список товаров Минимум 255 Минимум 420

Для каждой строки (начиная с седьмой): минимум — 50

Карусель Минимум 300 Минимум 250
Виджеты Маркета с информацией о товарах
Виджет Ширина Высота
Средняя цена

Минимум 240

Максимум 300

Произвольная

Характеристики

Минимум 300

Произвольная

Отзывы

Минимум 300

Произвольная

Виджеты Беру «Товар»
Виджет Ширина Высота
Подробный Минимум 240

Минимум 568 (для компьютеров)

Минимум 418 (для мобильных устройств)

Компактный Минимум 210 Всегда 36
Виджеты Беру «Подборка товаров»
Виджет Ширина Высота
Витрина Минимум 120

Минимум 231

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

Список Минимум 210 Минимум 97