Всем привет!
Говоря о веб-аналитике, мы часто упоминаем про важный ее элемент - электронную коммерцию. Похоже, настало время познакомиться с ней поближе. Поехали!
Электронная коммерция – это передача данных о количестве и стоимости проданного товара с вашего сайта в Google Analytics и Яндекс Метрику. Иными словами, это инструмент, который позволяет вам понять, сколько и по какой цене вы продали товара с сайта, то есть подсчитать выручку. А зная выручку и затраты, вы уже можете уже посчитать ROI (коэффициент окупаемости) и ДРР (долю рекламных расходов).
Принято считать, что работа с перечнем товаров и ценами на них — это удел интернет-магазинов. Спорить с этим мы не станем, однако есть и другие виды бизнесов, где важно понимать объем выручки.
Вот почему коммерция так важна, зачастую без нее просто невозможно грамотно выстроить экономику проекта.
С этим разобрались. Как же настроить электронную коммерцию? А вот тут часто возникают проблемы – это, действительно, сложнее настройки целей на отправку форм. Что ж, тем интереснее разобраться.
Для начала о том, где в принципе можно искать отчёт по этой теме.
Где искать отчет «электронная коммерция» в Яндекс
Где искать отчет «электронная коммерция» в Google Analytics?
Электронную коммерцию для Яндекс Метрики можно настроить несколькими способами. Выбор будет зависеть от того, на какой CMS (системе управления сайта) работает ваш сайт.
Давайте рассмотрим каждый из способов.
1. Модуль/плагин электронной коммерции, встроенный в вашу CMS сайта.
Здесь вам понадобятся минимальные усилия. Нужно лишь установить этот модуль, прописать в нём номер счетчика метрики и передвинуть ползунок «dataLayer» в настройках Яндекс Метрики. Дело в шляпе.
2. Модуль электронной коммерции, встроенный в сервис внутри frame вашего сайта.
К примеру, это может быть модуль бронирований номеров в отелях Travelline. Целый ряд наших клиентов использует данный модуль для бронирования номеров у себя на сайте.
Действия здесь аналогичные первому способу: для начала в настройках Яндекс Метрики передвигаем ползунок «dataLayer», затем указываем номер счетчика в настройках этого сервиса.
3. Google Tag Manager + JavaScript
С третьим вариантом будет ощутимо сложнее. Как минимум, вам нужно владеть Google Tag Manager. GTM уже должен быть установлен и настроен на вашем сайте.
Так как через GTM у нас есть доступ только к фронту сайта, с ним мы работать и будем. В целом алгоритм настройки не сложный.
Итак, по порядку.
Для начала нужно понимать, какие именно данные понадобится передавать системам аналитики.
Для расширенной электронной коммерции список следующий:
- Название товара (name)
- Артикул (sku)
- Количество единиц товара (quantity)
- Цена за единицу (price)
- Общая цена транзакции (transactionTotal)
- ID транзакции (transactionId)
Со списком разобрались. Далее следует определить, когда и в каком виде сайт будет предоставлять нам эти данные. Тут все будет зависеть от самого сайта.
На одних сайтах есть страница с итогами заказа, где все данные собраны в одном месте, остаётся лишь спарсить их и передать системам аналитики.
На других - данные разбросаны по разным этапам оформления, и нужно будет их как-то хранить до момента передачи аналитике (к сожалению, GTM не умеет хранить данные достаточно долго).
Рассмотрим пару примеров:
На этом сайте все данные содержатся на странице с завершением заказа.
Есть одно НО: в этом кейсе цена за позицию отображала итоговую стоимость по всей позиции, а не цену за её единицу, так что пришлось ее дополнительно считать. Как воспользоваться этим костылём, расскажем чуть позже.
На сайте из следующего примера данные содержатся на разных страницах. В «корзине» нам доступны лишь данные о товарах.
И только после оформления заказа мы можем видеть ID транзакции.
Как видите, в этом примере нет артикула. Но и эту проблему можно решить с помощью небольшой хитрости, к примеру, продублировав имя в артикул
Для дальнейшего разбора нам с вами нужно познакомиться с таким понятием, как селектор, и понять, где его искать.
Селектор – это путь элемента. Его можно сравнить с путём до папки у вас в компьютере. Он показывает, где именно в объектной модели документа находится искомый элемент.
Чтобы узнать селектор, есть два простых варианта:
1. Скопировать из панели разработчика в браузере:
Нажать ctrl + shift + c (или нажать на указанную на скриншоте стрелку) => выбрать нужный элемент страницы => правая кнопка мыши => copy => copy selector.
2. Воспользоваться расширением для хрома GTM Variable Builder.
Главное его преимущество в том, что он сразу в консоли выдаёт готовый скрипт, с помощью которого вы можете спарсить выделенный текст. Работает он так: Выделяете нужный текст => нажимаете на значок расширения => забираете из консоли результат (зеленый текст).
Настройка через Google Tag Manager
Итак, мы определили, когда сайт предоставляет нам нужные данные и что такое селектор. Можем приступать к настройке.
1. Для начала создадим пользовательские переменные типа «Собственный код JavaScript»:
Переменные называем аналогично данным, которые будем в них собирать: если это название товара, то name, если артикул, то sku и так далее.
Вот так это будет выглядеть в Google Tag Manager:
2. Теперь переходим к коду. В целом, он довольно прост, а использовать его можно в самых разных ситуациях, правда, с небольшими видоизменениями. Подробнее о коде:
Начало функции:
function(){
Дальше объявляем переменную «items» и заполняем данными со страницы с помощью метода «document.querySelectorAll()». В скобках указан селектор элемента, из которого нужно парсить данные. Этот метод парсит ВСЕ элементы с указанным селектором. Если нужно один конкретный, то используется метод «document.querySelector()».
var items = document.querySelectorAll("#scale-page > main > div > div > div.page-registration-steps.t-registration-steps > div > form > div > div > div > table > tbody > tr > td > div.order-page-finish__title");
Теперь объявляем переменную и даем ей значение длины массива.
var itemsLength = items.length;
После объявляем массив.
var myProducts = []
И в цикле заполняем его названиями наших товаров в строковом формате.
for (i = 0; i < itemsLength; i++) {
myProducts.push(items[i].innerText);
}
Возвращаем полученный массив, именно это значение и примет переменная «name».
return myProducts;
}
Как видите, всё не так сложно. Этот вариант подойдёт для ситуации, когда все данные собираются на странице, с которой и отправляются в Data Layer.
Но что, если данные разбросаны на разных страницах? В этом случае придётся использовать браузер пользователя, как временное хранилище для нужной нам информации.
Подробнее:
function(){
Тут уже необходима проверка условия, когда нам сохранить данные, а когда получить. В этом примере использовали url страницы, так как данные о товаре доступны на ней.
if ({{Page URL}} == "url страницы, на которой необходимо собрать данные, например «корзина»") {
Затем все, как в первом примере.
var items = document.querySelectorAll(".basket-items-list-item-descriptions-inner>.basket-item-block-info>.basket-item-info-name>.basket-item-info-name-link>span");
var itemsLength = items.length;
var myProducts = []
for (i = 0; i < itemsLength; i++) {
myProducts.push(items[i].innerText); }
Дальше мы используем session storage, чтобы сохранить данные до окончания покупки. Можно использовать и local storage, но мы решили, что сессии будет достаточно, так как путь к покупке так или иначе лежит через «корзину». Делается это методом sessionStorage.setItem().
sessionStorage.setItem("name", myProducts);
}
Если же пользователь не в корзине, но тег сработал, значит самое время забрать данные из корзины и поместить в переменную. Тут используем метод sessionStorage.getItem().
else { var str = sessionStorage.getItem("name");
так как getitem возвращает json, нужно превратить его в массив строк. Просто разбиваем их запятой.
myProducts = str.split(",");
}
Отправляем.
return myProducts;
}
Готово.
Вот так это хранится в session storage:
Аналогичным образом «парсятся» остальные данные.
3. Когда все данные собраны, переходим к настройке тегов.
Создаем триггеры, по которым будет активироваться наш тег. Например, для примера выше это страница завершения заказа:
«page.title» - это тоже пользовательская переменная, в которую данные собираются аналогично нашей переменной «name». Повторимся, что код универсален. В нашем случае, если на странице есть этот заголовок, значит заказ оформлен успешно.
Создаем тег типа «пользовательский HTML»:
Вставляем в него следующий код. Подробнее о самом важном в нем:
<script>
Объявляем массив:
var ecomProducts = [];
В цикле заполняем этот массив собранными в переменные данными:
for (var i = 0; i < {{sku}}.length; i++) {
метод push добавляет информацию в массив:
ecomProducts.push({
В каждой итерации мы добавляем данные из наших переменных в массив ecomProducts в том виде, который необходим для систем аналитики:
'id' : {{sku}}[i],
'name' : {{name}}[i],
'price' : {{price}}[i],
'category' : '',
'quantity' : {{quantity}}[i]
});
}
window.dataLayer = window.dataLayer || [];
Далее мы обнуляем data layer, на случай если в нем были старые данные.
dataLayer.push({ ecommerce: null });
И отправляем в него информацию по нашей транзакции вместе с событием purchase.
dataLayer.push({
'event' : 'purchase',
'ecommerce' : {
"currencyCode": "RUB",
'purchase' : {"actionField" : {
'id' : {{transactionId}},
'revenue' : {{transactionTotal}},
Вместо ХХХХХХ вставляем код счетчика метрики для которого настраивается электронная коммерция.
'goal_id' : ХХХХХХ},
"products" : ecomProducts},
}});
</script>
Настройка в Google Analytics
Для отправки данных в Google Analytics дополнительно нужно проделать следующее:
Создаем триггер типа «Специальное событие» purchase.
На основании этого триггера создаем тег отправки данных в аналитику:
Тут надо обязательно включить использование уровня данных в GTM:
Готово. Вы великолепны.
Логика работы скрипта
А на десерт - обещанный бонус об упомянутом ранее костыле. Как итоговую стоимость по всей позиции превратить в цену за единицу:
function(){
Сначала мы парсим количество единиц товара и записываем в массив.
var item = document.querySelectorAll("#scale-page > main > div > div > div.page-registration-steps.t-registration-steps > div > form > div > div > div > table > tbody > tr > td > div.order-page-finish__amount");
var itemLength = item.length;
var quantity = []
for (i = 0; i < itemLength; i++) {
quantity.push(item[i].innerText);
}
После парсим итоговую цену позиции.
var items = document.querySelectorAll("#scale-page > main > div > div > div.page-registration-steps.t-registration-steps > div > form > div > div > div > table > tbody > tr > td > div.order-page-finish__price");
var itemsLength = items.length;
var myProducts = []
for (i = 0; i < itemsLength; i++) {
myProducts.push(items[i].innerText);
}
for (i = 0; i < itemsLength; i++) {
Далее мы просто делим цену позиции на количество единиц и получаем цену за единицу.
myProducts[i] = myProducts[i]/quantity[i];
}
return myProducts;
}
Как видите, решается тоже элементарно.
Проверка на работоспособность
Данные собрали, коды прописали, теги настроили. Самое время - проверить работоспособность.
Отправляемся на сайт, проводим тестовую транзакцию и смотрим результат. Это можно сделать либо через расширение Яндекс Метрика Инспектор:
Либо прямо в консоли (вероятнее всего, для этого потребуется войти в режим отладки с параметром ?ym_debug=1):
Вот теперь вы точно великолепны.
Думаем, вы уже убедились, что последний способ настройки электронной коммерции потребует значительно больших усилий и некоторых знаний javaScript и Google Tag Manager. Варианты, как водится, есть: осваивать всё это самостоятельно или привлекать «прогера».
Самое сложное - это «достать» с вашего сайта данные по количеству, цене, валюте и т.д. Дальнейшие действия - уже дело техники, учитывая, что можно использовать наши скрипты выше.
Какой бы из вариантов вы ни выбрали, оно того стоит. Ведь без электронной коммерции, как мы уже говорили, часто просто невозможно экономически грамотно выстроить проект.
