Google Analytics 4 и электронная торговля: начинаем внедрение через GTM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это далеко не полный список стандартных параметров для событий электронной торговли. Полный набор можно увидеть в справке от 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. Все события электронной торговли подробно представлены в инструкции.

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

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

В разделе «Переменные» создаем новую пользовательскую переменную и выбираем тип «Переменная уровня данных». Она будет содержать идентификатор транзакции, в электронной торговле обозначаемый как 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

В проекте, аккаунт 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 4 в плане работы с электронной торговлей на сайте и даже за его пределами. Используя навыки программирования, можно интегрировать возможности аналитической системы глубоко в веб-алгоритмы передачи данных, отслеживая не только онлайн, но и офлайн–события.

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

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