Сбор данных для e-commerce (Tilda)
Для того, чтобы настраивать сценарии автоматических сообщений для пользователей интернет-магазинов, необходимо собирать информацию о действиях пользователя на сайте. Для E-commerce интересны такие события как: просмотр товаров, добавления их в корзину, оформление заказа и тд. Следуя приведенной ниже инструкции, можно настроить сбор следующих данных о поведении пользователя:
Свойства пользователя:
Просмотренные товары
Корзина
Сумма в корзине
Количество заказов
Сумма последнего заказа
Сумма всех заказов
События пользователя:
Просмотрел товар
Добавил товар в корзину
Посмотрел корзину
Удалил товар из корзины
Начал оформлять заказ
Сделал заказ
Свойства пользователя будут отображаться слева в карточке пользователя, a события пользователя - в хронологии. Подробнее о свойствах и событиях можно узнать в этой статье.
Скрипт на основе шаблона с прописанными данными с сайта следует добавлять в раздел Настройки" - "Сбор данных о пользователях" - "Настроить Javascript код":
❗ Важно: если в разделе "Настроить JavaScript код" уже добавлены скрипты, разместить новый необходимо через строку после последнего скрипта.
Подробнее об определении селекторов для сбора данных здесь, а как протестировать корректность настроенного сбора данных смотрите в этой статье.
💡 События и свойства просмотра товаров и добавления их в корзину
События:
Посмотрел товар
Добавил товар в корзину
Свойства:
Корзина
Сумма в корзине
Добавляем шаблон кода в раздел "Сбор данных о посетителях" – "Настроить JavaScript код":
В начале кода должен стоять скрипт, определяющий функцию getClosest(). Вставим в поле ввода кода сначала его:
function getClosest(el, s) {
var r = undefined;
while (el) {
if (el.matches(s)) {
r = el;
break;
} else if (el.tagName.toLowerCase() == 'body') {
break;
};
el = el.parentElement;
};
return r;
};Затем последует скрипт для записи данных со страницы товара:
var currentUrl,
checkUrl = setInterval(function() {
if (currentUrl != location.href) {
currentUrl = location.href
if (location.href.indexOf('ПУНКТ1') > -1) {
var name = document.querySelector('ПУНКТ2').textContent.trim();
var url = location.href;
var amount = parseInt(document.querySelector('ПУНКТ3').textContent.replace(/\D/g, ''));
var img = ПУНКТ5 document.querySelector('ПУНКТ4').getAttribute('src');
carrotquest.track('$product_viewed', {
'$name': name,
'$url': url,
'$amount': amount,
'$img': img
});
carrotquest.identify([{ op: "union", key: "$viewed_products", value: name }]);
document.addEventListener('click', function(e) {
if (e.target.matches('ПУНКТ6')) {
carrotquest.track('$cart_added', {
'$name': name,
'$url': url,
'$amount': amount,
'$img': img
});
carrotquest.identify([
{ op: "union", key: "$cart_items", value: name },
{ op: "add", key: "$cart_amount", value: amount }
]);
};
});
};
};
}, 1000); 1. Вставляем значение из ссылки, которое повторяется на каждой странице товара. Заменяем в коде слова ПУНКТ1 на это значение. На примере из ссылки http://*домен вашего сайта*/catalog/tproduct/pants/, будет значение tproduct:
if (location.href.indexOf('/tproduct/') > -1) {1.1 Если нет общего уникального значения в ссылке на страницу товара, то можно добавить уникальное значение class или id, которое используется только на странице товара. В этом случае заменяем первые 5 строчек кода записи данных со страницы товара полностью на:
var currentUrl,
checkElement = setInterval(function() {
if (currentUrl != location.href) {
currentUrl = location.href
if (document.querySelectorAll('ПУНКТ1.1').length > 0) {и вместо ПУНКТ1.1 вписываем это уникальное значение. Например, такой атрибут class=”js-image-zoom-hover” встречается только на страницах с товарами, тогда добавляем в код .js-image-zoom-hover:
if (document.querySelectorAll('.js-image-zoom-hover').length > 0) {Далее определим переменные, содержащие информацию о товаре:
2. Определяем селектор элемента с названием товара:
В нашем примере селектор будет таким: .t-store__prod-popup__container .js-store-prod-name. Заменяем ПУНКТ2 в шаблоне на .t-store__prod-popup__container .js-store-prod-name:
var name = document.querySelector('.t-store__prod-popup__container .js-store-prod-name').textContent.trim();3. Стоимость товара. Определяем селектор элемента со стоимостью. Уникальным на странице, то есть больше не повторяется, является это значение, его и используем .t-store__product-popup .js-store-prod-price-val:
var amount = parseInt(document.querySelector('.t-store__product-popup .js-store-prod-price-val').textContent.replace(/\D/g, ''));4. Картинка товара. Определяем уникальное значение у тега, содержащего картинку. В теге с картинкой обязательно присутствует атрибут src со значением ссылки с местом ее хранения (если вы перейдете по этой ссылке в браузере, то в нем подгрузится сама картинка).
Значением в нашем примере будет .t-store__product-popup .js-image-zoom-hover
5. Кроме того, проверяем содержит ли ссылка на картинку домен. Если ссылка выглядит так “https://домен…”, то ПУНКТ5 просто удаляем из шаблона. Если же в ссылке нет этого домена, то прописываем вместо ПУНКТ5 следующее значение
location.origin +
6. Определим селектор кнопки добавления товара в корзину. Пусть селектор будет таким [href="#order"], [href="#order"] *. При клике на эту кнопку должны срабатывать вызов события и запись свойств:
if (e.target.matches('[href="#order"], [href="#order"] *')) {Проверяем, что получилось:
Если есть уникальный путь к странице товара с общим значением, то пример того, что должно получиться:
var currentUrl,
checkUrl = setInterval(function() {
if (currentUrl != location.href) {
currentUrl = location.href
if (location.href.indexOf('/tproduct/') > -1) {
var name = document.querySelector('.t-store__prod-popup__container .js-store-prod-name').textContent.trim();
var url = location.href;
var amount = parseInt(document.querySelector('.t-store__product-popup .js-store-prod-price-val').textContent.replace(/\D/g, ''));
var img = document.querySelector('.t-store__product-popup .js-image-zoom-hover').getAttribute('src');
carrotquest.track('$product_viewed', {
'$name': name,
'$url': url,
'$amount': amount,
'$img': img
});
carrotquest.identify([{ op: "union", key: "$viewed_products", value: name }]);
document.addEventListener('click', function(e) {
if (e.target.matches('[href="#order"], [href="#order"] *')) {
carrotquest.track('$cart_added', {
'$name': name,
'$url': url,
'$amount': amount,
'$img': img
});
carrotquest.identify([
{ op: "union", key: "$cart_items", value: name },
{ op: "add", key: "$cart_amount", value: amount }
]);
};
});
};
};
}, 1000);Если использовали уникальный селектор из пункта 1.1, то пример:
var currentUrl,
checkElement = setInterval(function() {
if (currentUrl != location.href) {
currentUrl = location.href
if (document.querySelectorAll(‘.js-image-zoom-hover').length > 0) {
var name = document.querySelector('.t-store__prod-popup__container .js-store-prod-name').textContent.trim();
var url = location.href;
var amount = parseInt(document.querySelector('.t-store__product-popup .js-store-prod-price-val').textContent.replace(/\D/g, ''));
var img = document.querySelector('.t-store__product-popup .js-image-zoom-hover').getAttribute('src');
carrotquest.track('$product_viewed', {
'$name': name,
'$url': url,
'$amount': amount,
'$img': img
});
carrotquest.identify([{ op: "union", key: "$viewed_products", value: name }]);
document.addEventListener('click', function(e) {
if (e.target.matches('[href="#order"], [href="#order"] *')) {
carrotquest.track('$cart_added', {
'$name': name,
'$url': url,
'$amount': amount,
'$img': img
});
carrotquest.identify([
{ op: "union", key: "$cart_items", value: name },
{ op: "add", key: "$cart_amount", value: amount }
]);
};
});
};
};
}, 1000);💡 События и свойства на странице с корзиной
События:
Удалил товар из корзины
Начал оформлять заказ
Посмотрел корзину
Свойства:
Корзина
Сумма в корзине
Добавляем шаблон кода в раздел "Настроить JavaScript код":
document.addEventListener('mousedown', function(e) {
if (e.target.matches('ПУНКТ1')) {
setTimeout(function() {
if (document.querySelectorAll('.t706__cartwin_showed').length > 0) {
function get_items() {
var items = document.querySelectorAll('ПУНКТ2').length,
cartAmount = parseInt(document.querySelector('ПУНКТ3').textContent.replace(/\D/g, '')) || 0;
carrotquest.identify([
{ op: items == 0 ? "delete" : "update_or_create", key: "$cart_items", value: items == 0 ? 0 : Array.from(document.querySelectorAll('ПУНКТ2')).map(function(elem) { return elem.textContent.trim(); }) },
{ op: items == 0 ? "delete" : "update_or_create", key: "$cart_amount", value: cartAmount }
])
localStorage['lastAmount'] = cartAmount;
};
get_items();
carrotquest.track('$cart_viewed');
document.addEventListener('click', function(e) {
if (e.target.matches('ПУНКТ4')) {
carrotquest.track('Удалил товар из корзины', {
'$name': getClosest(e.target, 'ПУНКТ4.1').querySelector('ПУНКТ4.2').textContent.trim()
});
setTimeout(function() {
get_items();
}, 1000);
} else if (e.target.matches('ПУНКТ5')) {
carrotquest.track('$order_started');
localStorage['orderStarted'] = true;
get_items();
};
});
};
}, 750);
}
})Вместо ПУНКТ1 вставляет селектор кнопки, раскрывающей корзину. Пример:
if (e.target.matches('.t706__carticon_showed, .t706__carticon_showed *')) {2. Находим на странице корзины тег, в котором содержится название товара и прописываем вместо ПУНКТ2 селектор. Количество элементов с нужным нам селектором должно совпадать с количеством добавленных товаров в корзину на момент сбора данных. Пример:
var items = document.querySelectorAll('.t706__product-title a').length,Находим элемент, содержащий итоговую сумму на странице корзины, и прописываем вместо ПУНКТ3 селектор этого элемента. Пример:
cartAmount = parseInt(document.querySelector('.t706__cartwin-prodamount').textContent.replace(/\D/g, '')) || 0;Находим элемент с кнопкой или ссылкой на удаление товара из корзины и вместо ПУНКТ4 прописываем селектор этого элемента. Пример:
if (e.target.matches('.t706__product-del, .t706__product-del *')) {Вместо ПУНКТ4.1 нужно указать селектор контейнера информации о товаре из корзины, а вместо ПУНКТ4.2 – селектор названия товара. Пример:
'$name': getClosest(e.target, '.t706__product').querySelector('.t706__product-title a').textContent.trim()Вместо ПУНКТ5 прописываем селектор кнопки начала оформления заказа. Пример:
document.querySelector('.t706__orderform button’).addEventListener('click', function() {Проверяем, что получилось:
document.addEventListener('mousedown', function(e) {
if (e.target.matches('.t706__carticon_showed, .t706__carticon_showed *')) {
setTimeout(function() {
if (document.querySelectorAll('.t706__cartwin_showed').length > 0) {
function get_items() {
var items = document.querySelectorAll('.t706__product-title a').length,
cartAmount = parseInt(document.querySelector('.t706__cartwin-prodamount').textContent.replace(/\D/g, '')) || 0;
carrotquest.identify([
{ op: items == 0 ? "delete" : "update_or_create", key: "$cart_items", value: items == 0 ? 0 : Array.from(document.querySelectorAll('.t706__product-title a')).map(function(elem) { return elem.textContent.trim(); }) },
{ op: items == 0 ? "delete" : "update_or_create", key: "$cart_amount", value: cartAmount }
])
localStorage['lastAmount'] = cartAmount;
};
get_items();
carrotquest.track('$cart_viewed');
document.addEventListener('click', function(e) {
if (e.target.matches('.t706__product-del, .t706__product-del *')) {
carrotquest.track('Удалил товар из корзины', {
'$name': getClosest(e.target, '.t706__product').querySelector('.t706__product-title a').textContent.trim()
});
setTimeout(function() {
get_items();
}, 1000);
} else if (e.target.matches('.t706__orderform button')) {
carrotquest.track('$order_started');
localStorage['orderStarted'] = true;
get_items();
};
});
};
}, 750);
}
})💡 События и свойства оформленного заказа
События:
Сделал заказ
Свойства:
Корзина
Просмотренные товары
Сумма в корзине
Сумма всех заказов
Количество заказов
Сумма последнего заказа
Добавляем шаблон кода в раздел "Настроить JavaScript код":
if (location.href.indexOf('ПУНКТ1') > -1) {
carrotquest.track('$order_completed', {
'$order_amount': localStorage['lastAmount']
});
carrotquest.identify([
{ op: "delete", key: "$cart_items", value: 0 },
{ op: "delete", key: "$viewed_products", value: 0 },
{ op: "delete", key: "$cart_amount", value: 0 },
{ op: "add", key: "$revenue", value: localStorage['lastAmount'] },
{ op: "add", key: "$orders_count", value: 1 },
{ op: "update_or_create", key: "$last_payment", value: localStorage['lastAmount'] }
]);
localStorage.removeItem('lastAmount');
};Заменяем ПУНКТ1 на часть URL страницы, подтверждающей успешное оформление заказа. Пример:
if (location.href.indexOf('?ORDER_ID') > -1) {Проверяем, что получилось:
if (location.href.indexOf('?ORDER_ID') > -1) {
carrotquest.track('$order_completed', {
'$order_amount': localStorage['lastAmount'],
'$order_id': document.querySelector('.sale_order_full_table b').textContent.replace(/\D/g, '')
});
carrotquest.identify([
{ op: "delete", key: "$cart_items", value: 0 },
{ op: "delete", key: "$viewed_products", value: 0 },
{ op: "delete", key: "$cart_amount", value: 0 },
{ op: "add", key: "$revenue", value: localStorage['lastAmount'] },
{ op: "add", key: "$orders_count", value: 1 },
{ op: "update_or_create", key: "$last_payment", value: localStorage['lastAmount'] }
]);
localStorage.removeItem('lastAmount');
};