Инструкция

Интеграция с InSales и подключение товарных рекомендаций

Рассказываем, как все правильно настроить


InSales — популярная платформа для создания интернет-магазина. Одни из наших партнеров, с которыми возможно настроить прямую интеграцию с Mailganer.
Приложение Mailganer для InSales поможет синхронизировать базу клиентов, запустить триггеры брошенной корзины и автоматизировать процесс производства рассылок.
Как настроить интеграцию
После установки InSales нужно авторизоваться в Mailganer. Если у вас не было ранее аккаунта — нужно создать новый. В этом случае данные для регистрации автоматически подставятся из аккаунта InSales.
Приложение автоматически создаст новый список и перенесет в него базу имейлов.
После того, как система подготовит аккаунт, появится рабочая область приложения, которая состоит из двух блоков. Первый блок «Синхронизация подписчиков» — это информация о последней успешной синхронизации и кнопка «Перейти в личный кабинет».
Во втором блоке «Настройки синхронизации» вы можете настроить списки, куда будут импортироваться подписчики.
Готово! Первый этап интеграции завершен.
Подключение триггера брошенной корзины и товарных рекомендаций к магазину InSales
Можно автоматизировать отправку триггеров брошенной корзины, брошенного поиска и других. Для этого нужно установить коды рекомендаций и указать ссылку на фид с товарами. Ниже инструкции как это сделать.
Установить коды рекомендаций
Шаг 1. Перейдите в раздел «Дизайн» и нажмите "Редактировать код" в меню "Действия" возле шаблона вашего магазина
Шаг 2. В конце файла order2 вставьте следующий код:

<script type="text/javascript">
      $(window).on('load', function () {
        var i = setInterval(function () {
            if (mgr_api != {}) {
                clearInterval(i);
                const order = {
                    order: {{ order.id }},
                    order_price: {{ order.total_price }},
                    products: [
                        {% for item in order.items %}
                        {
                            id: {{ item.product.id }},
                            price: {{ item.total_price.with_margin }},
                            amount: {{ item.quantity }}
                        },
                        {% endfor %}
                    ]
                };
                mgr_api.track('purchase', order);
            }
        }, 100);
    });
</script>
Если у вас нет шаблона order2, то вам нужно его создать. Для этого нажмите "Добавить " и выберите тип шаблона "Карточка заказа 2.0"
Шаг 3. В конце файла product вставьте следующий код:

<script type="text/javascript">
    const mg_track_product = {
        id: '{{ product.id }}',
        name: '{{ product.title }}', 
        price: {{ product.price }},
        categories: [{% for collection in product.collections %}{{ collection.id }},{% endfor %}], 
        image: '{{ product.first_image.compact_url }}',
        url: '{{ account.url }}{{ product.canonical_url }}'
    };
    $(window).on('load', function () {
        var i = setInterval(function () {
            if (mgr_api != {}) {
                clearInterval(i);
                mgr_api.track("view", mg_track_product);
                $('.buybutton').on('click', function () {
                    mgr_api.track("add_cart", mg_track_product);
                });
            }
        }, 100);
    });
</script>
В данном коде проверьте, чтобы класс .buybutton был назначен кнопке добавления товара в корзину. Пример:
Обратите внимание: если у вас несколько вариантов товаров, то в код, вместо переменной {{ product.id }}, нужно добавить цикл {% for variant in product.variants limit:1 %}'{{ variant.id }}'{% endfor %}. Пример:

<script type="text/javascript">
    const mg_track_product = {
        id: {% for variant in product.variants limit:1 %}'{{ variant.id }}'{% endfor %},
        name: '{{ product.title }}', 
        price: {{ product.price }},
        categories: [{% for collection in product.collections %}{{ collection.id }},{% endfor %}], 
        image: '{{ product.first_image.compact_url }}',
        url: '{{ account.url }}{{ product.canonical_url }}' 
    };
    
    $(window).on('load', function () {
        var i = setInterval(function () {
            if (mgr_api != {}) {
                clearInterval(i);
                mgr_api.track("view", mg_track_product);
                $('.add-cart-counter__btn').on('click', function () {
                    mgr_api.track("add_cart", mg_track_product);
                });
            }
        }, 100);
    });
</script>
Для работы триггера "Напоминание о появлении товара в наличии" в конце файла product вставьте следующий код:

<script type="text/javascript">
    const mg_track_product = {
        email: mg_email,
        item: 'переменная_id_товара', // id товара, должен совпадать с offer id в фиде, обязательный параметр
        properties: {fashion_size: "", barcode: "", fashion_color: ""} // свойства товара, необязательный параметр
    };
    $(function () {
        if (mg_email) $("#product_stock input").val(mg_email)
    })
    $(window).on('click', '#product_stock button', function () {
        if (mgr_api != {}) {
            try {
                mgr_api.subscribeTrigger("product_stock", mg_track_product);
                $("#product_stock small").text('Вы подписались на появление товара')
            } catch (error) {
                console.error(error);
                $("#product_stock small").text('Ошибка подписки')
            }
        }
    });
</script>
А также добавьте код кнопки "Подписаться на появление товара", например:

<form id="product_stock">
    <input type="text">
    <button type="button">Подписаться на появление товара</button>
    <small></small>
</form>
Шаг 4. В конце файла collection вставьте следующий код:

<script type="text/javascript">
    $(window).on('load', function () {
        var i = setInterval(function () {
            if (mgr_api != {}) {
                clearInterval(i);
                $('.buybutton').on('click', function () {
                    let mg_track_product = {
                      id: $(this).closest("form").attr("data-product-id")
                    };
                    mgr_api.track("add_cart", mg_track_product);
                });
            }
        }, 100);
    });
</script>
Шаг 5. В файл cart вставьте следующий код:

<script type="text/javascript">
    $(window).on('load', function () {
        var i = setInterval(function () {
            if (mgr_api != {}) {
                clearInterval(i);
                $('.minicartdel').on('click', function () {
                    mgr_api.track("remove_cart", $(this).data('item-id'));
                });
            }
        }, 100);
    });
</script>
В данном коде проверьте, чтобы класс .minicartdel был назначен на кнопку удаления товара из корзины. Пример:
Шаг 6. Перейдите в раздел Настройки -> Счетчики и коды
В поле "HTML-разметка для вывода на всех страницах магазина" вставьте главный код, который передаёт имейл адрес посетителя.

Чтобы избежать ошибок, весь JavaScript-код, который использует библиотеку jQuery, должен располагаться после скрипта <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>. Это потому, что скрипт jQuery должен быть загружен и выполнен перед тем, как можно будет использовать его функциональность.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var mg_email = '';
var mgr_api = {};
(function () {
  $.getJSON('/client_account/contacts.json', function(resp) {
      if(resp.status !== 'error'){
          mg_email = resp.client.email;
          console.debug('MG track client email:', resp.client.email);
      }
  });
  var script = document.createElement('script');
  var b = '';
  if (typeof this.href != "undefined") {
    b = this.href.toString().toLowerCase()
  } else {
    b = document.location.toString().toLowerCase()
  }
  ;
  script.src = "https://mailganer.com/jsapi/r/XXX?ref=" + document.referrer + "&url=" + b + "&nc=" + Math.random();
  script.async = true;
  script.onload = function () {
    mgr_api = new MGApi();
    mgr_api.auth(mg_email);
  };
  document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
Вместо XXX поставьте значение из личного кабинета Mailganer
На скриншоте лишь пример. Вам нужно скопировать свой ключ интеграции.
Проверка: Если коды установлены корректно, то в личном кабинете отразится соответствующий статус:
Укажите сcылку на фид с товарами
Шаг 1. Перейдите в раздел Товары Товарные выгрузки
Шаг 2. Выберите Добавить произвольную выгрузку
Шаг 3. Настройте выгрузку как показано на скриншоте и сохраните её
В поле Шаблон выгрузки вставьте следующий код

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE yml_catalog SYSTEM "shops.dtd">
<yml_catalog date="{{'now' | date:  '%Y-%m-%d %H:%M'}}">
  <shop>
    <name>{{marketplace.shop_name}}</name>
    <company>{{marketplace.company}}</company>
    <url>{{marketplace.url}}</url>
    <platform>InSales</platform>
    <currencies>
    {% for currency in currencies %}
      <currency id="{{currency.id}}" rate="{{currency.rate}}" {% if currency.plus %}plus="{{currency.plus}}" {% endif %} />
    {% endfor %}
    </currencies>
    <categories>
    {% for collection in collections %}
       <category id="{{collection.id}}" {% if collection.parent_id %}parentId="{{collection.parent_id}}"{% endif %} url="{{marketplace.url}}/collection/{{collection.handle}}">{{collection.title}}</category>
    {% endfor %}
    </categories>
    {% if delivery_options != empty %}
    <delivery-options>
    {% for option in delivery_options %}
      <option cost="{{option.cost}}" days="{{option.days}}" {% if option.order-before %}order-before="{{option.order-before}}" {% endif %} />
    {% endfor %}
    </delivery-options>
    {% endif %}
    <offers>
      {{content_for_layout}}
    </offers>
    <promos>
      {% for promo in promos %}
      <promo id="{{promo.id}}" type="promo code">
        {% if promo.start_date %}
        <start-date>{{promo.start_date}}</start-date>
        {% endif %}
        {% if promo.end_date %}
        <end-date>{{promo.end_date}}</end-date>
        {% endif %}
        {% if promo.description %}
        <description>{{promo.description}}</description>
        {% endif %}
        {% if promo.url %}
        <url>{{promo.url}}</url>
        {% endif %}
        <promo-code>{{promo.code}}</promo-code>
        <discount {% if promo.percent? %}unit="percent"{% else %}unit="currency" currency="{{currency}}"{% endif %}>
          {{promo.discount}}
        </discount>
        <purchase>
         {% for offer_id in promo.matching_offers_ids %}
         <product offer-id="{{offer_id}}" />
         {% endfor %}
        </purchase>
      </promo>
      {% endfor %}
    </promos>
  </shop>
</yml_catalog>

В поле Шаблон блока offer вставьте следующий код

<offer type="vendor.model" available="{% if product.available %}true{% else %}false{% endif %}" id="{{product.id}}" >
  <url>{{account.url}}/product_by_id/{{product.id}}</url>
  <price>{{product.price}}</price>
  <oldprice>{{product.old_price}}</oldprice>
  <currencyId>{{product.currency_id}}</currencyId>
  <categoryId>{{collection.id}}</categoryId>
  {%for image in product.images limit: 1 %}
  <picture>{{image.url}}</picture>
  {% endfor %}
  <vendor>{{product.properties.vendor}}</vendor>
  <model>{{product.title}}</model>
  <description>{{product.description}}</description>
</offer>

Если в произвольную выгрузку необходимо добавить вывод всех вариантов товаров, то нужно все содержимое блока offer "обернуть" в цикл:

{% for variant in product.variants %}
[здесь тег <offer> и его содержимое]
{% endfor %}

Тег <offer> при выгрузке всех вариантов товара:

<offer type='vendor.model' available='{% if variant.quantity != 0 %}true{% else %}false{% endif %}' {% if product.variants.size > 1 %}id='{{ variant.id }}' group_id='{{ product.id }}'{% else %}id='{{ variant.id }}'{% endif %}>
Тег <url> при выгрузке всех вариантов товара:

<url>{{ account.url }}/product/{{ product.handle }}{% if product.variants.size > 1 %}?variant_id={{ variant.id }}{% endif %}</url>
Шаг 4. Укажите ссылку на фид в настройках рекомендаций в личном кабинете Mailganer
Сбор имейлов на корзине
Можно показывать следующую форму всем, кто не авторизован и хочет уйти со страницы корзины
Ниже расскажем как настроить такую форму. Сначала зайдите в личный кабинет Mailganer на страницу настроек сбора подписчиков.
Скопируйте код для форм подписок.
Зайдите в шаблон cart.liquid в inSales, вставьте скопированный код в конец файла и сохраните изменения.
Вернитесь в личный кабинет Mailganer и перейдите во вкладку Попап при выходе, выберите 3ий шаблон и нажмите применить.
Пролистайте страницу вниз и включите показы попапа. Готово, можно проверять.
Запуск письма "Брошенная корзина"
Перейдите в личный кабинет Mailganer на страницу https://mailganer.com/app/recommendations/ и выберите письмо "Напоминание о брошенной корзине"
Перейдите на 2ой шаг и в шаблонах выберите шаблон для брошенной коризины, наведите на него курсором и нажмите "Применить шаблон". Далее укажите имейл отправителя, тему и запустите триггер.
Стоимость платформы и интеграции
Стоимость платформы состоит из:
  1. Стоимости рассылок
  2. Стоимости модуля товарных рекомендаций

Стоимость установки кода нашими специалистами составляет 7 000 ₽ разово. Чтобы воспользоваться этой услугой, пополните баланс аккаунта Mailganer, добавьте в InSales пользователя insales@mailganer.com и напишите нам, что нужно установить коды рекомендаций.

Для клиентов InSales предоставляется бесплатный месяц платформы Mailganer. Скидка на услугу по установке кодов не распространяется.
Нужна помощь с интеграцией InSales или возникли трудности при подключении товарных рекомендаций? Напишите нам на support@mailganer.com