Вход
Регистрация
Инструкция

Подключение товарных рекомендаций в InSales

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

Оглавление

1.
Как настроить интеграцию Mailganer и InSales ›
2.
Установка кодов рекомендаций ›
3.
Указание ссылки на фид с товарами ›
4.
Сбор имейлов на корзине ›
5.
Запуск письма «Брошенная корзина» ›
6.
Стоимость интеграции ›

Как настроить интеграцию Mailganer и InSales чтобы подключить триггеры для интернет-магазинов и товарные рекомендации

InSales — популярная платформа для управления онлайн-магазином.

С помощью связки с платформой вы можете автоматизировать отправку триггеров брошенной корзины, брошенного поиска и других писем.
Чтобы включить возможность настройки рекомендаций в Mailganer, нужно:
  1. Написать в поддержку, что вы хотите активировать рекомендации
  2. Активировать новую фичу в разделе «Настраиваемые фичи».
После вам станет доступен раздел управления триггерами для интернет-магазинов и товарными рекомендациями.

Список → Настройки списка → Магазинам → Триггеры для интернет-магазинов.
Чтобы настроить связку и использовать данные, нужно установить коды рекомендаций и указать ссылку на фид с товарами.
Подробнее о настройке рекомендаций и триггеров читайте в статье «Как настроить товарные рекомендации в рассылках» ›
В этом материале мы разберём только работу с InSales.
1. Установить
коды на сайт
2. Настроить
фид товаров
3. Сбор имейлов
на корзине
4. Настройка
письма
5. Стоимость
Mailganer

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

Шаг 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 на страницу рекомендаций и выберите письмо «Напоминание о брошенной корзине».
Перейдите на 2ой шаг и в шаблонах выберите шаблон для брошенной корзины, наведите на него курсором и нажмите «Применить шаблон». Далее укажите имейл отправителя, тему — и запустите триггер.

Стоимость интеграции

Стоимость описанной выше интеграции с платформой будет состоять из:

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

Для клиентов InSales предоставляется бесплатный месяц платформы Mailganer. Скидка на услугу по установке кодов не распространяется.
Нужна помощь с интеграцией InSales или возникли трудности при подключении товарных рекомендаций? Напишите нам через «Мои Обращения» или на support@mailganer.com
Участвует в разработке продукта SaM oTPravil. Поможет со сложными интеграциями и реализует запросы на доработку. Ответит на вопросы по SMTP и найдёт наилучшее решение
Влад Точоный
Менеджер SaM oTPravil
28.07.2020
дата публикации
31.12.2024
дата последнего обновления