Инструкция
Интеграция с 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 должен быть загружен и выполнен перед тем, как можно будет использовать его функциональность.
Чтобы избежать ошибок, весь 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ой шаг и в шаблонах выберите шаблон для брошенной коризины, наведите на него курсором и нажмите "Применить шаблон". Далее укажите имейл отправителя, тему и запустите триггер.
Стоимость платформы и интеграции
Стоимость платформы состоит из:
Стоимость установки кода нашими специалистами составляет 7 000 ₽ разово. Чтобы воспользоваться этой услугой, пополните баланс аккаунта Mailganer, добавьте в InSales пользователя insales@mailganer.com и напишите нам, что нужно установить коды рекомендаций.
Для клиентов InSales предоставляется бесплатный месяц платформы Mailganer. Скидка на услугу по установке кодов не распространяется.
Стоимость установки кода нашими специалистами составляет 7 000 ₽ разово. Чтобы воспользоваться этой услугой, пополните баланс аккаунта Mailganer, добавьте в InSales пользователя insales@mailganer.com и напишите нам, что нужно установить коды рекомендаций.
Для клиентов InSales предоставляется бесплатный месяц платформы Mailganer. Скидка на услугу по установке кодов не распространяется.
Нужна помощь с интеграцией InSales или возникли трудности при подключении товарных рекомендаций? Напишите нам на support@mailganer.com