Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Приступаем к установке

Если вы еще не сталкивались с Google Tag Manager, обязательно прочитайте инструкцию в нашем блоге. Говоря вкратце, с помощью этого сервиса вы можете оперировать различными кодами внутри сайта, установив всего 1.

Основным положительным моментом в использовании менеджера тегов Google является автономность маркетолога от разработчиков. Вам не нужно будет просить устанавливать на сайт дополнительные коды новой аналитики, если контейнер GTM уже находится там. Вы можете оставить код счетчика Universal Analytics, а новую Google Analytics 4 использовать параллельно, чтобы не терять данные.

Первым делом вам нужно будет создать ресурс GA4 через меню «Администратор» аккаунта analytics.google.com:

Создаем ресурс Google Analytics 4 в аккаунте

Обратите внимание, что в меню «Ресурс» есть ассистент настройки новой «Аналитики». Он появляется при уже созданном контейнере GA4 для быстрой его настройки, и нас пока интересовать не будет.

Сегодня каждый новый ресурс Google Analytics по умолчанию будет создаваться как ресурс 4 версии. Если вас интересует Universal Analytics, придется выставить соответствующий ползунок в блоке «Дополнительные параметры»:

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

Мы же создадим ресурс новой версии. Для этого заполните поле «Название», выберите часовой пояс и валюту для отчетов, после чего нажмите «Далее».

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

Заполните опросник от Google

После этого жмём на «Создать». Ресурс появляется в аккаунте, а нам первым делом предстоит выбрать тип потока данных для него. Потоком называется источник данных для ресурса GA4, являющийся, по сути, сайтом или мобильным приложением.

Выбираем тип потока данных для нового ресурса Google Analytics 4

Наиболее распространенный вариант – сайт. Остановимся на нём и выберем «Веб». Станет доступна настройка потока данных.

Настраиваем поток данных типа «Веб»

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

Нажимаем на «Создать поток», и он будет добавлен в систему.

Просматриваем сведения о веб-потоке данных Google Analytics 4

На странице настройки потока данных вы можете увидеть оба стандартных способа установки счетчика GA4 на сайт: через глобальный тег gtag.js (напрямую в код) или с помощью Google Tag Manager. Именно этим способом мы и воспользуемся далее.

Также вы можете:

  • внести или отредактировать подключенные теги сайтов (с помощью специальных тегов можно дополнять поток данных информацией с других ресурсов – дочерних, параллельных, приложений и т.п.);
  • создать секретный ключ для Google Measurement Protocol (настройка понадобится в будущем для подключения протокола отправки событий из бэк–офиса);
  • задать другие настройки добавления тегов. Здесь можно будет настроить междоменное отслеживание, редактировать настройки входящих событий и помечать трафик как внутренний:

Дополнительные настройки добавления тегов Google Analytics 4

Итак, для запуска счетчика Google Analytics 4 будет достаточно разместить на сайт код глобального тега gtag.js, но мы воспользуемся более современным и гибким средством – внедрением кода через Google Tag Manager.

Внедрение счетчика Google Аналитики 4 через диспетчер тегов

Естественно, что для работы Google Tag Manager необходимо заранее установить на сайт его контейнер.

Для передачи на сайт счетчика Google Analytics 4 потребуется специальный тег, запускаемый с использованием стандартного триггера GTM – All Pages (просмотр любой страницы сайта).

Рабочая область Google Tag Manager – Меню «Теги» — Создаем новый

Как можно увидеть на скриншоте, для GA4 существуют свои типы тегов, внедренные в диспетчер одновременно с запуском самой аналитической платформы. Создаем новый тег с помощью кнопки «Создать».

Появится окно «Тег без имени», где необходимо выбрать тип тега.

Выбираем тип тега Google Tag Manager при создании

Для начала потребуется тег конфигурации GA4, соответственно, выбираем этот тип.

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

Выбран тип тега – «конфигурация GA4»

Также в окне необходимо задать название тега (слева вверху) и триггер для срабатывания.

Есть интересные дополнительные возможности, но они на данном этапе нам не понадобятся. Например, можно сразу же передавать свойства пользователей и дополнительные параметры для отслеживания.

Заполненное окно конфигурации тега передачи данных Google Analytics 4

Когда всё будет заполнено верно, жмем «Сохранить». Теперь тег конфигурации GA4 добавлен в рабочую область диспетчера, и можно выгрузить его на сайт.

Находим созданный тег конфигурации в меню «Теги»

Чтобы изменения вступили в силу, необходимо отправить изменения из рабочей области на сайт. Делается это по кнопке «Отправить» в правом верхнем углу рабочего окна. Выгружайте изменения и вскоре данные начнут поступать в поток.

Рабочее окно «Главная» (сводка) при настроенном потоке данных для Google Analytics 4

Если вы всё настраиваете верно, то в процессе установки нового тега не возникнет сложностей. Дальше необходимо будет передавать события с сайта, и здесь, по сравнению с Universal Analytics, имеются свои особенности.

Настройка событий в Google Analytics 4

Google Analytics 4 автоматически «ловит» некоторую часть событий на сайте, но, если вы задавали для UA-контейнера цели и специальные события, простая регистрация по названию работать не будет. С помощью Google Tag Manager придется настроить отдельную отправку событий в поток данных.

Триггеры при этом будут использоваться те же, что и для прежней версии «Аналитики» (если они уже были заданы в GTM), а вот теги событий придется задать заново. Кроме того, стоит прописать нужные события в настройках потока данных:

Создадим события в настройках добавления тегов

Указанные настройки нам уже знакомы: их можно было увидеть при создании потока данных Google Analytics 4. Выбираем «Создание событий» и «Создать»

Создание нового пользовательского события GA4

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

В данном случае мы задали событие «Успешное прохождение 1 шага воронки» с event_name = shag1_success. Оператор «содержит» обозначает, что будут отслеживаться все события, в имя которых входит «shag1_success». Вы можете задавать события по выражению «больше», «меньше», «точно соответствует» и т.п., чтобы сделать процесс аналитики более гибким. Также можно добавить несколько условий попадания в события.

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

Возвращаемся в Google Tag Manager. Здесь нам нужно создать теги – события для новой Analytics 4.

Создаем событие GA4 в Google Tag Manager

Выбираем соответствующий тип тега (см. скриншот). При этом также вводим название тега (оно требуется только для идентификации в рабочей области) и выбираем соответствующий триггер. В данном случае триггер – это пользовательское событие, заданное для Google Tag Manager.

Не запутайтесь в одинаковых названиях. События для диспетчера тегов Google задаются отдельно на сайте, события для Google Analytics 4 пересылаются с помощью GTM. Понятие тега также используется в разном значении.

Мы выбрали триггер «пользовательское событие» как наиболее удобный и точный способ передать данные в менеджер тегов. Можно задать резонный вопрос: если события нужно прописывать на сайте, какой смысл передавать их через Google Tag Manager, а не напрямую в GA4? Ответ прост: диспетчер служит агрегатором для событий, которые будут передаваться не только в новую «Аналитику», но и в Universal Analytics, «Яндекс.Метрику» и другие системы, что потребует наличие сразу нескольких конструкций для передачи на сайте. У нас же используется всего 1.

Тем не менее, вы можете создавать событие на основе внутренних инструментов GTM, таких как видимость элементов, кликов, отправок форм и т.п.

Тег почти создан, осталось выбрать конфигурацию

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

Изначально отслеживаемые события попадают в отчет «Все события» аккаунта аналитики:

Наблюдаем срабатывание события в отчетах Google Analytics 4.

Здесь можно увидеть название события, число его срабатываний и число пользователей, для которых это событие сработало хотя бы раз за сеанс. Также отчет позволяет регистрировать изменения в показателях в сравнении с предыдущим периодом (стрелка и процент).

Справа вы можете видеть ползунки «Отметить как конверсию», позволяющие перевести событие в разряд целевых. После этого вы можете наблюдать его в отчете «Конверсии». Здесь имеется ощутимое преимущество: вам не придется создавать представления, а число наблюдаемых конверсий более не ограничивается 20.

Отчет «Конверсии» содержит только заданные вами целевые события

Обратите внимание на кнопки «Создать событие». С их помощью можно задавать новые события без использования меню «Администратор».

В этом отчете также хранятся данные о событиях электронной торговли (см. параметр «Ценность»), о настройке которой мы и поговорим далее.

Настройка электронной торговли для Google Analytics 4

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

Существует 2 основных способа передачи данных электронной торговли. Первый и наиболее простой – отправка событий из «фронтовой» части ресурса, т.е. напрямую с сайта или приложения после совершения покупки.

Для покупки билета в кино достаточно отправить данные электронной торговли из фронт-офиса

Хороший пример – покупка билетов в кино онлайн. Здесь вы сразу платите нужную сумму, поэтому данные о заказе могут поступать с «фронта» в модуль электронной торговли Google Analytics. Что интересно владельцу сайта кроме уплаченной вами суммы:

  • дата и время сеанса;
  • название фильма;
  • зал;
  • место(а);
  • доход с каждой покупки.

Всё это можно передать напрямую, используя конструкции «Аналитики». Они стандартизированы под обычную покупку, поэтому для каждого типа бизнеса придется продумать алгоритм заполнения кодов нужными данными.

В Google Analytics 4 электронная торговля передается с помощью основных событий:

Событие электронной торговли

Назначение

view_item_list

Показ пользователю списка товаров

view_item

Просмотр определенного товара (карточки)

select_item

Пользователь взаимодействует с определенным товаром (выбирает его из списка)

add_to_cart

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

remove_from_cart

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

begin_checkout

Началось оформление покупки из корзины

add_payment_info

Указание платежных данных пользователя

add_shipping_info

Выбор варианта доставки и указание адреса

purchase

Собственно, покупка

refund

Возврат средств или запрос возврата денег за осуществленную покупку

Чтобы наиболее полно отслеживать заказ, можно использовать все события для воронки электронной торговли. Самым простым вариантом обычно является использование add_to_cart/remove_from_cart и purchase/refund.

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

Параметр события

Значение

currency

Трехбуквенный код валют по стандарту ISO 4217

price

Стоимость товара/заказа в указанной валюте

tax

Сумма налога, уплачиваемого за товар

item_id

Уникальный идентификатор товара

item_name

Название товара

coupon

Наименование акции/скидки/предложения

discount

Значение полученной скидки в выбранной валюте

index

Номер товара в списке

item_list_name

Название списка товаров

item_list_id

Уникальный идентификатор списка товаров

affiliation

Принадлежность магазину/отделу/подразделению

item_brand

Бренд товара

item_category

Категория товаров, товарный раздел

item_variant

Разновидность, вид товара

quantity

Количество товаров

items

Массив группы товаров, содержащихся в заказе

value

Общая ценность события

shipping

Стоимость доставки

transaction_id

Уникальный идентификатор транзакции (для всего события электронной торговли)

Это далеко не полный список стандартных параметров для событий электронной торговли. Полный набор можно увидеть в справке от Google.

Комбинируя эти параметры в события, вы передаете в аккаунт Google Analytics 4 сведения о совершенных транзакциях. При этом услуги тоже можно заводить как товары. Например, если вы хотите отправить данные о заказе двух билетов в кино на одни и те же фильм и сеанс, то необходимо будет отправить с сайта событие следующим образом:


gtag('event', 'add_to_cart', {
currency: 'RUB',
items: [{
item_id: 'БИЛ1102765873',
item_name: 'Малхолланд Драйв 03.02.20201 21:35',
affiliation: 'Зал 3',
item_brand: 'стандарт',
item_category: '4 ряд',
item_variant: '7 место',
price: 250,
currency: 'RUB',
quantity: 1
},{
item_id: 'БИЛ1102765874',
item_name: 'Малхолланд Драйв 03.02.20201 21:35',
affiliation: 'Зал 3',
item_brand: 'стандарт',
item_category: '4 ряд',
item_variant: '7 место',
price: 250,
currency: 'RUB',
quantity: 1
}],
transaction_ID: 'Y63348'
value: 550
});

За отправку отвечает глобальный тег gtag, осуществляющий передачу данных в «Аналитику» с помощью JavaScript или API. Запускать события нужно после того, как был объявлен этот тег, т.е. после кода потока данных Google Analytics 4. Все события электронной торговли подробно представлены в инструкции.

Если вы уже используете настройки электронной торговли для Universal Analytics, то просто перенаправить набор существующих событий в GA4 не получится: названия параметров и процедуры их передачи были несколько изменены.

Мы рекомендуем использовать для «фронтовой» передачи событий Google Tag Manager. С его помощью можно легко менять процедуры или запускать события параллельно в обе версии аналитической системы.

Чтобы настроить передачу, будем создавать пользовательские переменные с содержанием, равным параметрам элементов электронной торговли:

Создаем переменную для передачи ID транзакции

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

Имя переменной мы задали как transact_ID, чтобы не путаться в одинаковых названиях. Также задали значение по умолчанию. Если транзакция будет произведена без передачи идентификатора, то в отчет попадет «TEST_12345».

Читать также:  Примеры цифровизации промышленности

То же самое сделаем для других параметров: названия и стоимости товаров, количества, валюты и т.п. На сайте при этом нужно будет настроить передачу данных в Google Tag Manager во время возникновения события торговли.

Покупатель добавляет в корзину билеты, при этом в GTM отправляется содержание переменных, а затем – событие «Товар добавлен в корзину»:


dataLayer.push({
'transact_ID': ' Y63348',
'bil_id': 'БИЛ1102765873',
'bil_name': 'Малхолланд Драйв 03.02.20201 21:35',
'zal': 'Зал 3',
'bil_category': 'стандарт',
'ryad': '4 ряд',
'mesto': '7 место',
'bil_price': 250,
'bil_q': 1
});
dataLayer.push({'event': 'bil_added'});
});

Так мы отправили переменные GTM для первого билета. Если билетов несколько, то программист добавляет цикл, в течение которого переменные несколько раз заполняются данными.

Теперь мы можем воспользоваться указанной выше конструкцией для события электронной торговли add_to_cart, чтобы запустить его на уровне Google Tag Manager:

Тег GTM для передачи события электронной торговли add_to_cart

Создаем тег с типом «Пользовательский HTML». Он позволяет выполнять нужный код при взведении соответствующего триггера. Как видно из содержания, он передает событие «Товар добавлен в корзину», а его параметры автоматически подставляются из переменных диспетчера тегов с помощью их объявления двойными фигурными скобками.

Поскольку вместе с переменными мы отправили событие Google Tag Manager «Билет добавлен в корзину», его можно использовать в качестве триггера.

Создадим триггер на пользовательское событие GTM:

Задаем триггер для срабатывания тега «Билет добавлен в корзину»

Для создания триггера используем заданное нами имя события bil_added. При возникновении такого события триггер запустит тег события электронной торговли.

Если билетов в заказе несколько, придется задать цикл обработки, который будет добавлять в транзакцию билеты. Здесь потребуются соответствующие навыки программирования или помощь разработчика. В целом, вы можете запустить событие add_to_cart несколько раз. При одинаковом значении transaction_id транзакция будет заполняться данными по билетам, а затем они поступят в Google Analytics 4 скопом.

После добавления в корзину будет еще этап непосредственного совершения покупки с оплатой, для него применим событие электронной торговли purchase.

В итоге данные уже должны поступать в Google Analytics 4. В Universal Analytics для этого приходится включать электронную торговлю в настройках представления.

Отчет по совершенным покупкам в Google Аналитике 4 для сайта бронирования VIP-залов в аэропортах

На примере виден отчет с уже заполненными данными по добавлению в корзину и покупкам с сайта. Находится он в блоке «Монетизация». События электронной торговли в GA4 также видны в блоке «Конверсии» и «События».

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

Отчет по транзакциям, расширенный за счет категории устройств пользователей

Видим, что заказы осуществлялись в основном пользователями с ПК. Также по каждому заказу (и по временному периоду) можно увидеть входящий доход. Его мы задавали с помощью цены купленного товара и стоимости транзакции.

Если покупки на сайте осуществляются без использования сложных систем подсчета, вы можете обойтись без Google Tag Manager и отправлять события электронной торговли напрямую. Для этого нужно будет попросить разработчика назначить коды событий в «тело» сайта или приложения, автоматически подставляя в них параметры товаров и транзакций.

Tсли сайт крупный и имеет разветвленную структуру покупки, использует внутренние системы подсчета доходов, передачи транзакций и работы со сторонними инструментами оплаты или CRM, простой отправкой событий «с фронта» не обойтись. Разберемся, как действовать в этом случае.

Еще не используете такой инструмент? Поможем это исправить – внедрим CRM-систему, автоматизируем работу отдела продаж и покажем, как наладить контроль всех внутренних процессов в компании.

Передача событий электронной торговли из бэк-офиса

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

Придется использовать значения напрямую из базы данных.

Пример структуры базы данных MySQL

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

Протокол передачи данных из «бэка» называется Measurement Protocol, и делает он практически то же, что и события электронной торговли, но с дополнительной возможностью. Вы можете передавать данные с любого этапа процесса обработки заказа, а не только с сайта. Если до этого мы могли работать только с frontend-разработчиком, то теперь нам понадобится специалист по backend.

Один из примеров процесса покупки, для которого необходим Google Measurement Protocol

Один из возможных способов – передача данных из БД в Google Analytics с помощью специальных запросов, отправляемых на заданный URL.

Обратите внимание, что URL для Google Measurement Protocol с переходом на Google Analytics 4 изменился: для UA–ресурсов это был www.google-analytics.com/collect, для GA4 – www.google-analytics.com/mp/collect.

Запросы формируются так:


const measurementId = `G-XXXXXXXXXX`;
const apiSecret = `<secret_value>`;
fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurementId}&api_secret=${apiSecret}`, {
method: "POST",
body: JSON.stringify({
"client_id": "client_id",
"events": [{
"name": "add_to_cart",
"params": {
"currency": 'RUB',
"items": [{
"item_id": "БИЛ1102765873",
"item_name": "Малхолланд Драйв 03.02.20201 21:35",
"affiliation": "Зал 3",
"item_brand": "стандарт",
"item_category": "4 ряд",
"item_variant": "7 место",
"price": 220,
"currency": "RUB",
"quantity": 1
}],
"value": 220
}
}]
})
});

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

measurementId – это идентификатор потока данных, в который вы передаете запрос. Его можно найти в меню «Администратор» Google Analytics 4:

Идентификатор потока данных по сути является measurementId в данном случае

В Universal Analytics аналогом этого ID являлся идентификатор ресурса, начинавшийся с UA.

apiSecret – специальный ключ доступа, который будет означать связь конкретного запроса с конкретным ресурсом. Чтобы создать этот ключ, воспользуйтесь разделом «Дополнительные настройки» в сведениях о веб-потоке (см. скриншот выше):

Создаем секретный API-ключ доступа для Google Measurement Protocol в GA4

После создания ключа передайте его псевдоним и значение программисту.

В примере выше запрос отправит данные о добавленном в корзину билете с использованием Google Measurement Protocol. Можно задаться резонным вопросом: как система поймет, какой именно пользователь совершил заказ, если пример отправляет только данные о заказе из CRM, в которую пользователь даже не заходил? Мы получили «разрыв» между работой клиента на сайте и данными в базе.

Этот вопрос решается с помощью передачи значения client_id. О нем мы уже говорили. Этот идентификатор содержит уникальную «обезличенную» информацию о клиенте, по которой Google Analytics 4 как раз и сравнивает пользователей.

Отчет «Совершенные покупки» в Google Analytics 4, построенный по бренду товара со значением дохода, взятым из CRM

После совершения заказа client_id должен передаваться на уровень базы данных, откуда «бэк» возьмет его для включения в запрос Google Measurement Protocol. В примере кода выше идентификатор также указывается, можно рассмотреть способ его применения. В итоге, после передачи заказа в Google Analytics 4 из CRM (или с любого другого этапа) вы получите связь между действиями пользователя до заказа и покупкой. Это помогает проследить, например, с какого канала пришел покупатель.

Отчет по каналам трафика с конверсиями purchase и итоговым доходом

В проекте, аккаунт GA4 которого показан на экранах выше, реализован следующий алгоритм действий по регистрации электронных покупок.

  1. Пользователь переходит на страницу заказа.
  2. Пользователь выбирает способ оплаты.
  3. При отправке заказа срабатывает событие add_to_cart, передающее его содержание в Google Analytics 4.
  4. Оплата онлайн позволяет сразу увидеть и просчитать полученную сумму, которая отправляется в CRM.
  5. Оплата по счету создает счет, после погашения которого (может пройти несколько дней) данные поступают в CRM.
  6. Оплата наличными курьеру или в офисе заставляет ждать отправки данных от курьера или офиса по поводу поступления средств.
  7. Заказы уходят в CRM, где ждут результата по оплате.
  8. Разными алгоритмами считается доход площадки, который со временем заносится в базу данных.
  9. Раз в сутки выполняется скрипт, который собирает все заказы из CRM и отправляет данные по ним (purchase) в Google Analytics 4 с помощью Measurement Protocol.
  10. Если оплата по заказу еще не поступила, в систему отправляются символические 10 рублей дохода. Если поступила, то конечный доход.
  11. В итоге, если оплата прошла, данные по транзакции в системе обновляются, и доход в 10 р. меняется на конечный.
  12. Также может сработать событие отмены заказа, если покупатель не оплатил вовремя или запросил возврат. Здесь используется событие refund.

Такие и другие сложные алгоритмы можно реализовать с помощью Measurement Protocol. Чтобы увидеть весь набор его возможностей, изучите подробную инструкцию от Google.

Настройка счетчика

Сначала необходимо авторизоваться в вашем аккаунте и выбрать нужное представление.

Далее переходим на вкладку «Настройка электронной торговли».

У пункта 1 меняем статус на «вкл», добавляем «Включение отчетов по сопутствующим товарам» при необходимости.

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

  • просмотр товаров;
  • наполнение или удаление корзины с учетом цены торгового предложения.

Также вы сможете получить данные по отдельным категориям, товарам и эффективности рекламы.

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

После выбора вида e-commerce кликаем на «Отправить».

Следующий шаг — обновление кода счетчика на всех страницах сайта: необходимо подключить плагин ec.js c помощью команды ga(’require’, ’ec’); до отправки данных об электронной коммерции.

Важно: плагин расширенной электронной торговли не следует использовать вместе с плагином обычного e-commerce.

Типы данных и отслеживаемых действий

Расширенная электронная коммерция предоставляет данные о показах, товарах, рекламных акциях и действиях.

Пример отслеживания показов:

Пример отслеживания добавления товара в корзину:

Пример отслеживания покупок:

Ждите новые заметки в блоге или ищите на нашем сайте.

План настройки E-commerce для интернет-магазина

Для работы потребуется внедренный на сайт контейнер GTM и Google Analytics с включенной электронной торговлей.

Сформулируем задачу. E-commerce подразумевает отправку данных с сайта о том, какие товары покупает пользователь, когда он заканчивает оформление заказа. Следовательно, требуется отправить данные о товарах в Google Analytics сразу после того, как пользователь заполняет форму заказа и нажимает кнопку.

Составляем пункты плана:

  • Оформить событие отправки формы заказа пользователем при условии её заполнения
  • Подготовить данные о товарах для отправки в Google Analytics сразу после события отправки формы
  • Отправить собранные данные e-commerce в Google Analytics

Создаем событие отправки формы заказа корзины с условием заполнения

Главное отличие события отправки формы заказа от обычного события на какой-то элемент, это наличие условия, что обязательные поля формы должны быть заполнены. Так как если создать событие только на клик по кнопке отправки формы заказа, то событие будет выполняться даже если форма не отправилась из-за какого-то незаполненного поля (не ввел имя, забыл вписать телефон и т.п.).

В текущем примере, есть следующая форма заказа из корзины:

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

Для этой цели есть проверенный способ средствами GTM и небольшого программирования.

Для начала создадим Пользовательскую переменную — Собственный код JavaScript

Далее, введем следующий код JavaScript:

О том, что такое функции, переменные и условия, я объяснял в статье “Контекстный кодинг”. Если желаете разобраться в деталях, то рекомендую ознакомится.

В этой функции, есть две переменных — (name) имя и (phone) телефон, в которых в будущем будут значения полей формы. И условие if, которое гласит: Если имя и почта не содержат пустоту, то говорим (true) правда. В другом случае код скажет — (false) ложь.

Это и есть заготовка условия проверки. Теперь осталось в переменные name и email записывать данные из формы.

Сделать это достаточно просто. Нужно для начала найти элемент поля ввода на сайте и скопировать его Selector (селектор).

Пример в браузере Google Chrome:

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

Далее, для теста найдем элемент в консоли браузера и попытаемся получить его value, предварительно заполнив поле ввода каким-то значением.

Для поиска элемента есть стандартная команда:

document.querySelector(‘[селектор]’);

Выглядит это так:

Как видно, мы можем получать данные элемента по запросу.

Вставим эти команды в код проверки формы:

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

Если вам тоже кажется, что эти селекторы смотрятся громоздко в коде, то в функционале GTM есть Пользовательская переменная — Элемент DOM, которая может получать данные элемента по селектору таким же образом, как и document.querySelector.

Читать также:  Цифровизация сферы транспорта

Заполняется она так:

А добавить в код нужно будет следующим образом:

Суть будет та же, но выглядит красивее.

В результате должна получится переменная проверки формы:

Я её назвал “Проверка на заполненность полей Оформить заказ” — чтобы точно было понятно что она делает.

Осталось сделать тег на отправку события и триггер на кнопку и после этого проверить работоспособность проверки.

Создаем стандартный тег на отправку события в Google Analytics:

Уверен с этим проблем не будет.

Далее, триггер. Нужно сделать триггер на клик кнопки “оформить заказ” и при этом сделать проверку заполненности полей.

Кнопку найдем с помощью селектора и добавим условие, чтобы переменная “Проверка на заполненность полей Оформить заказ” вернула нам true.

Условие: Click Element — соответствует селектору CSS позволяет сравнивать селектор элемента по которому был клик, с селектором условия. И при соответствии считает проверку успешной.

А вторым условием была подставлена переменная проверки, где ожидаемое значение: равно — true.

Конечный результат тега и триггера проверки отправки формы:

Важно: помните, что в теге Событие, поля Категория и Действия соответствуют Категории и Действию цели Google Analytics, которую вы создали.

Проверяем работу, не забыв обновить Диспетчер тегов и перезагрузив страницу сайта:

Без заполнения данных:

Условия не выполнены, событие не сработало и ничего не было отправлено.

При успешном заполнении:

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

Итак, отправка событий с формы работает успешно.

Шаблон проверки формы заказа гибок и его можно применять на разных таблицах с разными обязательными формами, просто меняя селекторы и изменяя количество переменных в условии. Например если бы там было еще обязательная переменная почта (email), то код бы выглядел так:

Событие отправки формы заказа по условию сделана, теперь перейдем непосредственно к настройке e-commerce.

Заполняем данные E-commerce в datalayer

Давайте разберемся для начала, какие данные нужны для e-commerce.

Для корректной работы e-commerce как минимум нужно:

transactionId — ID текущей транзакции (будет отображаться в отчетности Google Analytics)

transactionTotal — Сумма стоимости всех товаров

transactionProducts — Перечисление товаров

currency — Используемая валюта при покупке

Каждый товар в transactionProducts должен иметь следующие минимальные данные:

name — название товара

price — цена товара

quantity — количество единиц товара

sku — артикул товара

Здесь описаны дополнительные данные, которые можно собрать с помощью e-commerce

Отлично, теперь нам нужно определить, где взять в корзине сайта эти данные

Исходя из скриншота видно, что у товаров есть name, quantity и price. Но у товаров нету sku — это не проблема, разберем в процессе.

В корзине также есть сумма товаров, которую можно считать transactionTotal. В качестве currency (валюты) можно просто вписать RUB — т.к. на сайте используются рубли. А transactionId будет случайным числом, которое надо будет сгенерировать.

Начнем составлять шаблон для заполнения. Для этого нам потребуется тег “Пользовательский HTML”.

Внесем туда для начала переменные:

Выглядит для начала так:

transactionProducts равняется скобкам, потому что это обозначает в JavaScript будущий список значений. А учитывая, что туда будут динамично вписываться товары из корзины, то нужно написать именно так.

А теперь давайте последовательно заполним данными каждую переменную от простого к сложному.

  • currency — тут всё просто. Пишем:

Кстати если потребуется иная валюта, то просто впишите её аббревиатуру. Например для евро — EUR, для долларов — USD и т.д. Только не забудьте внести в кавычки как в примере (одинарные или двойные).

  • transactionId — тут придется создать переменную, которая будет генерировать случайное число. В GTM такая есть:

Внедряем полученную переменную в код:

  • transactionTotal — получить сумму товаров тоже несложно.

Для этого нужно найти элемент на сайте, который выдает нужное значение:

Но прежде, давайте проверим в консоли, что это то, что нам нужно:

Как видно на гифке, первый вызов был по селектору с добавлением innerText — это позволяет получить данные записанные в найденном элементе.

И в выводе получился текст: “1 251 р.” — что не подходит для записи в transactionTotal, т.к. нам нужно просто число.

Поэтому к следующему вызову был добавлен метод: .replace

Где в скобках первое значение в кавычках “что заменить”, а второе — “на что заменить”. В данном случае заменен: “ р.” (конец строки после числа) на пустое значение. И на третий раз метод повторили и был убран лишний пробел, в результате получив число.

Рекомендую запомнить метод replace — определенно пригодится при поиске нужного значения на иных сайтах.

Результирующую комбинацию записываем в переменную:

  • transactionProducts — заполнение это переменной будет самой сложной и можно сказать главная часть этого руководства.

Для начала повторим, что нам нужно сделать и в чём проблема.

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

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

Смотрите пример ниже и разберем его далее:

Для начала, был найдена таблица, которая содержит все товары. Отличие таблицы от товаров — она статична и всегда будет на странице корзины, вне зависимости от количества товаров в корзине.

Далее, был взять селектор таблицы и найден в консоли. Следующим шагом, был использован метод children, который вывел список всех дочерних элементов — и это все товары.

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

Запишем следующее в код шаблона:

Что нового добавилось:

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

В цикле for объявляется переменная i, которая принимает значение 0 и каждую итерацию цикла увеличивается на 1, до тех пор, пока длина списка товаров (list.length) больше переменной i. Например сейчас всего три товара в списке и list.length будет равно 3, значит цикл повторится 3 раза с увеличением переменной i на единицу каждый раз в конце прохода цикла.

Внутри цикла реализован следующий метод:

Который обозначает, что каждый проход цикла, в объявлений список transactionProducts вносится (push) новый элемент, который содержит 4 переменных: name, price, quantity и sku. И пока что каждый элемент принимает значение переменной list[i]. А значит при каждом прохождении цикла будет вносится значение подобным образом: list[0], list[1], list[2] и так пока не законится цикл.

Помните, что в переменной list внесены товары? а значит вызов list[i] будет выглядеть так:

По факту будет запись каждого товара во все переменные. Это близко, но не совсем то, что нужно. Например, нужно найти название товара, а не весь товар. Значит list[i] в переменной name надо уточнить тем, что надо из рассматриваемого товара найти нужный элемент с названием:

Как видно, можно обратится к children текущего children и найти интересующий нас элемент. В данном случае это был 1 элемент, который содержал нужный текст.

Следовательно можно дополнить переменную name такой формулировкой:

list[i].children[1].innerText

И теперь в name будет записываться название каждого товара.

С ценой и количеством поступим также:

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

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

В результате скрипт получится таким:

Теперь в цикле пополняется список актуальными данными каждого товара. Но как вы могли заметить, остался пустым sku — артикул товара. По той причине, что на сайте этих данных нет, а потом поле осталось пустым. Так же можно поступить и с любым другим полем, если по какой-то причине этих данных нет на сайте.

Ну и последнее — данные надо внести в datalayer.

Давайте ненадолго отвлечемся от текущей задачи и по простому разберем, что такое datalayer.

Это по факту список Google Tag Manager, в котором он записывает и хранит данные произошедших событий. Его можно вызвать в консоли браузера, чтобы посмотреть его записи:

Как видно, он хранит все события, которые были произведены GTM.

Кроме того, с помощью datalayer можно вызывать события и хранить данные:

datalayer может вызывать пользовательские события. Здесь например был вызван test_event.

И есть возможность сохранить переменные с помощью push, в данном случае — data_list.

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

Дополним наш скрипт на основе полученных знаний:

Был добавлен метод dataLayer.push в который внесено пользовательское событие (event) — ecommerce. Вызов пользовательского события пригодится нам в будущем.

И добавлены переменные, которые были ранее собраны.

В результате в datalayer будут нужные для e-commerce значения и будет произведен вызов пользовательского события. Давайте протестим работу, добавив к тегу событие на клик кнопки оформить заказ:

Как видно, всё работает. В datalayer есть актуальные данные товаров, даже при их изменении.

Остался последний шаг — отправить данные в Google Analytics.

Завершение цепи событий — отправка транзакции в Google Analytics

Был создан тег на отправку события формы заказа с проверкой, тег на сбор данных e-commerce и осталось сделать тег на отправку данных и связать все эти три тега вместе.

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

Был создан тег в виде стандартного шаблона Google Analytics, где типом отслеживания была указана “транзакция”, а в качестве триггера было создано пользовательское событие ecommerce — то которое вызывает datalayer. Следовательно отправка данных будет сразу после того, как в datalayer попадут данные e-commerce.

Теперь осталось привязать событие добавления данных e-commerce при успешной отправке формы. Тут поможет порядок вызова тегов:

В теге отправки формы был настроен порядок активации тегов, где был указан тег для e-commerce. То есть тег e-commerce будет вызван сразу после отправки формы и не будет вызван, если произошла какая-то ошибка (неправильное заполнение например).

В результате выстраивается конечная цепочка тегов:

  • Тег отправки формы заказа
  • Тег заполнения данных для e-commerce
  • Тег отправки данных e-commerce в Google Analytics

Вот и всё! Результат можно проверить либо в отчетах Google Analytics по электронной торговле, либо с помощью расширения браузера — GA Debug:

Если еще нет такого расширения — рекомендую поставить. Удобно для отслеживания отправки событий в Google Analytics.

Это конечно круто, но как это применить к моему сайту?

Весь перечисленный выше алгоритм и примененные шаблоны кода можно применить к большинству сайтов, где есть корзина в табличном виде (это почти все интернет-магазины). Однако алгоритм по минимуму, но придется подстраивать под ситуацию. Например естественно селекторы будут уникальны для разных сайтов, а набор children, чтобы найти name или price может быть другим.

Еще например встречались мне таблицы, где содержались не только товары, но и куски заголовков:

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

for (var i = 0; i &lt; list.length; i++)

На этой сайте сделано так:

for (var i = 1; i &lt; list.length — 1; i++)

То есть цикл начинался не с первого элемента, а со следующего (i = 1, а не 0) и последний элемент не обрабатывался (list.length — 1, длина на 1 меньше).

На другом сайте товары были вообще через один:

Потому элементы нужно было брать с пропуском. И условие цикла было таким:

Читать также:  В электронной коммерции и моделях взаимодействия между участниками электронного бизнеса (B2C; B2C, 2G). Концепция электронной цифровой коммерции Скачать бесплатно и без регистрации

for (var i = 0; i &lt; list.length; i =+ 2)

где каждый цикл, к i прибавлялось не 1, а 2 (i =+ 2)Следовательно и на вашем сайте возможно придется изменить шаблон в зависимости от условий.

Если ваш сайт сделан в конструкторе Tilda, то вот шаблон ecommerce:

Отчет по взаимодействию с пользователем (Shopping Analysis Report)

Этот отчет дает наглядное представление о том, как пользователи взаимодействуют с вашим сайтом с момента первого захода. Кроме того, он показывает процент отвалившихся на каждом этапе воронки — и тут же предлагает вернуть всех обратно с помощью ремаркетинга, который в Enhanced Ecommerce реализован в один клик по сегменту отвалившихся. Благодаря отчету по покупательскому поведению складывается ясная картина того, как пользователи путешествуют по разделам интернет-магазина.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Отчет по покупательскому поведению (Shopping Behavior Analysis)

Полезные инсайты

  • На каком этапе отваливается больше всего пользователей и теряется больше всего выручки.
  • Как ведут себя на сайте новые и вернувшиеся пользователи.
  • Можно сегментировать пользователей по различным показателям: источник, устройство, местонахождение, категория и бренд товара, который они приобрели.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Как применять

Этот отчет поможет принять важные стратегические решения:

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

Отчет по эффективности товарных категорий (Product Performance Report)

Google наконец-то пошла навстречу владельцам интернет-магазинов и добавила данные по самым выгодным товарам. Каждую товарную позицию можно теперь сравнивать по количеству покупок, общей выручке с позиции, количеству добавлений и удалений из корзины и просмотров карточки товара. Есть еще два относительных показателя: Cart-to-Detail Rate (число добавлений в корзину к числу просмотров карточки товара) и Buy-to-Detail Rate (число покупок к числу просмотров карточки товара).

Раньше популярность товара определялась абсолютными величинами вроде просмотров страницы и суммарной выручки по позиции. Но это неправильно, ведь на сайте могут быть товары с большим количеством просмотров и при этом низким уровнем конверсии в покупку. С отчетом Product Performance Report можно напрямую сравнивать товары и анализировать их показатели конверсии.

В том же разделе по эффективности товаров находится еще один важный отчет — по эффективности брендов (Brand Performance). Он позволяет сравнивать и анализировать показатели продаж каждого бренда и взаимодействие пользователей с ним.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Полезные инсайты

  • Товары и товарные категории с высокой видимостью среди пользователей, но с низким показателем добавления в корзину.
  • Какие товары, напротив, часто добавляют в корзину (Cart-to-Detail), но редко заглядывают в их описание.
  • Товары и товарные категории, которые чаще всего удаляют из корзины.
  • Бренды, которые показывают высокую конкурентоспособность и генерируют хорошую выручку.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Как применять

Вы можете предложить скидки на товары, которые имеют большое количество просмотров, но низкий показатель добавления в корзину.

Можно выставить на более выигрышные позиции на сайте товары с высоким показателем Cart-to-Detail и небольшим числом просмотров описания.

С помощью ремаркетинга можно вернуть пользователей, бросивших корзину, и тем самым увеличить выручку с продукта.

Можно интегрировать ремаркетинг сразу в Enhanced Ecommerce и сэкономить кучу денег на сторонних сервисах по возврату брошенных корзин.

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

Импорт данных и метаданных о товаре в Google Analytics открывает целый мир возможностей:

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

Отчет по внутреннему промо (Internal Promotion Report)

Этот отчет заметно упростит жизнь маркетологам. До сих пор было трудно получить точные данные по эффективности баннеров в интернет-магазине без специальной настройки Google Analytics. Приходилось создавать события для кликов по каждому баннеру. Теперь можно видеть эффективность каждого баннера в разрезе показов, кликов, CTR, с информацией по позициям и последовательностям.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Полезные инсайты

  • У какого баннера выше кликабельность.
  • Как размещение влияет на CTR.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Как применять

Маркетологи смогут определиться с тем:

  • какой товар лучше разместить на баннере;
  • где на баннере расположить изображение товара;
  • как изменить дизайн баннеров с низким CTR по образцу баннеров с высоким CTR.

Отчет по поиску на сайте (Internal Search Behavior Report)

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

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Полезные инсайты

  • Самые популярные товары в магазине.
  • Находят ли люди то, что искали.
  • Покупают ли больше те товары, которые чаще мелькают в результатах поиска.

Как применять

  • Товары, которые люди чаще всего ищут в поиске, можно разместить на главном баннере.
  • Можно предлагать скидки на товары с высоким CTR из поиска, но низкой выручкой.
  • Товары, которые чаще всего выводятся в результатах поиска, можно выделить.
  • Отрегулируйте поисковый алгоритм, если видите, что у товаров с большим количеством показов в поиске низкий CTR.

Отчет по купонным кодам (Coupon Code Performance Report)

Этот новый отчет в Universal Analytics теперь позволяет отслеживать эффективность скидочных купонов. Можно сравнивать купоны по объему выручки, среднему чеку и количеству оплат.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Полезные инсайты

  • Какие купоны используются чаще всего.
  • Какие купоны дают больше выручки.
  • Какие купоны сильнее всего влияют на общий средний чек.

Как применять

Основываясь на данных по использованию купонов, можно принимать следующие решения:

  • Какой должна быть стратегия скидочных предложений. Если вы знаете, какие купоны популярны и какие из них влияют на средний чек, то соответствующим образом скорректируете предложения по купонам.
  • Какие купоны можно раздавать чаще всего. Анализ влияния скидочных купонов на продажи поможет вам продавать менее популярные товары и увеличить с них доход.
  • Какого размера могут достигать скидки по купонам. Анализируя средний чек, владельцы бизнеса могут играть со скидкой на товары. Например, если купон отрицательно сказывается на среднем чеке, можно снизить скидку в купоне.

Когортный анализ

С помощью сегментов из Enhanced Ecommerce можно проводить когортный анализ. Например, увидеть, совершаются ли повторные покупки после использования купонов.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Полезные инсайты

  • Чем отличается поведение выделенного сегмента (в данном случае тех, кто воспользовался купонами).
  • Потратили ли эти пользователи больше денег. Какой у них средний чек.
  • Насколько выше процент брошенных корзин в сегменте купонов.

Как применять

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

Способы настройки электронной торговли Google Analytics

Способы настройки электронной торговли:

  • с помощью кода отслеживания Google Analytics
  • через Google Tag Manager
  • с помощью готового модуля для популярных CMS систем

Несколько слов про каждый из вариантов настройки электронной торговли Google Analytics. С помощью кода отслеживания Google Analytics. В исходный код страниц сайта внедряется специальный код JavaScript , который передает инструкции и данные в счетчик.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Пример кода отслеживания

Через Google Tag Manager (с помощью dataLayer). Ниже мы будем разбирать этот способ, как наиболее функциональный, а также по той причине, что на многих сайтах выполнена настройка Google Tag Manager и настройка электронной торговли будет дополнением основной настройки Google Analytics.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Настройка через dataLayer

С помощью готового модуля для популярных CMS систем. Это относительно самый простой способ, но и наименее контролируемый способ. Заключается он в том, что для используемой на сайте CMS системы подключается готовый модуль, который обеспечивает автоматическое добавление необходимых инструкций в исходный код страниц сайта.

Помимо этого можно передавать данные о расширенной электронной торговле с помощью протокола передачи данных Google Analytics. Но это сложный вариант, его можно использовать если необходимо фиксировать только фактически оплаченные заказы.

Что можно отслеживать в электронной торговле

На скриншоте показаны блоки, которые выполняют определенную функцию и могут быть настроены в электронной торговле:

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Элементы, которые можно фиксировать в расширенной электронной торговле

Если выполнена корректная настройка расширенной электронной торговли Google Analytics можно фиксировать полный цикл взаимодействия с товаром на сайте:

  • просмотр блока товар в списке товара
  • клик по блоку товара в списке товаров
  • просмотр карточки товара
  • добавление и удаление в товара в корзину
  • процесс оформления покупки
  • сбор данных о возвратах, после покупки

Помимо этого можно собирать данные по внутренним рекламным активностям:

  • клики по промо-блокам

При полной настройке электронной торговли Google Analytics вы можете оценить влияние внутренних промо-блоков на продажи.

Настройка электронной торговли через Google Tag Manager

Процесс настройки электронной торговли через Google Tag Manager также состоит из нескольких этапов (ниже разбирается подробно каждый из них):

  • подготовка ТЗ разработчикам для внедрения dataLayer
  • выполнение аудита внедрения и работы кода на сайте
  • активация электронной торговли в Google Analytics
  • настройка электронной торговли

На что стоит обратить внимание. Первое — эти типы хитов, которые передают данные об электронной торговле в Google Analytics это Просмотр страницы или Событие.

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

Третье — не забывайте про лимиты Google Analytics в 500 хитов за сеанс и длину передаваемых данных в 8 кб. Если у вас длинные названия список товаров или названия товаров, обязательно проверьте наличие ошибок в консоли браузера, если они есть — вы можете пропустить часть информации.

Подготовка ТЗ разработчикам для внедрения dataLayer

В уровне данных содержатся инструкции, описывающие события расширенной электронной торговли Google Analytics, ниже мы разберем их подробнее. Что такое техническое задание (ТЗ)?

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Фрагмент ТЗ

Это документ, в котором вы описываете где и при каких условиях необходимо разместить и выполнить код. Вы можете пойти по самому простому пути, подготовить ТЗ так как удобно вам, может быть у вас есть правила по которым нужно готовить такие документы. В любом случае — если есть возможность, пообщайтесь голосом с разработчиками, так вы можете решить множество вопросов, не тратя время на пустую переписку.

Я подготовил для вас шаблон ТЗ, которое можно получить по ссылке.

Настройки, интеграции, примеры реальных задач, пошаговые инструкции, узнавайте первыми в моем Telegram канале. Не пропустите новые материалы, подпишитесь сейчас!

Выполнение аудита внедрения ТЗ

Это один из важных этапов настройки электронной торговли Google Analytics, т.к. от него зависит полнота и достоверность собираемых данных. Рекомендую каждый раз проводить полные проверки внедрения ТЗ, т.к. возможно при доработках перестанет работать что-то из того, что корректно работало на предыдущей итерации внедрения.

Выполнить проверку можно с помощью отладчика Google Analytics и режима отладки Google Tag Manager, но чтобы корректно проверить все нужно знать принцип работы расширенной торговли Google Analytics, который описан ниже.

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Пример отладки

Активация электронной торговли в Google Analytics

Чтобы данные по электронной торговле поступали в Google Analytics необходимо выполнить ряд настроек:

  1. включить расширенную электронную торговлю
  2. настроить воронку в представлении Google Analytics

Для того, чтобы включить электронную торговлю необходимо перейти в настройки представления Google Analytics и активировать два переключателя. Обратите внимание они должны быть оба в положении ВКЛ:

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Настройка в представлении

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

Настройка расширенной электронной коммерции Google Analytics (Enhanced Ecommerce) через GTM

Настройка процесса покупки

Завершается настройка нажатие кнопки Сохранить. Такие действия стоит выполнить в каждом представлении, чтобы данные по электронной торговле были доступны в отчетах Google Analytics.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *