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

Структура

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

  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: ...,
              searchInStock: ...,
              searchPromoTypes: ...,
              searchPriceTo: ...,
              
              
              searchVendorIds: ...,
              searchLocalOffersFirst: ...,          
              themeButtonName: ...,
              themeBackgroundColor: ...,
              themeRows: ...,
              themeShowOfferName: ...,
              themeShowTitle: ...,
              
              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 — автозамена выключена.

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

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

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

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

searchSelectorAttr

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

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

searchSkuIds

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

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

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

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.

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

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

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

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

themeShowTitle

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

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

type

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

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

vid

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

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