Оформление

Размещение на странице

Размещение подключает ранжирование к сайту без программиста. Вы выбираете в кабинете блок страницы — меню в шапке, плитки категорий, статьи блога, сетку или подборки товаров, — и скрипт Sales Ninja сам находит его, спрашивает порядок у ранжирования и переставляет элементы. Если таких блоков на странице несколько, каждый упорядочивается сам по себе. Показы и клики считаются автоматически.

Раздел в кабинете: Сайт → Ранжирование, группа Размещения · где на сайте.

Ранжирование и размещение ​

Что решает
РанжированиеЧто упорядочивать: товары или ссылки, цель, модель, A/B-тест
РазмещениеГде упорядочивать: на каких страницах, какой блок и какие в нём элементы

Одно ранжирование может работать в нескольких размещениях: например, меню в шапке и плитки категорий на главной. Отдельное ранжирование нужно, когда блоку нужна своя цель или своя статистика; если цель общая, хватит одного ранжирования, а разрез Размещение ранжирования в статистике покажет, какой блок работает лучше. Подключение из JavaScript (rankProducts, rankLinks) обходится без размещения — его можно использовать одновременно с размещениями.

Размещение только переставляет то, что уже есть в блоке: новых товаров или ссылок оно не добавляет и ничего не скрывает. Переставляются элементы, в которых скрипт узнаёт товар или ссылку; остальные — например, промо-баннер без ссылки или разделитель в меню — остаются на своих местах.

Как это выглядит на сайте:

  1. Скрипт Sales Ninja находит на странице ваш блок — меню, плитки категорий, статьи или карточки товаров.
  2. Берёт его элементы и сам узнаёт в каждом товар или ссылку: по адресу, id, артикулу или названию. Размечать ничего не нужно.
  3. Ставит элементы в порядке ранжирования. Остальная страница не меняется, а контрольная группа A/B-теста видит порядок сайта.

Как создать ​

  1. Создайте ранжирование товаров или ссылок и сохраните его (см. Что это).

  2. В Сайт → Ранжирование нажмите Создать и выберите Размещение на странице — или откройте ранжирование и в разделе Подключение → Без кода нажмите Добавить размещение.

  3. Заполните Основное: название, статус и ранжирование.

  4. Выберите Блок на странице. Проще всего — кнопка Выбрать на странице: введите адрес страницы, где стоит блок, и нажмите на любую карточку товара (у ранжирования ссылок — на любую ссылку меню или списка). Скрипт найдёт её блок и все похожие на этой странице — например, все подборки товаров — и покажет, сколько в них элементов. Сетку, в которой карточки стоят рядами, скрипт берёт целиком, а не один ряд. Если похожих блоков несколько, выберите Все похожие блоки или Только этот блок, затем нажмите Использовать блок: поля заполнятся сами.

    Блок можно указать и вручную, CSS-селекторами:

    • Блок — где он на странице. Например, меню: header nav; каталог: .catalog-grid; подборки товаров: .products-slider;
    • Элементы — что внутри блока переставлять. Пусто — элементы, которые лежат прямо в блоке. Например, пункты меню: li; карточки: .product-card.

    Селектор, который браузер не прочитает (лишняя скобка, кавычка, русская раскладка), редактор сразу подчеркнёт. Под полями появится строка проверки — скопируйте её, откройте свою страницу, вставьте в консоль браузера (F12) и выполните: числа покажут, сколько элементов скрипт переставит в каждом найденном блоке.

  5. Задайте Условия срабатывания — на каких страницах и каким посетителям переставлять блок. Условия задаются тем же конструктором, что условия показа у персонализации, но без условий размещение работает на всех страницах. Условия принадлежат размещению: у каждого размещения свои, даже когда ранжирование одно. Они проверяются, когда страница открывается, поэтому прокрутка и действия посетителя на этой странице учтутся уже на следующей.

  6. Сохраните. Размещения ранжирования видны в его редакторе в разделе Подключение → Без кода.

Как скрипт переставляет блок ​

  • Селектор блока находит все подходящие блоки страницы, и каждый упорядочивается сам по себе: подборки «Хиты» и «Новинки» с одним селектором получают каждая свой порядок, товар не переходит из подборки в подборку.
  • Если между элементами блока стоят заголовки (h1–h6), каждая группа под своим заголовком упорядочивается отдельно: товар не уходит под чужой заголовок. Заголовок внутри карточки или внутри промо-плитки между карточками группу не начинает.
  • Повторы одного элемента — например, копии карточек в зацикленной карусели — остаются на своих местах вместе с оригиналом.
  • Блок с раскладкой flex или grid скрипт переставляет свойством CSS order: порядок на экране меняется, а разметка страницы остаётся прежней. Так безопасно и для блоков, которые рисует React или Vue.
  • Обычный блок без фреймворка скрипт переставляет, перемещая сами элементы. Всё, что не входит в элементы, остаётся на своих местах.
  • Блок, который рисует React или Vue, без flex и grid скрипт не трогает: такую перестановку фреймворк сломал бы при следующем обновлении. В режиме отладки причина видна в консоли браузера и на панели отладки: вкладка Данные, секция Ранжирование. Для такого блока подключите ранжирование из JavaScript.
  • Если сайт перерисовал блок, скрипт возвращает тот же порядок без нового запроса. Если в блок догрузились новые элементы (подгрузка, «показать ещё»), они ранжируются отдельно и встают после уже показанных — посетитель не видит, как просмотренное прыгает.
  • Если посетитель сам выбрал сортировку и сайт переставил показанные товары, ранжирование до конца этой страницы оставляет порядок посетителя. На панели отладки причина — «сайт сам изменил порядок блока».
  • Пока порядок не применён, блок скрыт — не дольше времени из настройки проекта Скрывать меняющийся контент, а если она выключена — не дольше ожидания ответа ранжирования. Если ответ не успел, блок показывается в порядке сайта. Блок, который появился после того, как остальные уже показаны, скрывается отдельно до своего порядка. Закрытое меню получает порядок заранее и открывается уже упорядоченным.
  • Один блок переставляет одно размещение: второе размещение с тем же блоком не применяется.

Как ранжирование узнаёт элементы:

РанжированиеЧто скрипт берёт из элемента
СсылокАдрес ссылки: сам элемент-ссылка или первая ссылка внутри элемента. Адрес приводится к одному виду: метки utm и якорь не мешают, косая черта в конце сохраняется — подробнее в JS API
ТоваровВсё, что найдёт: адрес ссылки карточки, id и артикул из data-атрибутов и микроразметки, название товара. Сервер ищет товар сначала в смарт-фиде ранжирования, потом во всём каталоге проекта — подробнее в JS API

Как проверить ​

Откройте страницу сайта, на которой должно сработать размещение:

  • элементы блока должны встать в новом порядке;
  • если блок не изменился, выполните на странице строку проверки из редактора размещения — пустой список или 0 значит, что блок или элементы не нашлись; проверьте также условия срабатывания и статус размещения и ранжирования;
  • откройте страницу в режиме отладки: добавьте к её адресу ?sn-debug-mode=true, а если в настройках проекта включена защита токеном, ещё sn-debug-token — см. Отладка. На вкладке Данные в секции Ранжирование видно, сколько блоков найдено, сколько элементов узнано, как переставлен порядок или почему он не применён. Там есть только размещения, чьи условия срабатывания совпали с открытой страницей: если вашего размещения нет, проверьте условия и статусы размещения и ранжирования;
  • посетители контрольной группы A/B-теста видят порядок сайта — это ожидаемо.

Статистика и A/B-тест ​

Показы и клики размещения отправляются автоматически, отдельно настраивать отслеживание не нужно. Если заголовки делят блок на группы, каждая группа считается отдельным показанным списком. В статистике ранжирования есть разрез Размещение ранжирования: он показывает, какой блок работает лучше. Запросы из JavaScript в этом разрезе видны строкой «Вызов из кода сайта»: у них нет размещения.

A/B-тест настраивается у ранжирования и действует во всех его размещениях сразу: посетитель контрольной группы видит порядок сайта везде.

Ограничения ​

  • Выбор блока на странице открывает сайт внутри кабинета. Если сайт запрещает показ во встроенном окне или на странице нет скрипта Sales Ninja, укажите блок вручную. Команды выбора блока страница принимает только от кабинета, в котором она открыта.
  • Размещение переставляет только элементы, которые уже есть на странице. На странице категории порядок меняется внутри текущей страницы; поднять товар с других страниц категории может выдача из каталога.
  • Блок под React или Vue без flex и grid не переставляется.

Связано ​