Перейти на сайт

Интеграция Aplaut (JS-скрипт, Widgets 1.0) / Пошаговый гайд

В документе описан план интеграции платформы Aplaut, с установкой виджетов версии 1.0 и формы для сбора отзывов на сайт, с помощью JS-скрипта.

Чек-лист перед началом интеграции

Пожалуйста, убедитесь, что у вас:

  1. Заключен договор с Aplaut
  2. Создан аккаунт в платформе
  3. Есть выделенный специалист или команда для проведения интеграции

Интеграция. Подготовительные этапы.

1. В разделе Команда ЛК Aplaut, созданного после заключения договора, добавьте коллег, которым необходим доступ на этапе интеграции, а также после нее.

2. В ЛК Aplaut добавьте набор виджетов для установки на сайт. Рекомендуем при подключении использовать название "По умолчанию", а системное название "default", как отправная точка. В дальнейшем, если у вас будет редизайн сайта или мы обновим виджеты, можно будет добавить новые наборы с другим наименованием.

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

Для этого подготовьте файл в одном из форматов: XLSX, CSV или JSONL:

  1. Если у вас есть только отзывы (без комментариев/ответов от вашей команды или представителей брендов) и нет отзывов без текста (только оценка), рекомендуем использовать форматы XLSX или CSV, как наиболее простые в подготовке. Требования к файлу, а также инструкцию по импорту смотрите по ссылке.

  2. Если у отзывов есть комментарии/ответы, а также есть отзывы без текста, используйте формат JSONL (см. пример ниже).
    Пример формата для файла первоначального импорта отзывов.
    Файл предоставляется в формате JSONL (лучше сжатым gzip). Каждая строчка описывает один отзыв с комментариями.
    Пример файла.
    полный список полей можно посмотреть тут

Интеграция. Основные этапы.

работы по основному этапу могут выполнятся параллельно с подготовительными, это не должно тормозить интеграцию

Синхронизация данных.

Клиент <-> Aplaut

1. Важный элемент в платформе Aplaut — товар. Все основные процессы и почти все дополнительные завязаны на товаре. Поэтому важно обеспечить своевременную передачу и обновление данных о товарах, для этого в платформу импортируется каталог (фид):

  • Ознакомьтесь с требованиями к каталогу и подготовьте файл в необходимом формате;
  • Если у вас есть товары, у которых есть варианты и на сайте такие товары объединены в мультикарточки, группируйте товары в фиде чтобы отзывы на отдельный вариант товара отображались у всех товаров;
  • Подготовьте прямую ссылку на файл фида для его скачивания и сохраните ссылку в настройках импорта, в ЛК Aplaut (поддерживается сжатие Gzip и Basic авторизация), а также включите Автоматическое скачивания файла.
  • Установите базовую часть скрипта Aplaut (загрузчик) на все страницы сайта, перед закрывающим тегом </body>.
    Пример:
<script>
  (function() {
    // Инициализация
    window._shoppilot = window._shoppilot || [];
    
    // Команды скрипта
    …

    // Основная часть скрипта
    var store_id = '<?= {APLAUT_STORE_ID} ?>';
    var theme_id = 'default';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src =
      '//get.aplaut.io/f/v1/' + store_id + '/' + theme_id + '/app.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();
</script>

Комментарии с скрипту:

{APLAUT_STORE_ID}  — идентификатор аккаунта вашего интернет-магазина в Aplaut (Store ID), который используется в т.ч., в скриптах. Его можно найти в ЛК, перейдя в раздел Настройки —> Разработчикам (раздел доступен только пользователям с ролью Администратор;

Команды скрипта, добавляющие виджеты или активирующие форму, всегда вызываются до кода основной части скрипта.

2. В карточках товаров добавьте DOM-контейнеры под виджеты, а также команды скрипта для добавления виджетов отзывов и/или вопросов-ответов (см. инструкцию). В состав виджетов входят также формы отзывов и вопросов.

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

Aplaut -> Клиент

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

Это позволит реализовать фильтр или сортировку товаров по рейтингу/кол-ву отзывов на сайте. 

Экспорт дельты товаров.

Чтобы получить дельту обновленных товаров за определенный период, нужно создать задачу на экспорт, указав в параметрах соотвествующий фильтр.

Пример:

curl  -X POST \
  'http://api.aplaut.io/v4/export_tasks' \
  --header 'Accept: */*' \
  --header 'Content-Type: application/json' \
  --header 'Authorization: Bearer {APLAUT_TOKEN}' \
  --data-raw '{
  "data": {
    "type": "export_tasks",
    "attributes": {
      "records_type": "products",
      "search_options": {
        "filter": {
            "created_at": {
                "eq": "ГГГГ-ММ-ДД"
            }
        },
      },
      "format": "jsonl"
    }
  }
}'

Где {APLAUT_TOKEN}  — ключ от Platform API (посмотреть можно в ЛК Aplaut, раздел Настройки —> Разработчикам)

В ответе будет ID задачи, статут которой нужно проверять не чаще 1 раз в 1 минуту.
Пример запроса:

curl 'https://api.aplaut.io/v4/export_tasks/{TASK_ID}' \
  -H 'Authorization: Bearer token={TOKEN}'

Пример ответа:

 {
  "data": {
    "id": "TASK_ID",
    "type": "export_tasks",
    "attributes": {
      "records_type": "products",
      "search_options": {
        "filter": {"created_at": {"eq": "ГГГГ-ММ-ДД"}},
      },
      "state": "completed",
      "refuse_reason": null,
      "error_message": null,
      "format": "jsonl",
      "export_format": null,
      "archive_url": "{ARCHIVE_URL}",
      "archive_size": 144696,
      "archive_content_type": "application/gzip",
      "created_at": "2023-11-03T17:00:41.353+03:00",
      "updated_at": "2023-11-03T17:14:53.529+03:00",
      "started_at": "2023-11-03T17:14:47.633+03:00",
      "finished_at": "2023-11-03T17:14:53.529+03:00"
    }
  }
}

Когда   state=completed  , параметр  archive_url   будет содержать URL c архивом файла экспорта.

Важно помнить:

  1. Существует квота на суммарное кол-во времени всех экспортов за день для всего аккаунта. По умолчанию 1 час в день;
  2. Если квота превышена, то задачи на экспорт отклоняются сразу после старта задачи. Бесполезно дальше создавать следующие задачи;
  3. Очень редко задача может "подвиснуть". Ее статус никогда не станет   completed . Если за 3 часа статус задачи не поменялся, считайте что она "подвисла". Создавайте новую;
  4. Статус всех задач можно наблюдать в ЛК тут;
  5. Такой способ синхронизации оптимизирует кол-во запросов, отправляемых в Aplaut, а также только так можно реализовать сортировку товаров и фильтрацию товаров на листинг-страницах сайта, т.к. параметры должны быть сохранены у товара в вашей БД.

Чек лист по основным этапам

  1. Ссылка на каталог товаров в YML формате передана (поддерживается HTTP/FTP c Basic Auth) и включено автоматическое скачиваение
  2. Скрипт установлен, добавлены контейнеры и команды для виджетов
  3. Рейтинги и кол-во отзывов товаров синхронизируются

Интеграция. Дополнительные этапы.

1. Импортируйте заказы в Aplaut для запуска UGC-кампаний (email-кампании) по сбору отзывов после покупки. Есть два способа импорта, по постоянной ссылке на файл (раз в сутки, по аналогии с фидом), или по API.
У импорта через файл есть два формата, ознакомьтесь с требованиями по ссылке.
рекомендуем передавать уже выполненные заказы, где товар получен клиентом

2. Настройте DNS-записи, чтобы в письмах по UGC-кампаниям адрес отправителя был с вашим доменом и настройте шаблон письма (или подготовьте и отправьте нам собственный шаблон, если встроенные макеты вам не подходят по каким-то причинам):

  1. Для настройки домена сообщите нам email и имя, которые хотите чтобы указывались в наших письмах, например "Компания N" <n_company@yourdomain.ru>. Подробнее см. инструкцию по ссылке.
  2. Чтобы импортировать собственные шаблоны писем, ознакомьтесь с рекомендациями к шаблонам, чтобы учесть важные нюансы. Сверстайте и протестируйте его, и отправьте нам в виде файла формата html.

3. Добавьте кнопку "Оставить отзыв" в других частях сайта, чтобы дать возможность пользователям оставить отзыв не только в карточке товара, но и, напрмиер, в разделе с покупками/заказами клиента, если там есть список товаров, которые он приобретал. Для этого убедитесь что на этих страницах также установлен скрипт Aplaut и добавьте команду в обработчик клика по кнопке следующий код:

var omnibox = Shoppilot.require('omnibox'); omnibox.send('showReviewForm')

4. Настройте отправку событий по UGC-контенту во внешние системы (например системы лояльности) через вебхуки.

Справочная информация

  1. База знаний
  2. Документация Widgets API
  3. Документация Submissions API
  4. Установка скрипта Aplaut
👆 На этом пока всё