Настройка E-Commerce

Благодаря установке кода e-commerce в отчетах Google Analytics можно увидеть покупки, которые совершили пользователи на вашем сайте за определенный период времени:

• количество покупок;
• сумму, на которую пользователи совершили покупки;
• количество единиц товаров;
• средний чек.

Для настройки отслеживания электронной торговли нужно внесение изменений в исходный код страниц сайта, которые завершают процесс оформления покупки, так называемые страницы - thankyou-page.

Перед тем как ставить ТЗ на программиста нужно перейдите в Google Analytics выбрать необходимый проект, перейти в режим администратора, после чего выбрать пункт меню “Настройки электронной торговли”:


Нужно включить отслеживание переведя переключатель в положение “ВКЛ”:

Добавление кода отслеживания электронной торговли

Инструкции по добавлению кода отслеживания электронной торговли можно найти в Руководстве по разработке для используемой среды:

Отслеживание сайта электронной торговли: Universal Analytics (analytics.js) или классическая версия Google Analytics (ga.js).

Порядок действий по внесению изменений в код отслеживания Google Analytics.

Для передачи данных в Аналитикс в электронной торговли используют основные 3 функции:

_addTrans()

_addItem()

_trackTrans()

 

Функция _addTrans() - собирает информацию по всему заказу,

_addItem() - собирает информацию по каждой купленной единице товара, отслеживает каждую покупку, то есть каждую купленную единицу товара и вызывается для каждой единицы товара отдельно.К примеру если купили 1 ноутбук и 1 сумку, то ф-ция _addItem() должна вызываться два раза - 1 раз для ноутбука, 2 раз для сумки.

_trackTrans() - отправляет полученные данные в Google Analytics, отвечает непосредственно за передачу всех данных.

Bызов функций и их обязательные параметры:

_gaq.push(['_addTrans', '', // Идентификатор заказа – обязательный параметр ;'', // Название магазина или компании '', // Всего к оплате – обязательный параметр '', // Налоги '', //Стоимость доставки '', // Город '', // Область '' // Страна ]); _gaq.push(['_addItem', '', // Идентификатор заказа / ID заказа– параметр, позволяющий связать товар с транзакцией '', // Код единицы складского учета / артикул – обязательный параметр '', // Название товара '', // Категория '', // Цена за единицу товара – обязательный параметр '' // Количество единиц товара – обязательный параметр ]); _gaq.push(['_trackTrans']);

Данные 3 функции нужно вызвать (включить в основной код отслеживания Google Analytics) на странице успешного оформления заказа thankyou-page, то есть когда заказ уже сформирован, заказан.

К примеру, на данной странице код Аналитикса может иметь следующий вид:

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); //ID аккаунта в Google Analytics _gaq.push(['_trackPageview']); //Информация о покупке _gaq.push(['_addTrans', 'Заказ:9856487', // ID заказа (обязательное поле) 'Мой магазин', // Название интернет-магазина '3000', // Сумма заказа (обязательное поле) '155', // Налог '40', // Цена доставки 'Киев', // Город 'Киевская’', // Область 'Украина' // Страна ]); // Информация о купленных единицах товара _gaq.push(['_addItem', 'Заказ:9856487', // ID заказа - для проверки соответствия товара заказу (обязательное поле) 'Артикул 55555', // Уникальный для каждого товара артикул (обязательное поле) 'Товар из интернет-магазина', // Название товара 'Категория: Товары для детей', // Категория '1000', // Цена товара (обязательное поле) '3' // Количество купленных единиц товара (обязательное поле) ]); //Отправка данных в Google Analytics _gaq.push(['_trackTrans']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

Код должен располагаться на thankyou-page только один раз.

Если пользователь перезагрузит страницу, то на ней уже не должно быть никаких признаков кода отслеживания транзакций, даже пустого! Поскольку нулевые транзакции тоже вносят данные в аналитику.

После установки кода программистом это следует проверить!

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

Enhanced Ecommerce или расширенная электронная торговля

B Google Analytics есть возможность установки Enhanced Ecommerce или расширенной электронной торговли.

Расширенная электронная торговля позволяет получить множество дополнительной информации о действии пользователя, взаимодействии с товарами, его пути к завершению процесса покупки.

Установка Enhanced Ecommerce даст возможность получать информацию:

- о товарах, которыми интересовался пользователь

- о том, какие товары чаще всего пользователи добавляют в корзину и удаляют из нее

- просмотрах подробной информации о товарах

- о совершенных транзакциях

- об этапах, на которых пользователь по какой-либо причине прервал процесс покупки товара

Для настройки расширенной электронной коммерции нужно:

1. Установить на сайт код отслеживания Universal Google Analytics

Если на сайте стоит старый код Google Analytics, то его нужно заменить на код Universal Google Analytics.

2. Подключить плагин es.js расширенной электронной коммерции

Это можно сделать с помощью команды:

ga('require', 'ec');

Данную команду необходимо внедрить в код отслеживания Universal Google Analytics - https://support.google.com/analytics/answer/6014857

Так же необходимо активировать функцию «Расширенная электронная торговля” в аккаунте Google Analytics (как это настроить описано выше).

3. Установить фрагменты кода для отслеживания детального процесса покупки, которое выполняют посетители.

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

- просмотр показов товаров;

- клики по ссылкам на товары;

- просмотр сведений о товаре;

- добавление товаров в корзину и удаление из нее;

- начало процесса оформления покупки;

- совершение транзакций;

- возврат средств.

https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce

Примеры фрагментов кода, которые нужно разместить на сайте.

1. Код отслеживания просмотра товаров

Данный фрагмент кода нужно устанавливать на каждую страницу, где представлен широкий ассортимент товаров сайта (страницы категорий, главная страница сайта и т.д). Для фиксирования этого показа используется команда ec:addImpression, а информация о товаре передается в объекте impressionFieldObject:

ga('create', 'UA-XXXXX-Y'); //ID аккаунта в Google Analytics 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'; } }); }

3. Код отслеживания просмотра информации о товаре

После клика на продукт пользователь попадает на страницу товара, где видит его детальное описание.

Данный код необходимо установить непосредственно на саму страницу товара.

Нужно использовать ec:addProduct, чтобы зарегистрировать этот просмотр, так же указать действие типа detail с помощью ec:setAction:

ga('create', 'UA-XXXXX-Y'); //ID аккаунта в Google Analytics 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"); //ID аккаунта в Google Analytics 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"); //ID аккаунта в Google Analytics 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 нужно будет установить соответствующий код отслеживания для каждого этапа оформления покупки.

6. Транзакция

Для отслеживания продажи используйте ec:addProduct, чтобы добавить каждый товар, а затем ec:setAction, чтобы задать тип действия purchase (покупка). Сведения о транзакции (например, общий доход, налог и стоимость доставки) предоставляются в объекте actionFieldObject.

Данный фрагмент кода необходимо установить на завершающую кнопку оформления заказа:

ga('create', 'UA-XXXXX-Y'); //ID аккаунта в Google Analytics 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.

После активации функции расширенной электронной торговли и внедрения всех представленных фрагментов кода на страницах сайта/интернет магазина, можно будет анализировать весь процесс оформления заказа и выделить проблемные участки сайта, на которых посетитель прерывает покупку товара.