Как создать код виджета вручную

Структура

Код виджета состоит из двух частей:

  1. Скрипт виджета (рекомендуется вставлять в элемент head, как можно ближе к его началу):

    <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: ...,
            type: ...,
            fallback: ...,
            params: {
              clid: ...,
              themeId: ...,
              searchText: ..., /* или */ searchSelector: ..., /* или */ searchModelIds: ...,
    /* или */ searchSkuIds: ..., /* или */ searchCategoryIds: ...,
              searchSelectorAttr: ...,
              searchFilters: ...,
              searchAdult: ...,
              searchType: ...,
              defaultRegion: ...,
              searchCount: ...,
              buttonLinkType: ...,
              searchMatch: ...,
              searchSort: ...,
              searchInStock: ...,
              searchPromoTypes: ...,
              searchPriceTo: ...,
              searchShops: ...,
              searchShopsRecommended: ...,
              searchVendorIds: ...,
              searchLocalOffersFirst: ...,          
              themeButtonName: ...,
              themeBackgroundColor: ...,
              themeRows: ...,
              themeShowOfferName: ...,
              linkToMarket: ...,
              specificationGroups: ...,
              reviewsCount: ...,
              metrikaCounterId: ...,
              vid: ...        
            }
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
    Скопировано
  2. Контейнер div, в котором будет отображаться виджет (нужно вставить в элемент body в том месте, где вы хотите показывать виджет). Идентификатор — значение параметра containerId.

    <div id="..."></div>
Совет. Вы можете настроить ширину виджета с помощью CSS-стилей. Например:
<div id="..." style="width: 970px;" ...></div>

Список параметров

Значения параметров

buttonLinkType

С помощью параметра вы можете выбрать действие и название кнопки виджета для товаров, которые можно купить на Маркете:

Доступные кнопки указаны в таблице ниже.

Значение параметра Название кнопки Действие кнопки
add_to_cart В корзину

Появится сообщение о добавлении товара в корзину на Маркете. После этого пользователь сможет перейти в нее, просмотреть список добавленных товаров и оформить заказ на Маркете.

checkout Купить

Откроется страница оформления заказа. В заказ будет входить только тот товар, по которому пользователь кликнул в виджете. Если в корзине на Маркете были другие товары, они не попадут в заказ, но останутся в корзине.

product Посмотреть

Откроется карточка товара. Эта кнопка используется по умолчанию.

Если пользователи с помощью вашего виджета перейдут на Маркет и оформят заказ, вы получите вознаграждение за заказы на Маркете. При этом клики по предложениям с товарами, которые можно купить на Маркете, не тарифицируются (вознаграждение за них не выплачивается).

⚠ Параметр вложен в params.

clid

Используйте этот параметр, чтобы указать ваш идентификатор партнера Яндекс.Маркета. Учитывайте, что для каждой площадки и типа инструментов монетизации CLID является уникальным. При этом CLID для кликов также может использоваться и для заказов.

Вы можете узнать свой CLID у персонального менеджера или найти в интерфейсе Дистрибуции, на странице Продукты.

⚠ Параметр вложен в params и является обязательным.

containerId

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

⚠ Обязательный параметр.

defaultRegion

С помощью данного параметра вы можете указать регион показа предложений по умолчанию.

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

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

⚠ Параметр вложен в params.

fallback

С помощью данного параметра вы можете отобразить рекомендательный виджет «Приглядитесь к этим предложениям» вместо исходного виджета Маркета, если для него не нашлось товаров:

  • true — автозамена включена;

  • false — автозамена выключена.

Подробнее см. в разделе Замена виджета Маркета на рекомендательный виджет.

linkToMarket

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

Если указано значение true, по клику на товар пользователь перейдет на его карточку на Маркете. Партнер получит вознаграждение за заказ товара на Маркете, или за переход с Маркета на сайт магазина, или за клик по номеру телефона в течение 7 дней.

По умолчанию используется значение false: клик по товару ведет на предложение, занимающее первое место в блоке «Топ предложений» на карточке товара. Партнер получит вознаграждение за заказ товара на Маркете или за переход на сайт магазина.

⚠ Параметр вложен в params.

metrikaCounterId

Вы можете добавить в виджет номер счетчика, созданный в Яндекс.Метрике. С его помощью можно отслеживать статистику по виджету. Вы можете найти номер счетчика в Метрике, в меню Настройка.

Подробнее см. в разделе Статистика в Яндекс.Метрике (по виджетам).

⚠ Параметр вложен в params.

params

В данном объекте содержится большинство параметров виджета.

⚠ Обязательный параметр.

reviewsCount

Вы можете указать в данном параметре количество отзывов в виджете Маркета «Отзывы».

Доступные значения: от 1 до 10. По умолчанию в виджете отображаются 3 отзыва.

⚠ Параметр вложен в params.

searchAdult

Используйте параметр для отображения интим‑товаров в виджете. Поиск таких товаров осуществляется по категории Товары для взрослых с возрастным ограничением 18+.

Чтобы показать в виджете интим‑товары, укажите текстовый поисковый запрос и добавьте в код виджета параметр searchAdult со значением true.

Если в поисковом запросе вы указали ID интим‑товара на Маркете, он отобразится в виджете. При этом параметр searchAdult не повлияет на результаты поиска. Поэтому параметр не нужно добавлять в код при настройке поиска по ID товара.

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

⚠ Параметр вложен в params.

searchCategoryIds

С помощью данного параметра вы можете добавить поиск товаров по ID категории.

Самостоятельный поиск по ID категории поддерживается только для виджета Маркета «Подборка товаров». При этом он используется только вместе с другим видом поиска для виджетов:

Помимо поиска параметр также используется в качестве фильтра по категориям товаров для виджетов Маркета:

Указывайте идентификаторы категорий через запятую, например:

searchCategoryIds: [91072, 91498] // или
searchCategoryIds: [91072]
Скопировано

Для рекомендательных виджетов Маркета и виджетов с информацией о товарах указывайте только один идентификатор.

Как узнать идентификатор категории

Откройте страницу категории на Маркете и посмотрите на ее URL. Идентификатор — это набор цифр после «...?hid=». Например:

https://market.yandex.ru/catalog/54726/list?hid=91491

⚠ Параметр вложен в params и является обязательным, если в виджете «Подборка товаров» вы используете данный способ поиска вместо других. Подробнее см. в разделе Поиск товаров для виджетов.

searchCount

Используйте параметр, если вы хотите зафиксировать количество товаров или предложений, отображаемых в виджете.

Параметр принимает значение:

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

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

⚠ Параметр вложен в params.

searchFilters

Используйте параметр, чтобы добавить поиск товаров по характеристикам.

⚠ Параметр вложен в params. Он используется только вместе с каким-либо обязательным параметром поиска.

searchInStock

Используйте параметр, чтобы в виджете показывались только товары в продаже.

Если параметр имеет значение false, в виджет могут попасть предложения товаров, которые уже не продаются. В этом случае вместо списка предложений появятся сообщение «Нет в продаже» и рекомендательная подборка «С этим товаром смотрят».

Значения по умолчанию:

Для остальных способов поиска фильтр не поддерживается.

Внимание. Используется только для виджетов «Один товар».

⚠ Параметр вложен в params.

searchLocalOffersFirst

С помощью параметра вы можете показать в виджете сначала все товары или предложения из региона пользователя, а затем уже из других регионов.

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

Примечание. Проверяйте на практике эффективность использования этого параметра. Параметр может снизить количество кликов.

⚠ Параметр вложен в params.

searchMatch

С помощью данного параметра вы можете включить поиск товаров по точному запросу. Тогда в виджете отобразятся те товары, названия которых содержат все слова из поискового запроса.

Чтобы использовать точный поиск, укажите значение exact.

Параметр используется только вместе с searchText или searchSelector.

⚠ Параметр вложен в params.

searchModelIds

Используйте данный параметр, если вы выбрали способ поиска по ID товара на Маркете.

⚠ Параметр вложен в params и является обязательным, если вы используете данный способ поиска вместо других. Подробнее см. в разделе Поиск товаров для виджетов.

searchPriceTo

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

⚠ Параметр вложен в params.

searchPromoTypes

Вы можете отфильтровать товары по типу акции.

Используйте фильтр вместе с каким-либо обязательным параметром поиска, чтобы в виджете отображались только товары, которые участвуют в акциях.

Типы акций:

  • discount — скидка на товар;

  • promo_code — промокод;
  • gift_with_purchase — подарок при покупке товара;

  • n_plus_m — при покупке N товаров M таких же товаров бесплатно.

При желании вы можете указать несколько типов акций в массиве через запятую, например:

searchPromoTypes: ["promo_code", "gift_with_purchase"] // или
searchPromoTypes: ["discount"]
Скопировано

⚠ Параметр вложен в params.

searchSelector

Используйте данный параметр, если вы выбрали поиск товаров по запросу из HTML‑элемента. Укажите в нем селектор для HTML‑элемента, из которого формируется поисковый запрос.

⚠ Параметр вложен в params и является обязательным, если вы используете данный способ поиска вместо других. Подробнее см. в разделе Поиск товаров для виджетов.

searchSelectorAttr

С помощью данного параметра вы можете указать атрибут HTML‑элемента, который добавляется к селектору для формирования поискового запроса.

⚠ Параметр вложен в params и является обязательным, если вы используете данный способ поиска вместо других. Подробнее см. в разделе Поиск товаров для виджетов.

searchShops

Используйте данный параметр, чтобы в виджете отобразить товары из определенных магазинов. Для этого укажите домены сайтов магазинов через запятую, например:

searchShops: ["shop123.ru", "shop456.ru"] // или
searchShops: ["example-shop.ru"]
Скопировано
Примечание. Виджет будет содержать только предложения магазина, домен которого вы указали. Например, в виджете с доменом shop123.ru не будет предложений магазина another-shop123.ru.

⚠ Параметр вложен в params.

searchShopsRecommended

С помощью данного параметра вы можете показать в виджете товары или предложения от магазинов, которые рекомендует производитель. Для этого используйте параметр со значением true.

По умолчанию показываются все товары или предложения. Подробнее про рекомендации производителей см. в Справке Маркета для рекламной модели ADV.

⚠ Параметр вложен в params.

searchSkuIds

Используйте параметр для виджета «Подборка товаров», если вы выбрали способ поиска по ID товара на Маркете.

⚠ Параметр вложен в params и является обязательным, если вы используете данный способ поиска вместо других. Подробнее см. в разделе Поиск товаров для виджетов.

searchSort

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

Типы сортировки:

  • popular — по популярности (значение по умолчанию);
  • aprice — сначала дешевые;
  • dprice — сначала дорогие;
  • discount_p — по размеру скидки;
  • rorp — по рейтингу и цене.

⚠ Параметр вложен в params.

searchText

Используйте данный параметр, если хотите добавить поиск товаров по текстовому запросу.

⚠ Параметр вложен в params и является обязательным, если вы используете данный способ поиска вместо других. Подробнее см. в разделе Поиск товаров для виджетов.

searchType

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

  • also_viewed — «C этим товаром смотрят»;

  • accessories — «С этим товаром часто покупают»;

  • populars — «Популярные товары»;

  • bestdeals — «Скидки дня»;

  • attractive — «Приглядитесь к этим предложениям»;

  • recommended — «Похоже на то, что вы смотрели».

Подробнее см. в разделе Выбор рекомендательного виджета Маркета.

⚠ Параметр вложен в params.

searchVendorIds

Вы можете отображить в виджете товары определенных производителей. Для этого укажите идентификаторы производителей через запятую, например:

searchVendorIds: [153043, 153061] // или
searchVendorIds: [153043]
Скопировано
Как узнать идентификатор производителя

Откройте страницу производителя (например, с помощью поиска) и посмотрите на URL страницы. Идентификатор производителя — это набор цифр после «...brands/».

Например: https://market.yandex.ru/brands/143.

⚠ Параметр вложен в params.

specificationGroups

С помощью параметра вы можете указать количество раскрытых групп с характеристиками товара в виджете Маркета «Характеристики».

Доступны только целые значения. Например, если указано значение 1, будет раскрыта только первая группа с характеристиками (как правило, «Общие характеристики»), остальные будут свернуты.

По умолчанию все группы с характеристиками товара раскрыты.

⚠ Параметр вложен в params.

themeBackgroundColor

Вы можете указать цвет и непрозрачность фона виджета с помощью данного параметра.

Поддерживаются все способы задания цвета и непрозрачности, описанные в стандарте CSS. Например, задать серый фон можно любым из следующих значений:

  • "gray";
  • "#808080";
  • "rgb(128,128,128)";
  • "hsl(0,0%,50%)".

Задать серый фон с непрозрачностью 30% можно любым из следующих значений:

  • "rgba(128,128,128,0.3)";
  • "hsla(0,0%,50%,0.3)".

⚠ Параметр вложен в params.

themeButtonName

Вы можете указать в данном параметре название кнопки для перехода на Маркет или сайт магазина:

  • see — «Посмотреть»;
  • open — «Открыть»;
  • go_to — «Перейти»;
  • more_info — «Подробнее»;
  • to_shop — «В магазин»;
  • buy — «Купить»;
  • make_order — «Заказать».

По умолчанию используется значение see — «Посмотреть».

По статистике партнерской сети, названия кнопок «Посмотреть», «Открыть», «Перейти» и «Подробнее» приносят больше кликов, чем остальные.

⚠ Параметр вложен в params.

themeId

С помощью данного параметра задайте внешний вид виджета.

Значения для виджета «Один товар»:

  • 1 — карусель с описанием товара;
  • 2 — список предложений с описанием товара;
  • 3 — карусель без описания товара;
  • 4 — список предложений без описания товара;
  • 5 — витрина;
  • 9 — компактный список предложений без описания товара;
  • 10 — подробный список предложений.

Значения для виджета «Подборка товаров» и рекомендательных виджетов:

  • 1 — витрина;
  • 3 — карусель;
  • 4 — список товаров;
  • 5 — компактный список товаров.

Значение для «Карточки товара» и виджетов с информацией о товарах1.

⚠ Параметр вложен в params и является обязательным.

themeRows

Используйте параметр, чтобы указать количество рядов в виджете, если нужно. По умолчанию в виджете 1 ряд.

Внимание. Используется только для виджетов Маркета в виде витрин: «Один товар», «Подборка товаров» и рекомендательных виджетов.

⚠ Параметр вложен в params.

themeShowOfferName

Используйте параметр, чтобы показать или убрать названия товара в предложениях разных магазинов, в виджете «Один товар». Чтобы отобразить названия, укажите значение true, а чтобы скрыть — значение false.

Учитывайте, что параметр доступен только для некоторых видов виджета «Один товар»:

  • список предложений с описанием товара;
  • список предложений без описания товара;
  • компактный список предложений без описания товара;
  • витрина.

⚠ Параметр вложен в params.

type

С помощью данного параметра укажите тип виджета:

⚠ Обязательный параметр.

vid

Вы можете добавить дополнительный идентификатор виджета. Это метка, с помощью которой можно отслеживать статистику отдельно по этому виджету или сравнивать статистику по одинаковым виджетам на разных страницах. Подробнее см. в разделе Дополнительный идентификатор инструмента VID.

⚠ Параметр вложен в params.