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

Tilda — это удобная и мощная платформа для создания сайтов, которая привлекает пользователей простым интерфейсом и большим выбором возможностей. На ней легко сделать всё: от лендингов и портфолио до крупных интернет-магазинов.

А ещё в интернет-магазин на Tilda можно добавить товарные рекомендации, чтобы предлагать клиентам персональные подборки и повышать продажи.

В этой статье мы расскажем про интеграцию и два варианта подключения товарных рекомендаций к Tilda.

Перед началом основных настроек, первое, что нужно сделать, это направить запрос об активации модуля товарных рекомендаций в техническую поддержку Mailganer. Сделать это можно через раздел Все обращения в личном кабинете:

После активации вам станет доступен раздел «Магазинам» в настройках списка:

В данном разделе нужно будет добавить фид с товарами и ссылку на ваш интернет-магазин и нажать «Сохранить»:

Есть два основных подхода к настройке товарных рекомендаций в Tilda.

Первый вариант — добавить кастомный скрипт непосредственно в Head на уровне настроек Tilda, который будет фиксировать ключевые действия пользователей (просмотр карточек товаров, добавление и удаление товаров из корзины, совершение покупки).

Второй способ — использовать Google Tag Manager: при выполнении нужных действий на сайте GTM будет автоматически запускать необходимые скрипты для работы товарных рекомендаций. В этой статье мы подробно разберем оба варианта настройки товарных рекомендаций, чтобы вы могли выбрать подходящий под ваши цели и задачи.

Шаг 1. Перейдите в настройки сайта.

Шаг 2. Откройте вкладку «Ещё».

Шаг 3. Нажмите «Редактировать код» в разделе «Html-код для вставки внутрь HEAD».

Шаг 4. Вставьте ваш код в блок «Вставка кода в HEAD».

Готовый код от Mailganer

Мы разработали свой код, с учетом логики, описанной в инструкции «Как настроить товарные рекомендации в рассылках», для отслеживания событий: просмотра карточки товара, добавления товара в корзину, удаления товара из корзины и оформления заказа.

При разработке собственных решений можно опираться именно на такую логику, которая описана в скрипте ниже.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
    var mg_email = ""; // Email посетителя
    var mgr_api = {};
    var emailFound = false; // Флаг, указывающий на то, что email уже был найден

    // Загрузка скрипта MGApi и авторизация
    (function () {
        var script = document.createElement('script');
        var b = document.location.toString().toLowerCase();
        script.src = "https://mailganer.com/jsapi/r/XXXXXXXXX?ref=" + document.referrer + "&url=" + b + "&nc=" + Math.random();
        script.async = true;
        script.onload = function () {
            mgr_api = new MGApi();
            mg_email = localStorage.getItem('mg_email') || ""; // Получение email из LocalStorage
            if (mg_email) {
                mgr_api.auth(mg_email);
                console.log("Авторизация через MGApi вызвана с email из LocalStorage:", mg_email);
            }
        };
        document.getElementsByTagName('head')[0].appendChild(script);
    })();

    $(document).ready(function() {
        console.log("Document is ready");

        // Функция для обработки и сохранения email
$(document).ready(function() {
    console.log("Document is ready");

    // Функция для обработки и сохранения email
    function processFormData() {
        var emailInput = $('input[type="email"]');
        var currentEmail = emailInput.val().trim();

        if (emailFound || currentEmail === "") {
            console.log("Email не найден или уже обработан:", currentEmail);
            return;
        }

        mg_email = currentEmail;
        localStorage.setItem('mg_email', mg_email); // Сохранение email в LocalStorage
        console.log("Email извлечен и сохранен в LocalStorage:", mg_email);

        if (typeof mgr_api !== "undefined" && mg_email) {
            mgr_api.auth(mg_email);
            console.log("Авторизация через MGApi вызвана с email:", mg_email);
        }

        emailFound = true; // Устанавливаем флаг, что email найден
    }

    // Отслеживание изменений только в поле email
    $('input[type="email"]').on('input change', function() {
        emailFound = false; 
        processFormData(); 
    });

    // Настройка наблюдателя для отслеживания изменений только в input[type="email"]
    var observer = new MutationObserver(function(mutationsList) {
        mutationsList.forEach(function(mutation) {
            if (mutation.target && mutation.target.type === "email") {
                emailFound = false;
                processFormData();
            }
        });
    });

    // Ограничиваем область наблюдения только на элементы input[type="email"]
    $('input[type="email"]').each(function() {
        observer.observe(this, {
            attributes: true, // Только изменения атрибутов поля email
        });
    });
});


        // Универсальная функция для получения data-product-uid
        function getProductUid(element) {
            var productContainer = $(element).closest('[data-product-uid]');
            if (productContainer.length === 0) {
                productContainer = $(element).closest('.t-rec').prevAll().find('[data-product-uid]');
            }
            if (productContainer.length === 0) {
                productContainer = $(element).closest('.t-rec').nextAll().find('[data-product-uid]');
            }
            if (productContainer.length) {
                return productContainer.attr('data-product-uid');
            }
            console.error("No product container found or UID is missing.");
            return null;
        }

        // Сохраняем товары в LocalStorage
        function saveProductToLocalStorage(productUid, productName, productPrice, productQuantity) {
            var cart = JSON.parse(localStorage.getItem('cart')) || [];
            var existingProduct = cart.find(function(item) {
                return item.uid === productUid;
            });

            if (existingProduct) {
                existingProduct.quantity += productQuantity;
                existingProduct.price = productPrice * existingProduct.quantity;
            } else {
                cart.push({
                    uid: productUid,
                    name: productName,
                    price: productPrice * productQuantity,
                    quantity: productQuantity
                });
            }

            localStorage.setItem('cart', JSON.stringify(cart));
            console.log("Product added to cart:", { uid: productUid, name: productName, price: productPrice * productQuantity, quantity: productQuantity });
        }

        // Удаляем товары из LocalStorage
        function removeProductFromLocalStorage(productUid) {
            var cart = JSON.parse(localStorage.getItem('cart')) || [];
            cart = cart.filter(function(item) {
                return item.uid !== productUid;
            });
            localStorage.setItem('cart', JSON.stringify(cart));
            console.log("Product removed from cart:", productUid);
        }

        // Логика отслеживания добавления товара
        $('.js-store-prod-popup-buy-btn-txt').on('click', function() {
            var button = $(this);
            var productUid = getProductUid(button);
            var productName = button.closest('.js-store-product').find('.js-store-prod-name').text();
            var productPrice = parseFloat(button.closest('.js-store-product').find('.js-store-prod-price-val').text());
            var productQuantity = parseInt(button.closest('.js-store-product').find('.js-store-prod-quantity').val()) || 1;

            if (productUid) {
                saveProductToLocalStorage(productUid, productName, productPrice, productQuantity);
                alert('Товар добавлен в корзину!');

                const mg_track_product = { id: productUid, email: mg_email }; // Добавляем email в объект события
                var i = setInterval(function() {
                    if (typeof mgr_api !== 'undefined' && mgr_api !== null) {
                        clearInterval(i);
                        mgr_api.track("add_cart", mg_track_product); // Трекинг с email
                        console.log("Mailganer tracking: add_cart event sent with product UID and email:", mg_track_product);
                    }
                }, 100);
            } else {
                console.error('Product UID not found.');
            }
        });

        // Логика отслеживания удаления товара
        $(document).on('click', '.t706__product-del', function() {
            var button = $(this);
            var productUid = getProductUid(button);
            if (productUid) {
                removeProductFromLocalStorage(productUid);
                alert('Товар удален из корзины!');

                const mg_track_product = { id: productUid, email: mg_email }; // Добавляем email в объект события
                var i = setInterval(function() {
                    if (typeof mgr_api !== 'undefined' && mgr_api !== null) {
                        clearInterval(i);
                        mgr_api.track("remove_cart", mg_track_product); // Трекинг с email
                        console.log("Mailganer tracking: remove_cart event sent with product UID and email:", mg_track_product);
                    }
                }, 100);
            } else {
                console.error("Product UID не найден для удаления.");
            }
        });

        // Отправка данных заказа и трекинг события покупки
        function sendOrderData() {
            var cart = JSON.parse(localStorage.getItem('cart')) || [];
            if (cart.length === 0) {
                console.error("Корзина пуста, отправка не будет выполнена.");
                return;
            }

            var orderId = Math.floor(Math.random() * 1000000).toString();
            var timestamp = Math.floor(Date.now() / 1000);
            var total = cart.reduce(function(sum, item) {
                return sum + item.price;
            }, 0.0);

            var orderData = {
                api_key: "XXX",
                source_id: "57662",
                orders: [
                    {
                        id: orderId,
                        status: "Новый",
                        date: timestamp.toString(),
                        email: mg_email, // Передача email
                        channel: "website",
                        value: {
                            total: total.toFixed(2)
                        },
                        items: []
                    }
                ]
            };

            var uniqueItems = {};
            cart.forEach(function(item) {
                if (uniqueItems[item.uid]) {
                    uniqueItems[item.uid].quantity += item.quantity;
                    uniqueItems[item.uid].price = (uniqueItems[item.uid].price / (uniqueItems[item.uid].quantity - item.quantity)) + item.price;
                } else {
                    uniqueItems[item.uid] = {
                        id: item.uid,
                        price: item.price,
                        quantity: item.quantity
                    };
                }
            });

            for (var uid in uniqueItems) {
                orderData.orders[0].items.push(uniqueItems[uid]);
            }

            console.log("Prepared order data for API:", JSON.stringify(orderData, null, 2));

            $.ajax({
                url: "https://mailganer.com/api/v1/orders/",
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify(orderData),
                success: function(response) {
                    console.log("Заказ успешно отправлен!", response);

                    var i = setInterval(function() {
                        if (typeof mgr_api !== 'undefined' && mgr_api !== null) {
                            clearInterval(i);
                            mgr_api.track("purchase", { email: mg_email }); // Трекинг события "purchase" с email
                            console.log("Mailganer tracking: purchase event sent with email:", mg_email);
                        }
                    }, 100);
                },
                error: function(error) {
                    console.error("Ошибка отправки данных заказа:", error);
                }
            });
        }
    });
</script>

В данном коде есть несколько моментов, которые важно уточнить:

В строке script.src = "https://mailganer.com/jsapi/r/XXXXXXXXX?ref=" + document.referrer + "&url=" + b + "&nc=" + Math.random(); вместо XXXXXXXXX нужно указать уникальный ключ интеграции, который находится на вкладке «Магазинам» в настройках списка:

В строке api_key, объекта orderData, нужно указать уникальный ключ, который передаётся вместе с данными заказа в качестве ключа для аутентификации API запроса. Данный ключ находится в настройках профиля, раздел «Ключ API»:

Также в коде используются идентификаторы кнопок:

Добавить товар в корзину = .js-store-prod-popup-buy-btn-txt
Удалить товар из корзины = - .t706__product-del для отслеживания событий добавления товара в корзину и его удаления соответственно.

Это позволяет чётко отслеживать такие действия покупателя, как добавление и удаление товаров, что также помогает собирать данные о товарах, с которыми взаимодействовали пользователи на сайте.

ID кнопок можно найти, исследуя HTML-код сайта с помощью инструментов разработчика в браузере. Найдите элементы кнопок добавления и удаления товара в корзину, и посмотрите их классы и идентификаторы в HTML-разметке, чтобы использовать их для трекинга:

В Tilda нет такой стандартной страницы «Спасибо за заказ» после оформления заказа, как например, в Insales, с которой можно было бы взять все необходимые данные о заказе:

В связи с этим возникли сложности со сбором этих данных о заказе в Tilda т.к. для корректной работы события «Оформление заказа» нужны:
— номер заказа;
— дата заказа;
— email;
— id товара;
— цена;
— количество товаров.

Tilda, к сожалению, в простом и понятном виде эти данные не собирает.

Также для корректной работы триггеров нужно собирать email адреса посетителей сайта. Мы их собирали с помощью простой формы на главной странице сайта:

Google Tag Manager (GTM) — это инструмент, который позволяет легко добавлять и управлять тегами и триггерами на сайте без необходимости изменения кода вручную.

С помощью GTM также можно настроить товарные рекомендации, автоматически фиксируя, например, просмотры конкретных товаров и передавая их данные в Mailganer.

В статье мы подробно, на примере добавления триггера и тега для трекинга события «Просмотр карточки товара» рассмотрим данный способ настройки товарных рекомендаций

Шаг 1. В GTM нужно создать новый контейнер

Шаг 2. Зайти в раздел «Теги» и создать новый Тег

Шаг 3. В конфигурации Тега выбрать «Пользовательский HTML».

Шаг 4. В блок HTML вставить следующий код:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    // Функция для получения data-product-uid
    function getProductUid() {
        // Найти элемент с data-product-uid на странице
        var productContainer = document.querySelector('.js-store-product');
        return productContainer ? productContainer.getAttribute('data-product-uid') : null;
    }

    $(window).on('load', function () {
        var i = setInterval(function () {
            if (typeof mgr_api !== 'undefined' && mgr_api != {}) {
                clearInterval(i);
                var productUid = getProductUid();

                if (productUid) {
                    var mg_track_product = {
                        id: productUid, // Используем полученный UID
                    };
                    console.log("Tracking view event for product UID: " + productUid);
                    mgr_api.track("view", mg_track_product);
                } else {
                    console.error("Product UID not found.");
                }
            }
        }, 100);
    });
</script>

Шаг 5. В блоке Триггеры настроек Тега выберите «Просмотр всех страниц DOM» (условие для активации триггера укажите «Все события "Модель DOM готова"»):

Шаг 5. Опубликуйте внесенные в GTM-контейнер изменения

Как проверить настройку: если коды установлены корректно, то в личном кабинете Mailganer (раздел "Магазинам") отобразится соответствующий статус: