Разберем подробно настройку электронной торговли Google Analytics
Настройка расширенной электронной торговли может быть выполнена разными способами и проходит в несколько основных этапов, полное выполнение которых обеспечивает корректную настройку сбора данных. Процесс настройки электронной торговли в Google Analytics:
- Изучение сайта
- Активация настроек в Google Analytics
- Подготовка ТЗ на внедрение dataLayer
- Внедрение ТЗ разработчиками
- Проверка внедрения ТЗ
- Настройка в Google Tag Manager
Приготовьтесь к изучению темы настройки электронной торговли, она обширная и ниже вас ждет много полезной информации, советую внимательно изучить каждый раздел, т.к. они все связаны между собой.
- Способы настройки электронной торговли Google Analytics
- Что можно отслеживать в электронной торговле
- Настройка электронной торговли через Google Tag Manager
- Подготовка ТЗ разработчикам для внедрения dataLayer
- Выполнение аудита внедрения ТЗ
- Активация электронной торговли в Google Analytics
- Настройка электронной торговли Google Analytics
- Настройка Google Tag Manager для электронной торговли
- Классическая электронная торговля Google Analytics
- Особенности настройки расширенной электронной торговли Google Analytics
Способы настройки электронной торговли Google Analytics
Способы настройки электронной торговли:
- с помощью кода отслеживания Google Analytics
- через Google Tag Manager
- с помощью готового модуля для популярных CMS систем
Несколько слов про каждый из вариантов настройки электронной торговли Google Analytics. С помощью кода отслеживания Google Analytics. В исходный код страниц сайта внедряется специальный код JavaScript , который передает инструкции и данные в счетчик.
Через Google Tag Manager (с помощью dataLayer). Ниже мы будем разбирать этот способ, как наиболее функциональный, а также по той причине, что на многих сайтах выполнена настройка Google Tag Manager и настройка электронной торговли будет дополнением основной настройки Google Analytics.
С помощью готового модуля для популярных CMS систем. Это относительно самый простой способ, но и наименее контролируемый способ. Заключается он в том, что для используемой на сайте CMS системы подключается готовый модуль, который обеспечивает автоматическое добавление необходимых инструкций в исходный код страниц сайта.
Помимо этого можно передавать данные о расширенной электронной торговле с помощью протокола передачи данных Google Analytics. Но это сложный вариант, его можно использовать если необходимо фиксировать только фактически оплаченные заказы.
Что можно отслеживать в электронной торговле
На скриншоте показаны блоки, которые выполняют определенную функцию и могут быть настроены в электронной торговле:
Если выполнена корректная настройка расширенной электронной торговли Google Analytics можно фиксировать полный цикл взаимодействия с товаром на сайте:
- просмотр блока товар в списке товара
- клик по блоку товара в списке товаров
- просмотр карточки товара
- добавление и удаление в товара в корзину
- процесс оформления покупки
- фиксацию транзакции
- сбор данных о возвратах, после покупки
Помимо этого можно собирать данные по внутренним рекламным активностям:
- просмотр промо-блоков
- клики по промо-блокам
При полной настройке электронной торговли Google Analytics вы можете оценить влияние внутренних промо-блоков на продажи.
Настройка электронной торговли через Google Tag Manager
Процесс настройки электронной торговли через Google Tag Manager также состоит из нескольких этапов (ниже разбирается подробно каждый из них):
- подготовка ТЗ разработчикам для внедрения dataLayer
- выполнение аудита внедрения и работы кода на сайте
- активация электронной торговли в Google Analytics
- настройка электронной торговли
На что стоит обратить внимание. Первое — эти типы хитов, которые передают данные об электронной торговле в Google Analytics это Просмотр страницы или Событие.
Второе — описанные ниже инструкции необходимо выполнять в момент фактического выполнения действия электронной торговли. Например, просмотры списков товаров можно фиксировать вместе с просмотром страниц, а добавления в корзину — событием при клике по кнопке В корзину и т.д.
Третье — не забывайте про лимиты Google Analytics в 500 хитов за сеанс и длину передаваемых данных в 8 кб. Если у вас длинные названия список товаров или названия товаров, обязательно проверьте наличие ошибок в консоли браузера, если они есть — вы можете пропустить часть информации.
Подготовка ТЗ разработчикам для внедрения dataLayer
В уровне данных содержатся инструкции, описывающие события расширенной электронной торговли Google Analytics, ниже мы разберем их подробнее. Что такое техническое задание (ТЗ)?
Это документ, в котором вы описываете где и при каких условиях необходимо разместить и выполнить код. Вы можете пойти по самому простому пути, подготовить ТЗ так как удобно вам, может быть у вас есть правила по которым нужно готовить такие документы. В любом случае — если есть возможность, пообщайтесь голосом с разработчиками, так вы можете решить множество вопросов, не тратя время на пустую переписку.
Я подготовил для вас шаблон ТЗ, которое можно получить по ссылке.
Выполнение аудита внедрения ТЗ
Это один из важных этапов настройки электронной торговли Google Analytics, т.к. от него зависит полнота и достоверность собираемых данных. Рекомендую каждый раз проводить полные проверки внедрения ТЗ, т.к. возможно при доработках перестанет работать что-то из того, что корректно работало на предыдущей итерации внедрения.
Выполнить проверку можно с помощью отладчика Google Analytics и режима отладки Google Tag Manager, но чтобы корректно проверить все нужно знать принцип работы расширенной торговли Google Analytics, который описан ниже.
Активация электронной торговли в Google Analytics
Чтобы данные по электронной торговле поступали в Google Analytics необходимо выполнить ряд настроек:
- включить расширенную электронную торговлю
- настроить воронку в представлении Google Analytics
Для того, чтобы включить электронную торговлю необходимо перейти в настройки представления Google Analytics и активировать два переключателя. Обратите внимание они должны быть оба в положении ВКЛ:
После этого стоит добавить этапы процесса оформления покупки, например, пользователь может просмотреть корзину, перейти к подтверждению состава заказа, ввести адрес и выбрать способ доставки:
Завершается настройка нажатие кнопки Сохранить. Такие действия стоит выполнить в каждом представлении, чтобы данные по электронной торговле были доступны в отчетах Google Analytics.
Валюта, в которой будут отображаться данные настраивается на уровне представления. Обратите внимание, что эта настройка будет актуальна также и для импортируемых расходов на рекламу. По умолчанию данные о доходе обрабатываются и отображаются согласно настроек представления. Если используете различные валюты, то необходимо при фиксации транзакции передавать код валюты, в которой она прошла.
Настройка электронной торговли Google Analytics
Разберемся в параметрах, описывающих основные сущности и данные, передаваемые при каждом событии расширенной электронной торговли Google Analytics:
Просмотры списков товаров
Списки товаров, это блоки в которых показываются карточки товара, нажав на которую можно перейти на подробное описание товара. Примером списка товара может быть: каталог товаров, с этим товаром покупают, лидеры продаж и т.п.
Событие, которое фиксирует просмотр: impressions
Что передается: Передается массив товаров, которые отображаются в списке. Можно передавать сразу все товары, а можно порциями, по мере отображения пользователю. Не забудьте про лимит в 8 кб, на передаваемые данные, если у вас длинные имена товаров, то стоит делить данные на фрагменты.
Как фиксировать (в примере использована часть параметров):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// просмотр списка window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'ecommerce' : { 'impressions' : [ { 'name' : 'НАЗВАНИЕ ТОВАРА', // обязательное 'id' : 'АРТИКУЛ или ИДЕНТИФИКАТОР', // обязательное 'category' : 'Категория товара, до 5 позиций разделенных знаком /', 'list' : 'Название списка', // обязательное 'position' : 1 // Позиция в списке (целое число)), обязательное } ], }, 'event' : 'ecommerceImpressions' }); |
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#product-impressions
Что получаем в результате:
Клики по товарам в списке
Это действие происходит после того, как пользователь увидел товар и решил перейти на его карточку товара.
Событие, которое фиксирует просмотр: click
Что передается: Передается описание товара по которому выполнен клик. Важно передать название списка, из которого выполняется переход, это вложенный параметр list в actionField
Как фиксировать (в примере использована часть параметров):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'ecommerce' : { 'click' : { 'actionField' : { 'list' : 'Название списка в котором отображается товар' }, 'products' : [{ 'name' : 'НАЗВАНИЕ ТОВАРА', // обязательное 'id' : 'АРТИКУЛ или ИДЕНТИФИКАТОР', // обязательное 'category' : 'Категория товара, до 5 позиций разделенных знаком /', 'position' : 1 // Позиция в списке (целое число)), обязательное }] } }, 'event' : 'ecommerceClick' }); |
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks
Что получаем в результате:
Просмотр карточки товара
Это действие, при корректной настройке расширенной электронной торговли Google Analytics, фиксирует сведения о просмотре карточки товара после просмотра списка товаров. На что следует обратить внимание:
- обязательно фиксируем с какого списка товаров перешел пользователь на карточку
- если выполнен прямой переход на карточку, то нужно выполнить эмуляцию просмотра списка товаров и клика по списку товаров
Событие, которое фиксирует просмотр: detail
Что передается: Передается описание товара на карточку которого выполнен переход (карточка отображаемая пользователю). Важно передать название списка, из которого выполняется переход, это вложенный параметр list в actionField
Как фиксировать (в примере использована часть параметров):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'ecommerce' : { 'detail' : { 'actionField' : { 'list' : 'Название списка с которого перешли на карточку' }, 'products' : [ { 'name' : 'НАЗВАНИЕ ТОВАРА', // обязательное 'id' : 'АРТИКУЛ или ИДЕНТИФИКАТОР', // обязательное 'category' : 'Категория товара, до 5 позиций разделенных знаком /', }] } }, 'event' : 'ecommerceDetail' }); |
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#details
Что получаем в результате:
Добавления в корзину
Фиксируем все добавления товара в корзина, а также все увеличения числа единиц товара в корзине (обычно + или стрелка вверх на странице просмотра товаров, добавленных в корзину)
Событие, которое фиксирует просмотр: add
Что передается: Передается описание товара, добавляемого в корзину. Если добавляем сразу более одной единицы, то нужно фиксировать корректно это значение в параметре quantity
Как фиксировать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'ecommerce' : { 'add' : { 'products' : [{ 'name' : 'НАЗВАНИЕ ТОВАРА', // обязательное 'id' : 'АРТИКУЛ или ИДЕНТИФИКАТОР', // обязательное 'price' : 'Стоимость', 'category' : 'Категория товара, до 5 позиций разделенных знаком /', 'quantity' : 1 // количество }] } }, 'event' : 'ecommerceAdd' }); |
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#add
Что получаем в результате:
Удаления из корзины
Фиксируем удаление из корзины полностью товара либо уменьшения единиц товара в корзине
Событие, которое фиксирует просмотр: remove
Что передается: Передается описание товара, удаляемого из корзины. Если удаляем товар полностью из корзины, нужно фиксировать корректно это значение в параметре quantity (может быть добавили 5 единиц в корзину, значит quantity должно быть равно 5)
Как фиксировать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'ecommerce' : { 'remove' : { 'products' : [{ 'name' : 'НАЗВАНИЕ ТОВАРА', // обязательное 'id' : 'АРТИКУЛ или ИДЕНТИФИКАТОР', // обязательное 'price' : 'Стоимость', 'category' : 'Категория товара, до 5 позиций разделенных знаком /', 'quantity' : 1 // количество }] } }, 'event' : 'ecommerceRemove' }); |
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#remove
Что получаем в результате:
Процесс оформления покупки
Настройка фиксации этапов покупки в Google Analytics необходима для последующей визуализации в виде воронки движения пользователя. Выше мы выполнили ее настройку на уровне представления, теперь опишем ее кодом.
Событие, которое фиксирует просмотр: checkout
Что передается: Передается описание товаров, которые есть в корзине на данный этап чекаута в массиве products , в параметре actionField описываются дополнительные опции оформления покупки, основной из них это step , номер покупки (должен сопоставляться с настроенным в представлении). Значения step начинаются с 1 и до завершения покупки. Страницу “спасибо” отслеживать не нужно этим кодом, для этого используется код фиксации транзакции.
Как фиксировать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'ecommerce' : { 'checkout' : { 'actionField' : { 'step' : 1 // НОМЕР ШАГА }, 'products' : [{ 'name' : 'НАЗВАНИЕ ТОВАРА', // обязательное 'id' : 'АРТИКУЛ или ИДЕНТИФИКАТОР', // обязательное 'price' : 'Стоимость', 'category' : 'Категория товара, до 5 позиций разделенных знаком /', 'quantity' : 1 // количество }] } }, 'event' : 'ecommerceCheckout' }); |
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#checkoutstep
Что получаем в результате:
Фиксация транзакции
Разберем способ настройки через код на сайте (еще можно фиксировать протоколом передачи данных Google Analytics).
Событие, которое фиксирует просмотр: purchase
Что передается: два массива данных: actionField и products. Первый описывает транзакцию, второй приобретенные товары.
Как фиксировать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
window.dataLayer = window.dataLayer || []; dataLayer.push({ 'ecommerce' : { 'purchase' : { 'actionField' : { 'id' : 'T12345', // Идентификатор транзакции обязательное 'revenue' : '35.43', // сумма заказа 'tax' : '4.90', // налог 'shipping' : '5.99', //доставка 'affiliation' : 'Online Store', // название магазина }, 'products' : [{ 'name' : 'НАЗВАНИЕ ТОВАРА', // обязательное 'id' : 'АРТИКУЛ или ИДЕНТИФИКАТОР', // обязательное 'price' : 'Стоимость', 'brand' : 'Бренд товара', 'category' : 'Категория товара, до 5 позиций разделенных знаком /', 'quantity' : 1 // количество обязательное }] } }, 'event' : 'ecommercePurchase' }); |
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#purchases
Что получаем в результате:
Возвраты
Фиксируем возвраты после приобретения товаров. Подробно разбирать не будем, при необходимости рекомендую настроить сбор данных с помощью протокола, а лучше настроить сквозную аналитику, которая точно ответит на вопросы, то было приобретено, а что возвращено.
Событие, которое фиксирует просмотр: refund
Что передается: можно передать данные по транзакции и/или по возвращаемым товарам.
Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#refunds
Настройка Google Tag Manager для электронной торговли
Я приведу пример своей настройки, которую использую после того как разработчики внедрят, а я проверю внедрение подготовленного мной ТЗ (ссылка выше). Для каждого события электронной торговли Google Analytics я передаю информацию в dataLayer с описание сущности. Но можно использовать и другой вариант, чтобы сэкономить количество хитов за сеанс.
Как я писал выше фиксировать данные можно двумя типа хитов: просмотр страницы и событие. Просмотры товаров в списке, просмотры промоблоков,, просмотры карточки товара, процесс оформления покупки и транзакцию можно передавать до инициализации кода контейнера Google Tag Manager и собирать эти данные вместе с тегом просмотр страницы в Google Analytics. Клики по товарам в списке, добавления и удаления из корзины, клики по промоблокам лучше фиксировать по факту из выполнениями событиями.
Настройку электронной торговли Google Analytics в Google Tag Manager начнем с того, что определим перечень событий, которые мы передаем в уровень данных согласно ТЗ (у вас может отличаться, я привожу пример согласно своего ТЗ):
- ecommercePromoView‘
- ecommercePromoClick
- ecommerceImpressions
- ecommerceClick
- ecommerceDetail
- ecommerceAdd
- ecommerceRemove
- ecommerceCheckout
- ecommercePurchase
Поскольку у меня это все специальные события, которые при правильной настройке будут фиксироваться в Google Tag Manager, то я могу создать триггер на их основе. Я создаю один, т.к. это упрощает управления тегами, триггерами и переменными, а также служит одним из способов сокращения объема контейнера, не забывайте оптимизировать Google Tag Manager.
Пример настройки триггера на все события (они все начинаются с ecommerce, значит можно использовать регулярное выражение):
ecommerce(PromoView|PromoClick|Impressions|Click|Detail|Add|Remove|Checkout)
Следующим шагом нужно настроить передачу данных электронной торговли в Google Analytics. Создаем тег со следующими настройками:
Категория событий указана как EE , это означает Расширенная электронная торговля Google Analytics или Enhanced Ecommerce Google Analytics. Действие по событию — переменная Event, она будет принимать одно из значений равное переданному событию. Вот так выглядит отчет по событиям электронной торговли в Google Analytics (в разделе событий):
Следующая опция Настройка Google Analytics, тут у меня выбрана переменная конфигурации Google Analytics: CONF — GA
Следующий блок очень важен, т.к. благодаря ему в Google Analytics передаются данные расширенной электронной торговли. Эту настройку можно выполнить, как у меня, в теге, а можно переменной конфигурации Google Analytics. Зависит от вашего способа настройки.
После этого у созданного тега указываете выше созданный триггер активации, публикуете изменения или переходите в режим отладки Google Tag Manager.
Далее разберем еще два важных вопроса, это настройка классической электронной торговли Google Analytics (сейчас используется редко) и особенности настройки расширенной электронной торговли.
Классическая электронная торговля Google Analytics
Советую начать с проверки настроек представлений, с которыми вы будете работать для анализа собранной информации. Перейдите в Google Analytics в режим администратора и выберите нужное представление из списка, после чего выберите пункт меню Настройки электронной торговли, затем активируйте только один! переключатель Включите отслеживание электронной торговли:
Почему мы активируем только один переключатель? Поскольку настройка электронной торговли Google Analytics осуществляем для классического кода, то этого достаточно. Если выполняется настройка расширенной электронной торговли Google Analytics, то необходимо включать оба переключателя. На этом предварительная настройка в Google Analytics завершена. Приступим к реализации передачи данных о транзакциях, возможны два варианта: через код отслеживания и через Google Tag Manager.
Настройка через Google Tag Manager
Для того, чтобы в Google Tag Manager попали сведения о выполненной покупке необходимо использовать уровень данных или dataLayer и определенную структуру для передачи сведений. Код, описанный ниже необходимо выполнять в тот момент, когда пользователь или уже совершил заказ или находится максимально близко к этому этапу. Как правило это страница «Спасибо!», но может быть и заключительный этап в процессе оформления покупки, и клик по кнопке перехода в платежную систему.
Предположим, что у нас все пользователи совершившие покупку попадают на страницу «Спасибо!», она имеет URL thanks.html. Для фиксации электронной торговли Google Analytics на ней необходимо разместить следующий код JavaScript передающий данные о покупке в Googlе Tag Manager :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> dataLayer = [{ 'transactionId': '1234', 'transactionAffiliation': 'Acme Clothing', 'transactionTotal': '11.99', 'transactionTax': '1.29', 'transactionShipping': '5', 'transactionProducts': [{ 'sku': 'DD44', 'name': 'T-Shirt', 'category': 'Apparel', 'price': '11.99', 'quantity': '1' }] }]; </script> |
Важно! Этот код должен быть размещен до загрузки контейнера Google Tag Manager:
1 2 3 4 5 6 7 |
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-TRLVDD');</script> <!-- End Google Tag Manager --> |
Разберем параметры электронной торговли передаваемые в Google Tag Manager. Чем больше параметров используется для передачи данных тем больше информации вы получите для работы в Google Analytics:
- transactionId — идентификатор транзакции *;
- transactionAffiliation — название магазина где была осуществлена продажа;
- transactionTotal — общая сумма транзакции *;
- transactionTax — сумма налога;
- transactionShipping — стоимость доставки;
- transactionProducts — описывает товары в транзакции
- sku — артикул товара *;
- name — название товара *;
- category — категория, тип или вид товара;
- price — стоимость *;
- quantity — количество *.
* отмечены обязательные позиции.
Часто возникает вопрос откуда взять данные о стоимости, артикуле, названии товара, идентификаторе транзакции и другим полям? Для ответа на этот вопрос пообщайтесь с разработчиками вашего сайта, расскажите им что и где необходимо разместить на сайте. Как правило они попросят вас подготовить для них Техническое задание. Это такой документ, в котором описывают что и где необходимо разместить или какой код, при каких обстоятельствах нужно выполнить. Не стесняйтесь общаться с разработчиками, иногда лучше провести одну встречу, чем переписываться несколько дней.
После того, как будет настроена передача данных с помощью dataLayer, необходимо настроить тег, который будет передавать данные о транзакции в Google Analytics.
Создайте новый тег типа Universal Analytics, укажите для него тип отслеживания транзакция:
После этого необходимо указать триггер активации тега. Он должен срабатывать, когда пользователь попадает на страницу завершения процесса покупки. Для идентификации страницы (для нашего примера) создадим триггер:
После этого сохраните тег, создайте версию и опубликуйте ее. Для фиксации тестовых данных лучше всего использовать отдельный счетчик, а также предупредить разработчиков, чтобы в рабочий счетчик они не отправляли ничего кроме реальных данных.
Настройка через код отслеживания
В этом материале не будем разбирать этот вариант, т.к. он используется в настоящее время крайне редко, при необходимости всю информацию можно найти в официальной справке.
Особенности настройки расширенной электронной торговли Google Analytics
Поделюсь своим личным опытом работы с модулем расширенной электронной торговли:
- Внимательно прорабатывайте функционал сайта, чтобы не упустить все моменты в процессе взаимодействия с товарами
- Отдельный просмотр попап окна с информацией о товаре — фиксируйте как просмотр карточки товара
- В ТЗ указывайте все особенности, которые выявили при изучении сайта
- Проведите встречи с разработчиками, чтобы обсудить ТЗ и аудиты, это сэкономит время и ускорит процесс внедрения
- Внедрение может занимать от нескольких дней до месяцев. Завит от команды разработчиков, сложности сайта и внутренних процессов на проекте
- Заказчик настройки должен знать, что полная стоимость складывается из работ специалиста, который подготовит ТЗ, выполнить аудиты внедрения, настроит Google Analytics и Google Tag Manager, а также из стоимости работ разработчиков
- Закладывайте в стоимость работ 2-3 аудита, все что более проводите за отдельную плату. Внедрение и доработки со стороны разработчиков могут быть бесконечно долгими
- При отладке проверяйте каждый параметр и его значение, чтобы свести к минимум ошибки внедрения
- Старайтесь избавиться от (not set) списка в перечне списков товаров