В данной статье я расскажу о главных особенностях и простоте настройки расширенной электронной коммерции для вашего интернет магазина. Многие из нас до сих пор остаются ярыми приверженцами стандартной электронной коммерции, не осознавая до конца, чего они себя лишают.
Дело в том, что расширенная электронная коммерция — это мощный инструмент, который позволит вам в полном объеме анализировать поведение посетителей на вашем сайте, с первого знакомства с предлагаемыми товарами до момента завершения покупки.
Особенности Enhanced Ecommerce
Как я уже говорила, настройка расширенной электронной коммерции даст вам возможность получить подробную информацию о взаимодействиях пользователей с контентом вашего интернет магазина. Так вы сможете получать информацию:
- о товарах, которыми интересовался пользователь
- о том, какие товары чаще всего пользователи добавляют в корзину и удаляют из нее
- просмотрах подробной информации о товарах
- о совершенных транзакциях
- об этапах, на которых пользователь по какой-либо причине прервал процесс покупки товара
Пошаговое руководство по настройке расширенной электронной коммерции:
Шаг 1. Устанавливаем на сайт код отслеживания Universal Google Analytics
Если на страницах вашего интернет магазина до сих пор стоит старый код Google Analytics, то его нужно удалить, а на его место добавить код Universal Google Analytics.
Код Google Analytics:
Меняем на код отслеживания Universal Google Analytics:
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-********-*', 'auto');
ga('send', 'pageview');
</script>
Шаг 2. Подключаем плагин es.js расширенной электронной коммерции
Это можно сделать с помощью команды:
ga('require', 'ec');
Данную команду необходимо внедрить в код отслеживания Universal Google Analytics. Кроме того, необходимо активировать функцию «Расширенная электронная торговля” в вашем аккаунте Google Analytics:»
— переходим во вкладку «Администратор» и в колонке «Представление» выбираем пункт «Настройка электронной торговли»:
— в открывшемся окне активируем настройку расширенной электронной коммерции (устанавливаем ползунок «ВКЛ.»):
— нажимаем кнопку «Отправить». Что касается настройки маркировки этапов оформления заказа, то заполнять это не обязательно, но мы поговорим об этом позже.
Шаг 3. Установка фрагментов кода
Для отслеживания детального процесса покупки, которое выполняют посетители необходимо установить соответствующие фрагменты кода на каждую страницу сайта. После внедрения кода вы сможете просматривать информацию о:
- просмотрах показов товаров
- кликах по ссылкам на товары
- просмотрах подробной информации о товарах
- добавление товаров в корзину и удаление из нее
- начале процесса оформления покупки
- совершение транзакций
- возврате средств
Ниже приведенные фрагменты кода, которые нужно разместить на сайте.
1. Код отслеживания просмотра товаров
В этом примере пользователь впервые видит товар в результатах поиска. Данный фрагмент кода необходимо установить на каждую страницу, где представлен широкий ассортимент товаров интернет магазина (например, страницы категорий, главная страница сайта и т.д). Для регистрации этого показа используется команда ec:addImpression, а информация о товаре передается в объекте impressionFieldObject:
ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addImpression', {
'id': 'P12345', // Подробная информация о продукте
'name': 'Android Warhol T-Shirt',
'category': 'Apparel/T-Shirts',
'brand': 'Google',
'variant': 'black',
'list': 'Search Results',
'position': 1 // 'position'- позиция продукта в результате поиска (списка).
}); ga('ec:addImpression', {
'id': 'P67890',
'name': 'YouTube Organic T-Shirt',
'type': 'view',
'category': 'Apparel/T-Shirts',
'brand': , 'YouTube',
'variant': 'gray',
'list': 'Search Results',
'position': 2
});
ga('send', 'pageview'); // Отправить впечатления о продукте с начальной страницы просмотра.
2. Код отслеживания клика по товару
Пользователь нажимает на заинтересовавший его товар, чтобы узнать о нем подробнее.
Данный фрагмент кода необходимо установить для каждой карточки товара в представленном списке категории. Чтобы зарегистрировать этот клик, используйте ec:addProduct и ec:setAction:
// Вызывается, когда пользователь кликает по продукту
function onProductClick() {
ga('ec:addProduct', {
'id': 'P12345',
'name': 'Android Warhol T-Shirt',
'category': 'Apparel',
'brand': 'Google',
'variant': 'black',
'position': 1
});
ga('ec:setAction', 'click', {list: 'Search Results'});
// Клик по продукту и перенаправление пользователя на страницу товара
ga('send', 'event', 'UX', 'click', 'Results', {
'hitCallback': function() {
document.location = '/product_details?id=P12345';
}
});
}
Создать ссылку на товар можно следующим образом:
<a href=>/next-page.html" onclick="onProductClick(); return !ga.loaded;""Android Warhol T-Shirt</a>
3. Код отслеживания просмотра информации о товаре
После клика на продукт пользователь попадает на страницу товара, где видит его детальное описание.
Данный код необходимо установить непосредственно на саму страницу товара.
Используйте ec:addProduct, чтобы зарегистрировать этот просмотр, и укажите действие типа detail с помощью ec:setAction:
ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addProduct', {
'id': 'P12345',
'name': 'Android Warhol T-Shirt',
'category': 'Apparel',
'brand': 'Google',
'variant': 'black'
});
ga('ec:setAction', 'detail');
ga('send', 'pageview'); // Отправка деталей о продукте
4. Код для отслеживания добавления/удаления товара в/из корзины
Пользователь собирается купить товар, предварительно отправив его в корзину.
Чтобы зарегистрировать добавление в корзину покупок (или удаление из нее), используйте ec:addProduct и задайте тип действия add (или remove):
Данный фрагмент кода устанавливается непосредственно на кнопку «Добавить в корзину» или «Купить».
// Вызов функции, когда товар будет добавлен в корзину
function addToCart(product) {
ga('ec:addProduct', {
'id': product.id,
'name': product.name,
'category': product.category,
'brand': product.brand,
'variant': product.variant,
'price': product.price,
'quantity': product.qty
});
ga('ec:setAction', 'add');
ga('send', 'event', 'UX', 'click', 'add to cart'); // Отправка данных
}
Ниже представленный фрагмент кода необходимо установить на кнопку «Удалить из корзины»:
ga("create", "UA-XXXXX-Y");
ga("require", "ec");
ga("ec:addProduct", {
"id": "bc823",
"name": "Fuelworks T-Shirt",
"price": "92.00",
"brand": "Fuelworks",
"category": "T-Shirts",
"variant": "red",
"dimension1": "M",
"position": 0,
"quantity": 1
});
ga("ec:setAction", "remove");
ga("send", "event", "detail view", "click", "removeFromCart");
5. Код для отслеживания процесса оформления заказа
Процесс оформления заказа состоит из этапов. В том случае, если в вашем интернет магазине всего один этап оформления заказа, то вам необходимо на страницу корзины добавить код:
ga("create", "UA-XXXXX-Y");
ga("require", "ec");
ga("ec:addProduct", {
"id": "bc823",
"name": "Fuelworks T-Shirt",
"price": "92.00",
"brand": "Fuelworks",
"category": "T-Shirts",
"variant": "red",
"dimension1": "M",
"position": 0,
"quantity": 1
});
ga("ec:setAction", "checkout", {
"step": 1
});
ga("send", "pageview")
В том случае, если процесс оформления состоит из нескольких этапов, то передачи данных в Google Analytics вам нужно будет установить соответствующий код отслеживания для каждого этапа оформления покупки. Для визуализации прохождения посетителями всех этапов оформления заказа, рекомендуется установить для каждого из них маркировку в Google Analytics.
6. Транзакция
И наконец, пользователь завершает оформление покупки.
Для отслеживания продажи используйте ec:addProduct, чтобы добавить каждый товар, а затем ec:setAction, чтобы задать тип действия purchase (покупка). Сведения о транзакции (например, общий доход, налог и стоимость доставки) предоставляются в объекте actionFieldObject.
Данный фрагмент кода необходимо установить на завершающую кнопку оформления заказа:
ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addProduct', {
'id': 'P12345',
'name': 'Android Warhol T-Shirt',
'category': 'Apparel',
'brand': 'Google',
'variant': 'black',
'price': '29.20',
'quantity': 1
});
// Transaction level information is provided via an actionFieldObject.
ga('ec:setAction', 'purchase', {
'id': 'T12345',
'affiliation': 'Google Store - Online',
'revenue': '37.39',
'tax': '2.85',
'shipping': '5.34',
'coupon': 'SUMMER2013' // User added a coupon at checkout.
});
ga('send', 'pageview'); // Send transaction data with initial pageview.
После активации функции расширенной электронной торговли и внедрения всех выше представленных фрагментов кода на страницах вашего интернет магазина, вы сможете анализировать весь процесс оформления заказа и выделить для себя проблемные участки сайта, на которых посетитель прерывает покупку товара.
