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

Структура

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

Скрипт виджета (рекомендуется вставлять в элемент 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: ...,
          erid: ...,
          themeId: ...,
          searchText: ..., /* или */ searchSelector: ..., /* или */ searchModelIds: ...,
/* или */ searchSkuIds: ..., /* или */ searchCategoryIds: ..., /* или */ searchShopPromoId: ...,
          searchSelectorAttr: ...,
          searchFilters: ...,
          searchAdult: ...,
          searchType: ...,
          defaultRegion: ...,
          searchCount: ...,
          buttonLinkType: ...,
          searchMatch: ...,
          searchInStock: ...,
          searchPromoTypes: ...,
          searchPriceTo: ...,
          
          searchVendorIds: ...,
          searchLocalOffersFirst: ...,          
          themeButtonName: ...,
          themeBackgroundColor: ...,
          themeRows: ...,
          themeShowBrandLogo: ...,
          themeShowMoreLink: ...,
          themeShowOfferName: ...,
          themeShowPromo: ...,
          themeShowTitle: ...,
          
          specificationGroups: ...,
          reviewsCount: ...,
          metrikaCounterId: ...,
          vid: ...        
        }
      });
    }
    w.YaMarketAffiliate
      ? start()
      : w.addEventListener("YaMarketAffiliateLoad", start);
  })(window);
</script>
Скопировано

Контейнер div, в котором будет отображаться виджет (нужно вставить в элемент body в том месте, где вы хотите показывать виджет). Идентификатор — значение параметра containerId.
```
<div id="..."></div>
```

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

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

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


`adLabeling`	`buttonLinkType`	`searchCount`	`searchShopPromoId`	`themeRows`
`clid`	`searchFilters`	`themeShowBrandLogo`	`themeShowMoreLink`
`containerId`	`searchInStock`	`searchSkuIds`	`themeShowOfferName`
`defaultRegion`	`searchLocalOffersFirst`	`searchText`	`themeShowPromo`
`fallback`	`searchMatch`	`searchType`	`themeShowTitle`
`metrikaCounterId`	`searchModelIds`	`searchVendorIds`	`type`
`params`	`searchPriceTo`	`specificationGroups`	`vid`
`reviewsCount`	`searchPromoTypes`	`themeBackgroundColor`
`searchAdult`	`searchSelector`	`themeButtonName`
`searchCategoryIds`	`searchSelectorAttr`	`themeId`


`adLabeling`	`buttonLinkType`	`searchCount`	`searchShopPromoId`	`themeRows`
`clid`	`searchFilters`	`themeShowBrandLogo`	`themeShowMoreLink`
`containerId`	`searchInStock`	`searchSkuIds`	`themeShowOfferName`
`defaultRegion`	`searchLocalOffersFirst`	`searchText`	`themeShowPromo`
`fallback`	`searchMatch`	`searchType`	`themeShowTitle`
`metrikaCounterId`	`searchModelIds`	`searchVendorIds`	`type`
`params`	`searchPriceTo`	`specificationGroups`	`vid`
`reviewsCount`	`searchPromoTypes`	`themeBackgroundColor`
`searchAdult`	`searchSelector`	`themeButtonName`
`searchCategoryIds`	`searchSelectorAttr`	`themeId`

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

adLabeling

Передайте значение true, если нужно включить автоматическую маркировку виджета — как нового, так и уже установленного на площадке. Сразу после добавления параметра в виджете появится пометка «Реклама» и данные рекламодателя.

ERID будет добавлен в виджет только после регистрации креатива в ОРД — это может занять несколько часов.

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

buttonLinkType

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

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


Значение параметра	Название кнопки	Действие кнопки
`add_to_cart`	В корзину	Появится сообщение о добавлении товара в корзину на Маркете. После этого пользователь сможет перейти в нее, просмотреть список добавленных товаров и оформить заказ на Маркете.
`checkout`	Купить	Откроется страница оформления заказа. В заказ будет входить только тот товар, по которому пользователь кликнул в виджете. Если в корзине на Маркете были другие товары, они не попадут в заказ, но останутся в корзине.
`product`	Посмотреть	Откроется карточка товара. Эта кнопка используется по умолчанию.


Значение параметра	Название кнопки	Действие кнопки
`add_to_cart`	В корзину	Появится сообщение о добавлении товара в корзину на Маркете. После этого пользователь сможет перейти в нее, просмотреть список добавленных товаров и оформить заказ на Маркете.
`checkout`	Купить	Откроется страница оформления заказа. В заказ будет входить только тот товар, по которому пользователь кликнул в виджете. Если в корзине на Маркете были другие товары, они не попадут в заказ, но останутся в корзине.
`product`	Посмотреть	Откроется карточка товара. Эта кнопка используется по умолчанию.

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

По данным экспериментов: можно получить рост числа заказов в категориях Строительство и ремонт и Товары для авто- и мототехники, если использовать в виджетах кнопку В корзину.

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

clid

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

Как найти клиды в Дистрибуции:

Перейдите в раздел Продукты → Продукты.
В поле Домен пакета введите URL вашей площадки.
Нажмите Найти.

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

containerId

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

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

defaultRegion

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

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

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

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

fallback

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

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

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

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

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

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

от 3 до 10 — для виджетов « Характеристики », « Отзывы » и « Один товар » (кроме « Карточки товара »);
от 1 до 10 — для виджетов « Подборка товаров » и рекомендательных виджетов.

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

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

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

searchFilters

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

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

searchInStock

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

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

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

true — для способов поиска по текстовому запросу (параметр searchText) и по запросу из HTML‑элемента (параметры searchSelector и searchSelectorAttr);
false — для способа поиска по ID товара на Маркете (параметр searchModelIds).

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

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

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

searchLocalOffersFirst

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

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

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

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

searchMatch

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

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

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

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

searchModelIds

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

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

При указании ID товаров вручную в коде виджета « Подборка товаров » допускается одновременное использование параметров searchModelIds и searchSkuIds. При этом на первом месте в виджете всегда будут отображаться товары, добавленные по параметру searchSkuIds.

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‑элемента, из которого формируется поисковый запрос.

searchSelectorAttr

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

searchShopPromoId

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

searchSkuIds

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

searchText

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

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.

themeShowBrandLogo

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

Используется только в виджете Витрина с подборкой товаров.

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

Пример виджета

themeShowMoreLink

С помощью параметра вы можете убрать из виджета ссылку «Показать ещё». Используйте параметр со значением false.

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

Пример виджета

themeShowOfferName

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

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

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

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

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

themeShowPromo

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

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

themeShowTitle

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

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

type

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

offers — « Один товар »;
sku — « Карточка товара »;
models — « Подборка товаров », рекомендательные виджеты;
specifications — « Характеристики товара »;
reviews — « Отзывы о товаре ».

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

vid

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

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