Как вставить виджеты на сайт
- Как разместить код виджета
- Как настроить ширину и отступы виджетов
- Как добавить несколько виджетов на одну страницу
- Как задать поисковый запрос в коде контейнера
- Какую область выделить под виджет
Можно не читать, а смотреть
Как разместить код виджета
Код состоит из трех частей, которые можно расположить разными способами:
Код | Где расположить | ||
---|---|---|---|
Способ 1 | Способ 2 | Способ 3 | |
1. Скрипт для подключения к API виджетов: | В элементе head | В элементе head | В элементе body |
2. Код с параметрами виджета: | В элементе head | В элементе body | В элементе body |
3. Контейнер | В элементе body | В элементе body | В элементе body |
Код | Где расположить | ||
---|---|---|---|
Способ 1 | Способ 2 | Способ 3 | |
1. Скрипт для подключения к API виджетов: | В элементе head | В элементе head | В элементе body |
2. Код с параметрами виджета: | В элементе head | В элементе body | В элементе body |
3. Контейнер | В элементе body | В элементе body | В элементе body |
- Какой способ выбрать
-
- Скрипт для подключения к API и код с параметрами — в элементе
head
.Рекомендуемый способ — так виджеты загружаются быстрее, повышается CTR виджета и увеличивается количество кликов.
Этот способ подходит, если вы вставляете на сайт один виджет или несколько виджетов с одинаковым кодом (например, настроен поиск по запросу из HTML‑элемента, в качестве которого используется заголовок статьи).
- Скрипт для подключения к API — в элементе
head
, а код с параметрами — в элементеbody
.Используйте этот способ, если вы:
ищете товары для виджета по параметрам, которые нельзя поместить в элемент
head
;используете несколько виджетов с различным кодом.
Рекомендуем размещать код с параметрами как можно выше в элементе
body
.Если использовать этот способ, виджеты будут загружаться не сразу, а по мере загрузки страницы. То есть, медленнее, чем в первом варианте.
Совет. Если вы вставляете скрипт для подключения к API в элементhead
(способы 1 и 2), разместите его перед всеми скриптами, которые загружаются синхронно (скрипты без атрибутаasync
). Это ускорит загрузку виджета на странице. - Скрипт и код с параметрами — в элементе
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-стилей.
Атрибут | Описание | Значение |
---|---|---|
width | Задает ширину виджета. Можно использовать любые значения, допустимые в CSS. | "970px" |
padding | Задает отступ между виджетом и тем элементом, в который он вставлен. Можно использовать любые значения, допустимые в CSS. Если вы указали:
|
|
Атрибут | Описание | Значение |
---|---|---|
width | Задает ширину виджета. Можно использовать любые значения, допустимые в CSS. | "970px" |
padding | Задает отступ между виджетом и тем элементом, в который он вставлен. Можно использовать любые значения, допустимые в CSS. Если вы указали:
|
|
Чтобы настроить ширину и отступы:
- Для конкретных виджетов
-
Добавьте к контейнеру
div
нужного виджета атрибутstyle
с правилами для настройки стиля. Например:<div id="..." style="width: 970px; padding: 0px 4px;" ...></div>
Скопировано - Для всех виджетов на странице
-
Настройте CSS-стиль для всех элементов одного класса. Например, в элемент
head
добавьте стиль с селектором.marketWidget
и правилами для ширины и отступа:<style> /* Селектор .marketWidget применяет правила * ко всем элементам с атрибутом class="marketWidget" */ .marketWidget { width: 970px; padding: 0px 4px; } </style>
СкопированоДобавьте атрибут
class="marketWidget"
ко всем контейнерам виджетов, чтобы к ним применялись правила из стиля. Например:<div class="marketWidget" id="widgetIntro"></div> ... <div class="marketWidget" id="widgetComparison"></div>
Скопировано
Вы также можете изменить внешний вид виджетов с помощью различных параметров. Подробнее см. в разделе Вопросы по внешнему виду виджетов.
Как добавить несколько виджетов на одну страницу
Чтобы разместить несколько виджетов на одной странице:
Создайте в скрипте массив объектов с настройками виджетов и для каждого из них вызовите метод
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>
СкопированоРазместите в коде страницы контейнеры
div
для виджетов.Пример для двух виджетов:
<div id="marketWidget1"></div> <div id="marketWidget2"></div>
Скопировано
Как задать поисковый запрос в коде контейнера
В качестве элемента для поиска можно использовать контейнер виджета, добавив к нему атрибут с названием товара. Для этого нужно указать селектор контейнера в параметре searchSelector
, а название атрибута — в параметре searchSelectorAttr
. Это удобно, если требуется вставлять одинаковый скрипт виджета на разные страницы, меняя только код контейнера.
В элементе 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, erid: 'AX1LYwMgKYsyMqgz', searchSelector: "div#marketWidget", searchSelectorAttr: "data-search-text", themeId: 2 } }); ... </script>
Скопировано
В элементе body
:
<div id="marketWidget" data-search-text="Яндекс Телефон"></div>
Какую область выделить под виджет
Все размеры указаны в пикселях.
- Виджеты Маркета «Один товар»
-
Виджет Ширина Высота Список предложений с описанием товара Минимум 280 Минимум 351 Список предложений без описания товара Минимум 280 Минимум 129 Компактный список предложений без описания товара Произвольная Минимум 104 Подробный список предложений Минимум 280 Минимум 144 Витрина Минимум 280 Минимум 319
Для каждой строки — 178
Карусель с описанием товара Минимум 280 Всегда 403 Карусель без описания товара Минимум 280 Всегда 221 Карточка товара Минимум 280 Минимум 369 Виджет Ширина Высота Список предложений с описанием товара Минимум 280 Минимум 351 Список предложений без описания товара Минимум 280 Минимум 129 Компактный список предложений без описания товара Произвольная Минимум 104 Подробный список предложений Минимум 280 Минимум 144 Витрина Минимум 280 Минимум 319
Для каждой строки — 178
Карусель с описанием товара Минимум 280 Всегда 403 Карусель без описания товара Минимум 280 Всегда 221 Карточка товара Минимум 280 Минимум 369 - Виджеты Маркета «Подборка товаров» и рекомендательные виджеты Маркета
-
Виджет Ширина Высота Витрина Минимум 120 Минимум 200 Для каждой строки (начиная со второй): минимум — 185, максимум — 235
Список товаров Минимум 280 Минимум 110 Компактный список товаров Минимум 280 Минимум 420 Для каждой строки (начиная с седьмой): минимум — 50
Карусель Минимум 280 Минимум 250 Виджет Ширина Высота Витрина Минимум 120 Минимум 200 Для каждой строки (начиная со второй): минимум — 185, максимум — 235
Список товаров Минимум 280 Минимум 110 Компактный список товаров Минимум 280 Минимум 420 Для каждой строки (начиная с седьмой): минимум — 50
Карусель Минимум 280 Минимум 250 - Виджеты Маркета с информацией о товарах
-
Виджет Ширина Высота Характеристики Минимум 280
Максимум 1200
Произвольная
Отзывы Минимум 280
Максимум 1200
Произвольная
Виджет Ширина Высота Характеристики Минимум 280
Максимум 1200
Произвольная
Отзывы Минимум 280
Максимум 1200
Произвольная