Поиск товаров для виджетов

  1. По текстовому запросу
  2. По запросу из HTML-элемента
  3. По ID товара на Маркете
  4. По ID товара на Беру
  5. По ID категории
  6. По изображению
  7. По изображению из элемента img
  8. По характеристикам товара
  9. Как улучшить результаты поискового запроса

По текстовому запросу

Задайте запрос, чтобы в виджете показывались товары, найденные по этому запросу. Чтобы нашлась конкретная модель, укажите в запросе ее основные параметры. Например: Sony PlayStation 4 Slim 500 ГБ. Если модель не найдется, загрузятся результаты поиска Маркета или Беру для похожей модели.

Примечание. Вставляйте код виджета в элемент body. Этот элемент содержит контент, который отображается в браузере на веб‑странице сайта.
Как задать запрос
  • В конструкторе: в меню Поиск выберите по текстовому запросу и введите запрос.
  • Вручную в коде: укажите запрос в параметре searchText (например, searchText: "Умная колонка").
Точный поиск

В виджете можно показывать только те товары, названия которых содержат все слова из вашего запроса. Для этого:

Если товар не найдется (например, он уже не продается на Маркете или Беру), виджет не будет отображаться.

По запросу из HTML-элемента

Внимание. Поиск по запросу из HTML-элемента не поддерживается, если вы вставляете виджет на Турбо-страницу.

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

Чтобы в виджет с предложениями попал нужный товар, используйте элемент только с названием товара и его параметрами. Если в запрос попадут другие слова, результат поиска может быть неточным. Если на странице нет подходящего элемента, вы можете добавить скрытый элемент (с атрибутом style="display: none;").

Как указать селектор
  • В конструкторе: в меню Поиск выберите по запросу из HTML-тега и укажите селектор.
  • Вручную в коде: укажите селектор в searchSelector. Чтобы задать отдельный атрибут, добавьте его в searchSelectorAttr.
Как задать запрос в коде контейнера

В качестве элемента для поиска можно использовать контейнер виджета, добавив к нему атрибут с названием товара. Для этого нужно указать селектор контейнера в параметре 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>
Примечание. Вставляйте код виджета в элемент head. Этот элемент содержит информацию, по которой браузеры и поисковые системы определяют, как должен выглядеть сайт.
Точный поиск

В виджете можно показывать только те товары, названия которых содержат все слова из вашего запроса. Для этого:

Если товар не найдется (например, он уже не продается на Маркете или Беру), виджет не будет отображаться.

Примеры селекторов и запросов
Элемент на сайте Что указать Какой запрос получится

Заголовок на странице:

<h1>Обзор товара <span>Яндекс.Устройство</span></h1>

Конструктор:

Селектор — h1

Обзор товара Яндекс.Устройство

Код:

searchSelector: "h1"

Часть заголовка:

<h1>Обзор товара <span>Яндекс.Устройство</span></h1>

Конструктор:

Селектор — h1 span

Яндекс.Устройство

Код:

searchSelector: "h1 span"

Название страницы:

<title>Обзор товара Яндекс.Устройство</title>

Конструктор:

Селектор — title

Обзор товара Яндекс.Устройство

Код:

searchSelector: "title"

Любой тег с атрибутом id. Текст для запроса в самом теге:

<div id="model_name">Яндекс.Устройство</div>

Конструктор:

Селектор —div#model_name

Яндекс.Устройство

Код:

searchSelector: "div#model_name"

Любой тег с любым атрибутом. Текст для запроса в самом теге:

<span itemprop="title">Яндекс.Устройство</span>

Конструктор:

Селектор — span[itemprop='title']

Яндекс.Устройство

Код:

searchSelector: "span[itemprop='title']"

Любой тег с любым атрибутом. Текст для запроса в атрибуте:

<meta property="og:title" content="Яндекс.Устройство"/>

Конструктор:

Селектор — meta[property='og:title']

Атрибут — content

Яндекс.Устройство

Код:

searchSelector: "meta[property='og:title']",
searchSelectorAttr: "content"

По ID товара на Маркете

В виджете Маркета или Беру можно показывать товары, найденные по их идентификаторам на Маркете.

Как указать ID товаров
  • В конструкторе: в меню Поиск выберите по ID товара на Маркете и укажите идентификаторы через запятую.
  • Вручную в коде: укажите идентификаторы в параметре searchModelIds. Например: searchModelIds: [1971204201, 177547282].
Внимание. Для виджетов Маркета «Где купить товар», рекомендательных виджетов, виджетов с информацией о товарах и виджета Беру «Товар» в подробной форме можно указать только один идентификатор.
Как узнать идентификатор товара

Откройте карточку товара на Маркете и посмотрите на ее URL. Идентификатор — это набор цифр перед вопросительным знаком (или, если его нет, в конце URL). Например:

https://market.yandex.ru/product/1971204201
https://market.yandex.ru/product--smartfon-yandex-telefon/1971204201?glfilter==...

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

По ID товара на Беру

В виджете Беру можно показывать товары, найденные по их идентификаторам на Беру. Укажите идентификаторы в параметре searchSkuIds через запятую. Например: searchSkuIds: [100307940935, 100482444893].

Внимание. Для виджета «Товар» в подробной форме можно указать только один идентификатор.
Как узнать идентификатор товара на Беру

Откройте карточку товара на Беру и посмотрите на ее URL. Идентификатор — это набор цифр перед вопросительным знаком (или, если его нет, в конце URL). Например:

https://beru.ru/product/100307940933
https://beru.ru/product/smartfon-yandex-telefon/100307940933?sku_main_pic=...

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

По ID категории

Внимание. Самостоятельный поиск по ID категории поддерживается только для виджета Маркета «Подборка товаров». В виджетах Маркета «Где купить товар», рекомендательных виджетах «Популярные товары» и «Скидки дня», виджетах с информацией о товарах и виджетах Беру поиск по ID категории используется только вместе с другим видом поиска.

В виджете Маркета «Подборка товаров» можно показывать товары из определенных категорий.

Как указать ID категорий
  • В конструкторе: в меню Поиск выберите по ID категории и укажите идентификаторы через запятую.
  • Вручную в коде: укажите идентификаторы в параметре searchCategoryIds. Например: searchModelIds: [1971204201, 177547282].

Если указать несколько ID категорий, товары из них будут отображаться в виджете вперемежку. Например, если указаны категории A, B, C, то порядок будет такой:

  1. Первый товар из категории A.
  2. Первый товар из категории B.
  3. Первый товар из категории C.
  4. Второй товар из категории A.
  5. Второй товар из категории B.
  6. Второй товар из категории C и так далее.
Как узнать идентификатор категории

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

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

По изображению

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

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

Как задать ссылку на товар
  • В конструкторе: в меню Поиск выберите по ссылке на изображение и укажите ссылку.
  • Вручную в коде: укажите ссылку в параметре searchImageUrl.

По изображению из элемента img

Внимание. Поиск по изображению из элемента img недоступен для рекомендательных виджетов Маркета. Также он не поддерживается, если вы вставляете виджет на Турбо-страницу.

Укажите в параметре searchImageSelector селектор для элемента, который содержит ссылку на изображение. Она должна быть в атрибуте src.

В конструкторе поиск по изображению из элемента img не поддерживается.

Примеры
Элемент на сайте Что указать
<img id="ProductPhoto" src="http://shop-example.ru/images/yandex-device.jpg" alt="Яндекс.Устройство фото">
searchImageSelector: "#ProductPhoto"
<div id="ProductPhoto">
  <a href="http://shop-example.ru/images/yandex-device-big.jpg">
    <img src="https://shop-example.ru/images/yandex-device.jpg" alt="Яндекс.Устройство фото">
  </a>
</div>
searchImageSelector: "#ProductPhoto > a > img"

По характеристикам товара

В виджете можно показывать товары, найденные по параметрам на Маркете (например, смартфоны Android с диагональю экрана 5.5"–5.9"). Вы можете указать все параметры, которые используются на Маркете.

Внимание. При этом в коде виджета также необходимо указывать какой-либо из поисковых параметров, упомянутых выше (например, searchText или searchSelector). См. пример.

Чтобы указать параметры товара в виджете:

  1. Перейдите на Яндекс.Маркет.
  2. Откройте нужную категорию и выберите параметры фильтрации (например, операционная система Android, диагональ экрана 5.5"–5.9").
  3. Скопируйте все параметры glfilter из адресной строки.

  4. В код виджета добавьте параметр searchFilters со скопированным значением из адресной строки.

    <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: "marketWidget",
            type: "models",
            params: {
              clid: 2310490,
              searchText: "Смартфон",
              themeId: 1,
              searchFilters: "glfilter=13476053%3A1&glfilter=15156912%3A15934123"
            }
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
    <div id="marketWidget"></div>