Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

Если вы еще не сталкивались с 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.

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

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

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

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

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

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

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Фрагмент ТЗ

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

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

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

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

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

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

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

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

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

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

Читать также:  Функциональное назначение и ресурсы Интернет

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

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

Просмотры списков товаров

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

Событие, которое фиксирует просмотр: impressions

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

Как фиксировать (в примере использована часть параметров):

// просмотр списка

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

Что получаем в результате:

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

Клики по товарам в списке

Это действие происходит после того, как пользователь увидел товар и решил перейти на его карточку товара.

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Блок товара в списке

Событие, которое фиксирует просмотр: 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 Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Клики по товарам в списке

Просмотр карточки товара

Это действие, при корректной настройке расширенной электронной торговли Google Analytics, фиксирует сведения о просмотре  карточки товара после просмотра списка товаров. На что следует обратить внимание:

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Просмотр карточки товара

Событие, которое фиксирует просмотр: detail

Что передается: Передается описание товара на карточку которого выполнен переход (карточка отображаемая пользователю). Важно передать название списка, из которого выполняется переход, это вложенный параметр list в actionField

Как фиксировать (в примере использована часть параметров):

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

Что получаем в результате:

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

Фиксируем все добавления товара в корзина, а также все увеличения числа единиц товара в корзине (обычно + или стрелка вверх на странице просмотра товаров, добавленных в корзину)

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

Событие, которое фиксирует просмотр: add

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

Как фиксировать:

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

Что получаем в результате:

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

Фиксируем удаление из корзины полностью товара либо уменьшения единиц товара в корзине

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

Событие, которое фиксирует просмотр: remove

Что передается: Передается описание товара, удаляемого из корзины. Если удаляем товар полностью из корзины, нужно фиксировать корректно это значение в параметре quantity (может быть добавили 5 единиц в корзину, значит quantity должно быть равно 5)

Как фиксировать:

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 Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

Процесс оформления покупки

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Процесс оформления покупки

Событие, которое фиксирует просмотр: 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 Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Анализ поведения при оформлении покупки

Фиксация транзакции

Разберем способ настройки через код на сайте (еще можно фиксировать протоколом передачи данных 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

Что получаем в результате:

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Эффективность продаж

Возвраты

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

Событие, которое фиксирует просмотр: refund

Что передается: можно передать данные по транзакции и/или по возвращаемым товарам.

Официальная справка:
https://developers.google.com/tag-manager/enhanced-ecommerce#refunds 

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

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

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

Как я писал выше фиксировать данные можно двумя типа хитов: просмотр страницы и событие. Просмотры товаров в списке, просмотры промоблоков,, просмотры карточки товара, процесс оформления покупки и транзакцию можно передавать до инициализации кода контейнера 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 Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Пример настройки триггера

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Пример настройки тега

Категория событий указана как EE , это означает Расширенная электронная торговля Google Analytics или Enhanced Ecommerce Google Analytics. Действие по событию — переменная Event, она будет принимать одно из значений равное переданному событию. Вот так выглядит отчет по событиям электронной торговли в Google Analytics (в разделе событий):

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Пример событий в отчете Google Analytics

Следующая опция Настройка Google Analytics, тут у меня выбрана переменная конфигурации Google Analytics: CONF — GA

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

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

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

Классическая электронная торговля Google Analytics

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

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

Почему мы активируем только один переключатель? Поскольку настройка электронной торговли 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 :

<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:

<! 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:

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

* отмечены обязательные позиции.

Часто возникает вопрос откуда взять данные о стоимости, артикуле, названии товара, идентификаторе транзакции и другим полям? Для ответа на этот вопрос пообщайтесь с разработчиками вашего сайта, расскажите им что и где необходимо разместить на сайте. Как правило они попросят вас подготовить для них Техническое задание. Это такой документ, в котором описывают что и где необходимо разместить или какой код, при каких обстоятельствах нужно выполнить. Не стесняйтесь общаться с разработчиками, иногда лучше провести одну встречу, чем переписываться несколько дней.

Читать также:  Цифровизация гражданского участия

После того, как будет настроена передача данных с помощью dataLayer, необходимо настроить тег, который будет передавать данные о транзакции в Google Analytics.

Создайте новый тег типа Universal Analytics, укажите для него тип отслеживания транзакция:

Google Tag Manager тип тега транзакция

Google Tag Manager тип тега транзакция

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Триггер для Google Tag Manager

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

Настройка через код отслеживания

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

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

Особенности настройки расширенной электронной торговли Google Analytics

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

  1. Внимательно прорабатывайте функционал сайта, чтобы не упустить все моменты в процессе взаимодействия с товарами
  2. Отдельный просмотр попап окна с информацией о товаре — фиксируйте как просмотр карточки товара
  3. В ТЗ указывайте все особенности, которые выявили при изучении сайта
  4. Проведите встречи с разработчиками, чтобы обсудить ТЗ и аудиты, это сэкономит время и ускорит процесс внедрения
  5. Внедрение может занимать от нескольких дней до месяцев. Завит от команды разработчиков, сложности сайта и внутренних процессов на проекте
  6.  Заказчик настройки должен знать, что полная стоимость складывается из работ специалиста, который подготовит ТЗ, выполнить аудиты внедрения, настроит Google Analytics и Google Tag Manager, а также из стоимости работ разработчиков
  7. Закладывайте в стоимость работ 2-3 аудита, все что более проводите за отдельную плату. Внедрение и доработки со стороны разработчиков могут быть бесконечно долгими
  8. При отладке проверяйте каждый параметр и его значение, чтобы свести к минимум ошибки внедрения
  9. Старайтесь избавиться от (not set) списка в перечне списков товаров

Для каких целей используется Google Tag Manager?

С его помощью внедряют на сайте сервисы веб-аналитики (например, Google Analytics, Яндекс Метрика), настраивают пиксели для сбора данных по аудиториям (Facebook, ВКонтакте), запускают тестирования (Google Optimize), а также любые другие системы, для интеграции которых необходимо в исходном коде страниц сайта разместить код JavaScript.

Преимущества Google Tag Manager

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

Недостатки Google Tag Manager

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

Как работает Google Tag Manager?

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

Создание аккаунта и контейнера Google Tag Manager

Давайте приступим к установке этого удобного инструмента на свой сайт. Для начала перейдите на главную страницу проекта расположенную по адресу https://marketingplatform.google.com/about/tag-manager/  , если у вас уже есть учетная запись на Google  пройдите по кнопке Sign in to Tag Manager в правом верхнем углу, если нет, нажмите кнопку Start for free и завершите несложную процедуру создания аккаунта.

Главная страница Google Tag Manager

Главная страница Google Tag Manager

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

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

Создание аккаунта и контейнера Google Tag Manager

Создание аккаунта и контейнера Google Tag Manager

Я рекомендую давать название аккаунту и контейнеру идентичное доменному имени сайта.

После того, как все необходимые поля заполнены нажмите на кнопку Создать, вам предложат ознакомиться с «Соглашением об Условиях использования Диспетчера тегов Google». Внимательно прочтите его и сделайте выбор принять его или нет.

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

Код контейнера Google Tag Manager

Код контейнера Google Tag Manager

На этом создание аккаунта и установка Google Tag Manager на сайт завершены. Можно приступать к первым настройкам, обычно это добавление тега Google Analytics и Яндекс Метрики.

Как добавить тег в Google Tag Manager

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

Добавление тега в Google Tag Manager

Добавление тега в Google Tag Manager

Второй, с главной страницы контейнера:

Главная страница контейнера

Главная страница контейнера

Внедрим Google Analytics и Яндекс Метрику через Google Tag Manager. Перейдем к настройкам счетчика Google Analytics и скопируем идентификатор счетчика:

Номер счетчика Google Analytics

Номер счетчика Google Analytics

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

Переменная настройки Google Analytics

Переменная настройки Google Analytics

В открывшемся окне в поле Идентификатор отслеживания вставляем номер счетчика и сохраняем переменную:

Минимальные настройки

Минимальные настройки

После этого создаем тега типа Google Analytics — Universal Analytics со следующими настройками:

Первый тег Google Analytics

Первый тег Google Analytics

Теперь добавим Яндекс Метрику. Перейдите в настройки счетчика Яндекс Метрики и скопируйте код счетчика. После этого повторите действия по созданию тега, только в качестве типа укажите Пользовательский HTML . В содержимое тега вставьте код счетчика Метрики, добавьте триггер All Pages и сохраните тег:

Тег Яндекс Метрики

Тег Яндекс Метрики

После описанных действий мы получаем два тега, которые внедряют на сайт через Google Tag Manager такие сервисы как Google Analytics и Яндекс Метрику:

Яндекс Метрика и Google Analytics в Google Tag Manager

Яндекс Метрика и Google Analytics в Google Tag Manager

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

Как выполнить отладку в Google Tag Manager

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

Запуск отладчика Google Tag Manager

Запуск отладчика Google Tag Manager

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

Информация в отладчике

Информация в отладчике

Отлично! Все работает. Но проверим еще в отчетах в режиме реального времени Google Analytics:

Проверка в реальном времени

Проверка в реальном времени

Google Analytics получил отправленных хит с сайта, выполненные настройки в Google Tag Manager корректны. Для Яндекс Метрики такого отчета нет, но можно использовать дополнительный параметр _ym_debug=1 в URL текущей страницы, открыть инструменты разработчика в браузере, перейти в консоль и получить подтверждение отправки обращения в Метрику.

Версии и публикация в Google Tag Manager

Проверили — все работает, но пока эти изменения доступны только нам в режиме предварительного просмотра или отладки. Сделаем их доступными для всех, опубликовав контейнер Google Tag Manager. В правом верхнем углу выбираем Отправить и видим следующее окно:

Публикация контейнера Google Tag Manager

Публикация контейнера Google Tag Manager

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

  • Публикация и создание версии — сохраняется текущее состояние контейнера и становится доступно всем посетителям сайта
  • — сохраняется текущее состояние контейнера

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

Администрирование в Google Tag Manager

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

Настроить доступ в Google Tag Manager можно достаточно гибко, но самое важное я не рекомендую выдавать на уровне аккаунта права администратора!

Управление доступом в Google Tag Manager

Управление доступом в Google Tag Manager

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

Импорт контейнера Google Tag Manager

Импорт контейнера Google Tag Manager

Соответствующая опция доступна на уровне настроек контейнера.

Как менялся Google Tag Manager

Я давно работаю с Google Tag Manager, этот блог я начал вести в 2013 году. С того времени у меня собралась коллекция скриншотов с интерфейсом Google Tag Manager, давайте вместе вспомним  как развивался этот инструмент.

2013 год

Таким был интерфейс при создании контейнера:

Создание аккаунта Google Tag Manager

Теги, триггеры и переменные раньше назывались Теги, правила, макросы:

создание тега google tag manager
Создание аккаунта Google Tag Manager

Примерно так происходило добавление нового тега:

имя тега google tag manager

Таким было окно, в котором происходила конфигурация тега:

настройка таймера в google tag manager

2014 год

Создание нового тега происходило по следующей схеме:

меню работы с тегом

Запуск отладчика происходил иначе:

режим просмотра в google tag manager

2015 год

Типы тегов и выбор необходимого происходил на первом шаге конфигурирования тега:

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Конфигурация тега Google Analytics выполнялась согласно следующего порядка:

Настройка тега Universal Analytics в Google Tag Manager

2016 год

Фрагмент из отладчика:

Информация в отладчике Google Tag Manager

2017 год

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

Настройка Google Tag Manager для электронной коммерции и Google Analytics для электронной коммерции 2022

Зачем и как настраивать enhanced ecommerce с помощью Google Tag Manager?

Благодаря отправке данных через GTM легко:

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

Для настройки передачи данных расширенной электронной торговли в Google Analytics с помощью Google Tag Manager необходимо:

  1. Настроить Google Tag Manager для считывания этих данных и их отправку в Google Analytics.
  2. Настроить передачу нужных данных в Data Layer.

Первая задача обычно внедряется интернет-маркетологом без участия команды разработчиков. Вторая задача решается командой разработчиков на основе технического задания, подготовленного интернет-маркетологом. Обычно этот этап вызывает больше всего вопросов — ему посвящена значительная часть статьи (после раздела «Настройка Google Analytics и Google Tag Manager»).

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

Преимущества метода:

  1. Данные могут передаваться в Data Layer в любой момент, а не только на этапе загрузки страницы.
  2. Присутствует возможность гибко настроить передачу только определенных данных в Google Analytics, не привлекая команду разработчиков.
  3. Упрощение настройки Google Tag Manager: все данные будут отправляться одним тегом.

Недостатки:

  1. В случае использования готовых модулей для различных CMS, настройку GTM нужно будет переделывать под эти модули.
  2. Согласно текущим условиям использования Google Analytics, для каждого аккаунта бесплатно предоставляется 10 млн обращений в месяц. Отправка каждого дополнительного события приближает к этому лимиту, поэтому для сайтов с большим объемом трафика нужно провести дополнительный анализ того, хватит ли предоставляемого бесплатного лимита для всех дополнительных событий.

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

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