Товарные рекомендации на сайте

Для кого это руководствоЭтот документ предназначен для программистов JavaScript. Он описывает, как подключить MAXMA для отображения блока с товарными рекомендациями на страницах вашего сайта.

Прежде всего,  подключите пиксель на сайт⁠  и настройте передачу событий:
  • просмотра товара,
  • просмотра категории
  • создания заказа.

Для передачи расширенных сведений о товарах  📦настройте загрузку фида в MAXMA⁠ , с этим поможет наша техподдержка или аккаунт-маркетолог.

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

Для вставки рекомендуемых товаров на сайт, разместите следующий блок кода:
<script>
  window.addEventListener('load', () => {
    const tc = document.getElementById('target-container');
    const params = {
      type: 'new',
      count: 5,
      format: 'html',
    };
    if (ClTrack && tc) {
      ClTrack('getRecommendations', params, (html) => {
        tc.innerHTML = html;
      });
    }
  });
</script>
Где:
  • target-container — идентификатор html-элемента, внутрь которого будет помещен загруженный блок с товарами;
  • type — рекомендательный алгоритм (см. ниже);
  • count — максимальное количество возвращаемых товаров (чаще всего будет ровно столько, но иногда может быть меньше);
  • format — запрашивается html-блок (также поддерживается формат json).

Поддерживаемые рекомендательные алгоритмы:
  • new — новинки (товары, недавно впервые появившиеся в каталоге);
  • last-viewed — товары, просмотренные в текущей сессии;
  • bestsellers — рекомендуемые товары из числа популярных на сайте;
  • personal — рекомедация на основе предпочтений текущего пользователя.
Больше о рекомендательных алгоритмах  здесь⁠ .

Блок с загруженными товарами в формате HTML имеет вид:
<ul class="mxm-product-list">
    <li class="mxm-product">
        <div class="mxm-product-image">
          <a href="http://host/link-to-product/">
            <img src="http://host/link-to-image.jpg" alt="Наименование товара" />
          </a>
        </div>
      <div class="mxm-product-title">
          <a href="http://host/link-to-product/">Наименование товара</a>
      </div>
        <div class="mxm-product-price">
            <span class="mxm-product-black-price">
                12950.00
            </span>
        </div>
    </li>
    ...
</ul>

Задайте стили для загружаемых блоков на свое усмотрение, чтобы органично вписать блок в дизайн вашего сайта. Но можно начать с таких:
Пример стилизации блока с товарами
.mxm-product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mxm-product {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease;
}

.mxm-product:hover {
    transform: translateY(-3px);
}

.mxm-product-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.mxm-product-title {
    padding: 8px 12px;
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.3;
}

.mxm-product-title a {
    text-decoration: none;
    color: #222;
}

.mxm-product-title a:hover {
    text-decoration: underline;
}

.mxm-product-price {
    padding: 8px 12px 12px;
    font-weight: 600;
}

.mxm-product-black-price s {
    color: #777;
    margin-right: 8px;
}

Если рекомендации не заработали:
  • проверьте  установлен ли пиксель⁠ , загружается ли библиотека SDK;
  • проверьте передачу событий с помощью  отладочной консоли⁠ ;
  • проверьте работу рекмендаций на  тестовой странице ;
  • обратитесь в нашу техподдержку или к аккаунт-маркетологу за помощью Ring Buoy.