Використання розширеної електронної комерції Google на ShopScript 7

Власник інтернет-магазину ProfiMake хотів отримувати максимально точні аналітичні дані про роботу магазину. Важливими були не лише основні показники, на кшталт кількості відвідувачів та замовлень, а й другорядні: перегляди конкретних товарів, відвідування кошика тощо.

Використовуючи ці дані можна відслідковувати привабливість конкретних товарів, ефективність рекламних банерів, на якому етапі вирви продажів відсівається найбільша кількість відвідувачів та багато іншого. Ця інформація дає можливість більш точно настроювати рекламні кампанії та використовувати складні сценарії. Проте задля їх реалізації необхідно запровадити розширену електронну комерцію.

Що таке розширена електронна комерція?

Плагін розширеної електронної торгівлі для analytics.js дозволяє дізнатися, як користувачі взаємодіють із товарами в інтернет-магазинах. З його допомогою можна відстежувати покази та кліки, перегляд інформації про товар, додавання в кошик та видалення з нього, процес оформлення покупки, транзакції та повернення.

З керівництва по Google Analytics

Розширена електронна комерція дає уявлення про повний цикл продажу товару: від першого перегляду до оформлення замовлення. Всі дані зберігаються в одній групі звітів, що зручно для їхньої подальшої обробки.

Використання розширеної електронної комерції не реалізується простою вставкою фрагмента коду: необхідно розмітити сайт особливим чином, позначивши для Google розташування кошика та кожну можливу подію.

Як впровадити розширену електронну торгівлю

Інтернет магазин побудований на платформі ShopScript7. Під цю платформу існують готові плагіни для розширеної електронної комерції, але дозволяють охопити лише базові події, без тонких налаштувань. Тому ми відмовилися від їх використання, самостійно розмічаючи всі необхідні події згідно з ТЗ. Для переходу зі звичайної електронної торгівлі на розширену версію необхідно:

Активувати звіти про розширену електронну торгівлю в Google Analytics;
Написати код для кожної можливої події;
Відредагувати та замінити всі дзвінки коду, вказавши новий код.

Ось так, наприклад, може виглядати код для відстеження кліків по товарах:

<script>
dataLayer.push({
 'ecommerce': {
   'currencyCode': 'UAH',
   'click': {
     'actionField': {'list': 'List 1'},
     'products': [{
      'name': 'Product 1',
      'id': 'ID1',
      'price': '23.5',
      'brand': 'Brand 1',
      'category': 'Category 1/Subcategory 11',
      'variant': 'Variant 1',
      'position': 1
     }]
   }
 },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'Product Clicks',
 'gtm-ee-event-non-interaction': 'False',
});
</script>

Які події ми відстежуємо

Написані нами блоки коду, в яких вказані можливі події, розташовані до Google Tag Manager. Згідно з наданим ТЗ нам необхідно відстежувати 7 типів подій. Кожна їх впливає показник відмов.

За бажанням, ви можете ознайомитися безпосередньо з ТЗ від Netpeak:

1. Перегляд товарів у каталозі

Відстежуються перегляди у будь-яких списках на сайті: як на сторінці категорії, так і блоки крос-продажів («Рекомендовані товари», «Акційні пропозиції» тощо). Дані надсилаються тільки за тими товарами, які потрапили у видиму відвідувачем область сторінки та пробули там понад 2 секунди. При переміщенні сторінкою дані постійно надсилаються до Google Analytics. Приклади сценаріїв:

Відвідувач перейшов на сторінку категорії та у видиму область потрапили 2 ряди товарів, у кожному з яких 6 позицій. Надсилаються дані про перегляд цих 6 товарів.
Відвідувач скролює сторінку та зупиняється на шостому ряді товарів. Хоча попередні товари та відображалися якийсь час на екрані, надсилається інформація лише по шостому ряду — ці товари відображаються довше 2 секунд.
Якщо відвідувач повернувся до початку сторінки, дані про перші два ряди відправлятися знову не будуть, оскільки ці товари вже значаться як переглянуті.

Передаються такі дані про товари:

назва;
ціна;
бренд;
категорія (можна вказувати ієрархію категорій, наприклад «Одяг/Чоловічий одяг/Футболки»);
різновид товару (колір, розмір);
список, де було показано товар;
положення товару у цьому списку.

2. Кліки по товарах

Тут відстежуються як покази, а й переходи на конкретну картку товару. В Google Analytics надсилаються дані про товар, що зацікавив відвідувача, і назву списку товарів, в якому він був показаний. Варіанти списків можуть бути різні:

Категорія товарів.
Результати пошуку на сайті.
Блоки крос-продажів.
Список акційних товарів.

Якщо товар не належить до одного зі списків, то відправляється порожній рядок.

3. Перегляди карток товарів

В Google Analytics надсилаються такі ж дані про товар, як і в події «Кліки по товарах», але без розташування товару у списку. Однак крім інформації про основний товар можуть бути передані дані про додаткові товари, наприклад, у блоці «З цим товаром купують».

4. Додавання товару до кошика

Відстежується додавання товару до кошика незалежно від того, де було вчинено дію: на картці товару чи сторінці категорії. Іноді додавання до кошика може бути здійснене в самому кошику, наприклад через блок «Додаткові послуги».

5. Видалення товару з корзини

Відстежується видалення товару із кошика. Перераховуються всі товари, видалені. Якщо кошик повністю очищається — вказуються всі товари, які у ньому.

6. Оформлення замовлення

Відстежується покроковий рух користувача під час оформлення замовлення: від переходу на сторінку кошика до оплати товару та сторінки «Дякую за покупку».

Передається номер кроку у вирві. На кожному з кроків змінної “step” надається відповідне значення.

7. Здійснення покупки

Відстежуються скоєні через сайт транзакції. Дані надсилаються при попаданні користувача на сторінку «Дякую за покупку».

Передаються такі значення:

повна сума транзакції, включаючи податок та вартість доставки;
сума всіх податків для цієї транзакції;
вартість доставки замовлення;
купон або промокод, який був використаний для оформлення замовлення. Може бути вказана як для всього замовлення, так і для окремих товарів.

Підсумок

Після впровадження розширеної електронної комерції вся функціональність була протестована, а замовник підтвердив коректність всіх подій, що відходять.

Завдяки впровадженню такої детальної аналітики власник бізнесу тепер може налаштовувати сайт та рекламні кампанії точніше, ґрунтуючись на поведінці користувачів. Усі необхідні для цього дані виводяться у звітах та зручні для подальшої обробки.

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

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

Что такое расширенная электронная коммерция?

Плагин расширенной электронной торговли для analytics.js позволяет узнать, как пользователи взаимодействуют с товарами в интернет-магазинах. С его помощью можно отслеживать показы и клики, просмотр информации о товаре, добавление в корзину и удаление из нее, процесс оформления покупки, транзакции и возвраты.

Из руководства по Google Analytics

Расширенная электронная коммерция даёт представление о полном цикле продажи товара: от первого просмотра до оформления заказа. Все данные хранятся в одной группе отчётов, что удобно для их последующей обработки.

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

Как внедрить расширенную электронную торговлю

Интернет-магазин построен на платформе ShopScript7. Под эту платформу существуют готовые плагины для расширенной электронной коммерции, но они позволяют охватить только базовые события, без тонких настроек. Поэтому мы отказались от их использования, самостоятельно размечая все необходимые события согласно ТЗ.

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

Активировать отчёты расширенной электронной торговли в Google Analytics;
Написать код для каждого возможного события;
Отредактировать и заменить все вызовы кода, указав новый код.

Вот так, например, может выглядеть код для отслеживания кликов по товарам:

<script>
dataLayer.push({
 'ecommerce': {
   'currencyCode': 'UAH',
   'click': {
     'actionField': {'list': 'List 1'},
     'products': [{
      'name': 'Product 1',
      'id': 'ID1',
      'price': '23.5',
      'brand': 'Brand 1',
      'category': 'Category 1/Subcategory 11',
      'variant': 'Variant 1',
      'position': 1
     }]
   }
 },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'Product Clicks',
 'gtm-ee-event-non-interaction': 'False',
});
</script>

Какие события мы отслеживаем

Написанные нами блоки кода, в которых указаны возможные события, расположены до кода Google Tag Manager. Согласно предоставленного ТЗ нам необходимо отслеживать 7 типов событий. Каждое из них влияет на показатель отказов.

При желании, вы можете ознакомиться непосредственно с ТЗ от Netpeak:

1. Просмотр товаров в каталоге

Отслеживаются просмотры в любых списках на сайте: как на странице категории, так и блоки кросс-продаж («Рекомендуемые товары», «Акционные предложения» и тому подобные).

Данные отправляются только по тем товарам, которые попали в видимую посетителем область страницы и пробыли там более 2 секунд. При перемещении по странице данные постоянно отправляются в Google Analytics.

Примеры сценариев:

Посетитель перешёл на страницу категории и в видимую область попали 2 ряда товаров, в каждом из которых 6 позиций. Отправляются данные о просмотре этих 6 товаров.
Посетитель скроллит страницу и останавливается на шестом ряде товаров. Хотя предыдущие товары и отображались какое-то время на экране, отправляется информация только по шестому ряду — эти товары отображаются дольше 2 секунд.
Если посетитель вернулся к началу страницы, то данные о первых двух рядах отправляться снова не будут, поскольку эти товары уже значатся как просмотренные.

Передаются следующие данные о товаре:

название;
цена;
бренд;
категория (можно указывать иерархию категорий, например «Одежда/Мужская одежда/Футболки»);
разновидность товара (цвет, размер);
список, где был показан товар;
положение товара в этом списке.

2. Клики по товарам

Здесь отслеживаются не только показы, но и переходы на конкретную карточку товара. В Google Analytics отправляются данные о заинтересовавшем посетителя товаре и название списка товаров, в котором он был показан. Варианты списков могут быть самые разные:

Категория товаров.
Результаты поиска по сайту.
Блоки кросс-продаж.
Список акционных товаров.

Если товар не принадлежит какому-то из списков, то отправляется пустая строка.

3. Просмотры карточек товаров

В Google Analytics отправляются такие же данные о товаре, как и в событии «Клики по товарам», но без положения товара в списке. Однако кроме информации об основном товаре могут быть переданы и данные о дополнительных товарах, например, в блоке «С этим товаром покупают».

4. Добавление товара в корзину

Отслеживается добавление товара в корзину независимо от того, где было совершено действие: на карточке товара или странице категории. Иногда добавление в корзину может быть совершено в самой корзине, например, через блок «Дополнительные услуги».

5. Удаление товара из корзины

Отслеживается удаление товара из корзины. Перечисляются все товары, которые были удалены. Если корзина полностью очищается — указываются все товары, находившиеся в ней.

6. Оформление заказа

Отслеживается пошаговое движение пользователя при оформлении заказа: от перехода на страницу корзины до оплаты товара и страницы «Спасибо за покупку».

Передаётся номер шага в воронке. На каждом из шагов переменной «step» присваивается соответствующее значение.

7. Совершение покупки

Отслеживаются совершенные через сайт транзакции. Данные отправляются при попадании пользователя на страницу «Спасибо за покупку».

Передаются следующие значения:

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

Итог

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

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

Загальна інформація

Клієнт

ProfiMake