Что такое Google Analytics для электронной коммерции, и какую информацию я могу получить с его помощью?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И теперь в 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 < list. length; i++)

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

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

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

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

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

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

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

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

Чем события в Google Analytics 4 отличаются от событий в Universal Analytics

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

События – один из ключевых компонентов Google Analytics 4 в отличие от Universal Analytics, которая основывается на сеансах и просмотрах страниц.

В частности, в событии GA 4 нет стандартных для Universal Analytics компонент – Категория, Действие, Ярлык, Ценность.

Сравните: вот конструкции отслеживания события для старой Аналитики.

Для analytics. js:

Для gtag. js:

Компоненты события Google Analytics 4

Итак, код для всех событий GA 4 имеют одну структуру:

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

Более прозрачно это в интерфейсе Google Tag Manager. Когда вы добавляете на сайт тег Google Аналитика 4: событие GA 4, вы видите следующие поля для заполнения: название события и параметров с их значениями.

Для всех событий Google по умолчанию собирает 5 параметров:

1) language (язык пользователя);

2) page_location (URL текущей страницы, из location. href);

3) page_path (путь к странице, из location. pathname);

4) page_title (название страницы, из document. title);

5) screen_resolution (разрешение экрана).

В Google Analytics 4 можно отслеживать 4 типа событий:

1) Автоматически регистрируемые события – Google собирает их автоматически после создания и установки счетчика.

2) Улучшенная статистика – Google собирает их автоматически после включения в настройках ресурса соответствующей функции.

3) Рекомендуемые события – Google собирает их автоматически, если вы отдельно настроите их под свои задачи. Они разные для разных видов деятельности.

4) Специальные события – вы настраиваете их самостоятельно под ваши задачи.

Далее каждый тип события разберем подробнее.

Автоматически регистрируемые события

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

• page_view – просмотр страницы;
• first_visit – первое посещение;
• session_start – начало сеанса;

Данные по ним можно посмотреть в отчете «В реальном времени».

По каждому автоматически регулируемому событию передаются следующие параметры:

ga_session_number – порядковый номер сеанса для посетителя;

ga_session_id – уникальный идентификатор сеанса, который основан на временной метке события session_start;

Плюс для некоторые событий – эти:

page_location – URL текущей страницы;

page_title – название страницы;

entrances – количество пользователей, которые начинали сеанс с этой страницы;

debug_mode – параметр, отвечающий за режим отладки;

engagement_time_msec – время активного взаимодействия посетителя с сайтом или приложением.

Посмотреть эти параметры вы можете в инструменте Google Аналитики DebugView.

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

Улучшенная статистика

Эти события применяются только для сайтов.

Включаются для отслеживания они в разделе «Потоки данных». Для этого должен быть создан поток типа «Веб».

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

Либо включить частично, кликнув по шестеренке (как на скриншоте выше) и выбрав нужные пункты статистики.

Просмотры страниц

Это автоматически отслеживаемое событие, которое нельзя отключить, но у вас есть выбор – отслеживать просмотры страниц на основе событий, связанных с историей браузера или нет.

Для page_view Google фиксирует 2 параметра:

page_referrer – URL страницы, с которой посетитель пришел.

Прокрутка

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

Исходящие клики

Событие click происходит при каждом клике по ссылке, которая ведет с вашего сайта на любой сторонний домен.

При этом отслеживаются следующие параметры:

• link_classes – класс ссылки;
• link_domain – сайт, на который ведет ссылка;
• link_id – идентификатор ссылки;
• link_url – страница, на которую попадает человек после клика;
• outbound – логическое значение, подтверждающее, что ссылка ведет на другой сайт (должно быть равно true).

По этим данным вы выясните, по каким ссылкам посетители чаще уходят с сайта.

Поиск по сайту

Для этого события нужно обязательно указать один из 5 параметров (q, s, search, query, keyword) и дополнительно можно указать до 10 параметров через запятую.

Взаимодействие с видео YouTube

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

• video_start – запуск ролика;
• video_progress – просмотр 10%, 25%, 50% и 75% ролика;
• video_complete – завершение просмотра ролика.

По этим событиям отслеживаются параметры:

• video_current_time – на какой секунде было видео, когда произошло событие;
• video_duration – общая продолжительность видеоролика;
• video_percent – сколько процентов видео проиграло на момент, когда произошло событие;
• video_title – название видео;
• visible – логическое значение, подтверждающее, что видео было видимым в области просмотра (должно быть равно true).

Скачивание файлов

Google фиксирует по этим событиям следующие параметры:

file_extension – расширение файла;

file_name – имя файла;

link_classes – класс ссылки;

link_domain – домен ссылки;

link_id – идентификатор ссылки;

link_text – текст ссылки;

link_url – URL скачиваемого файла.

То события улучшенной аналитики настраиваются буквально в один-пару кликов в интерфейсе Google Analytics.

Рекомендуемые события

Этот тип событий есть в Google Аналитике 4 по умолчанию, с предопределенными настройками (событиями, параметрами и их названиями).

• Все ресурсы (для всех отраслей бизнеса, приложений и сайтов);
• Розничная торговля;
• Работа, образование, недвижимость;
• Путешествия (гостиницы/авиарейсы);
• Игры.

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

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

Допустим, для категории «Все ресурсы» Google рекомендует отслеживать такие события и параметры, связанные с ними:

Для мобильных приложений из этого списка подходят события earn_virtual_currency, join_group, spend_virtual_currency.

Самые полезные события для любой тематики деятельности – в категории «Розничная торговля». Примеры:

• Пользователь отправляет платежные данные (add_payment_info);
• Пользователь отправляет данные о доставке (add_shipping_info);
• Пользователь добавляет товары в корзину (add_to_cart);
• Пользователь добавляет товар в список желаний (add_to_wishlist);
• Пользователь приступает к оформлению заказа (begin_checkout);

и так далее.

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

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

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

• Возраст (по 6 категориям: 18-24, 25-34, 35-44, 45-54, 55-64 и 65+)
• Пол
• Интересы
• Магазин приложений
• Версия приложения
• Страна (местоположение посетителя)
• Бренд устройства
• Тип устройства

Полный список свойств можно посмотреть в официальной справке Google.

Специальные события

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

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

Максимальная длина названия события и параметра – 40 символов, значения параметра – 100 символов.

Всего в одном событии можно передавать максимум 25 параметров.

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

Настройка специального события с помощью изменения кода

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

Для этого нужно, во-первых, установить код Google Analytics 4 (или обновить Universal Analytics до GA 4) на отслеживаемые страницы сайта. Как это делать, смотрите в нашем руководстве.

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

Нужно создать кусок кода для события по следующей конструкции с командой event.

Придумайте название, параметры события и их значения. Например, это событие связано с отправкой формы. Название события (event_name) запишем как sendForm. Добавим к нему параметры, которые будут передавать название формы (formName) и URL страницы, на которой находится форма, а значит, произошло событие (formURL).

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

Разумеется, всё на латинице.

Это и есть кусок кода, отвечающий за отслеживание специального события. Остается добавить его в код сайта.

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

В конце сохраните изменения в консоли разработчика.

Настройка специального события с помощью Google Tag Manager

В Диспетчере тегов вы просто создаете тег конфигурации «Google Аналитика 4: событие GA 4». Именно он нужен для передачи данных по специальным событиям. Никаких изменений вносить в код не нужно.

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

Так, вот полный алгоритм настройки события через Google Tag Manager:

1) Установите код GTM на отслеживаемые страницы сайта. Как это сделать, мы подробно описывали в статье.

2) Установите тег конфигурации «Google Аналитика 4: событие GA 4». В настройках укажите уникальное название события и все параметры со значениями.

3) Создайте триггер. Для примера с формой – «Отправка формы», чтобы тег срабатывал каждый раз, когда посетитель отправляет заполненную форму на сайте.

4) Сохраните все изменения в Google Tag Manager.

Проверить корректность передачи данных в GTM можно с помощью режима предварительного просмотра. Для этого нажмите на кнопку предварительного просмотра.

Если есть какие ошибки, вы это увидите. Если всё в порядке, появится надпись Succeeded.

Остается отправить изменения на сервер.

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

Когда всё настроено, рекомендуем проверить, всё ли корректно работает, нет ли ошибок.

Есть 2 способа сделать это – отчет «В реальном времени» и встроенный инструмент Аналитики DebugView + расширение для браузера Chrome Google Analytics Debugger.

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

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

1) Установите расширение Google Analytics Debugger. Оно доступно по ссылке.

2) Зайдите на страницу и сделайте несколько кликов сами. Или другие действия по событию.

После установки режим отладки будет активным, и вы увидите в отчете Аналитики DebugView данные о ваших кликах.

3) Откройте отчет DebugView. В нем показаны все события на временной шкале, а также их параметры при клике на зафиксированное событие. В примере на скриншоте мы видим, что было 2 клика в 21:55.

А вот параметры, которые передались вместе с данными по этим кликам.

В данном случае ошибок нет, всё настроено корректно.

Отчеты по событиям

Если в отчете DebugView события отображаются в реальном времени, в других отчетах могут возникать задержки до 24 часов.

Данные по событиям GA 4 можно посмотреть в трех отчетах Аналитики.

1) Отчет «События» в разделе «Вовлеченность».

В нем отслеживаются специальные события, которые вы настроили своими руками + автоматические события: первое посещение (first_visit), начало сеанса (начало сеанса), просмотр страницы (page_view) и другие.

Клик по  каждому событию в отчете ведет на подробную информацию по нему.

2) Отчет «Все события» в разделе «События».

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

Больше данных при клике на нужное событие из списка.

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

С момента назначения события как конверсии начинается учет конверсий.

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

3) Отчет «Центр анализа» в разделе «Анализ».

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

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

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

Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто

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

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

// Measure product views / impressions

item_name: «Triblend Android T-Shirt»,       // Name or ID is required.

item_list_name: «Search Results»,

item_name: «Donut Friday Scented T-Shirt»,

Клики по товару или списку позиций:

item_name: productObj. name, // Name or ID is required.

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

// Measure when a product is added to a shopping cart

item_name: «Donut Friday Scented T-Shirt», // Name or ID is required.

affiliation: «Online Store»,

Важно! В отличие от Universal Analytics в GA4 не требуется выполнять дополнительных настроек в ресурсе или представлении, данные отправляются и принимаются по умолчанию.

Теперь потребуется ознакомиться с составными частями кода.

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

При выполнении определенных действий требуется использовать заранее задекларированные события:

Более подробно о них можно прочитать в справке:

Данные о товарах в GA4

В таблице представлены данные о товарах, которые требуется передать и их аналог в UA:

Данные о рекламе в GA4

Для внутренней рекламы можно использовать следующие данные:

Для действий потребуется передать следующие параметры:

Установка модуля настройки электронной торговли в GA4 для 1C-Bitrix

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

В первую очередь потребуется приобрести и установить плагин:

Для этого переходим в «Marketplace»-«Каталог решений» и вводим «arturgolubev. ecommerce».

Важно! Потребуется наличие лицензии 1С-Битрикс для установки модуля.

Настройки модуля достаточно просты.

После чего в настройках модуля устанавливаем Google Tag Manager.

Настройка модуля электронной торговли в GA4 для 1С-Битрикс в GTM

Сохраняем ID Аналитики перейдя в «Анадинстратор»-«Потоки данных» и выбираем нужный сайт.

Копируем Идентификатор потока данных.

Теперь переходим в Google Tag Manager и создаем новый тег.

Даем название и выбираем конфигурацию.

Указываем «Конфигурация GA4».

Вводим в «Идентификатор потока данных» скопированное ранее значение.

Вводим «All pages».

Сохраняем значения.

Переходим в «Переменные» и создаем новые.

Вводим название «eventModel. affiliation» и переходим в выбор конфигурации.

Аналогично создаем переменные для:

Создаем в разделе «Триггеры» новый пункт.

Называем его «add_to_cart» и выбираем конфигурацию.

Указываем «Специальное событие».

Вводим «add_to_cart» и сохраняем триггер.

Теперь создаем аналогичные триггеры:

Вводим название и выбираем конфигурацию.

Выбираем «Событие GA4».

Выбираем ранее созданную конфигурацию.

Открываем «Параметры события».

Добавляем новую строчку.

Вводим items и выбираем параметры.

Аналогично добавляем и другие параметры как на скриншоте.

Переходим к выбору триггера.

Указываем add_to_cart.

Добавляем еще.

Выбираем все ранее созданные события.

Сохраняем тег.

Отправляем на публикацию версию.

Даем название и описываем вариант.

Проверка настройки электронной торговли Google Analytics 4 для сайта на 1С-Битрикс

Для этого открываем сайт через режим «Предварительного просмотра».

После открываем «Конфигурация»-«DebugView».

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

Теперь при перейдя в «Отчеты»-«Монетизация»-«Монетизация» можно увидеть что данные передаются.

В отчете «Совершенные покупки» можно увидеть данные по товарам и покупкам.

Все готово.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавляем представления

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

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

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

• обработка данных по рекламным кампаниям;
• отслеживание приложений;
• сбор сведений по поддоменам сайта;
• работа с отчетами, например, отслеживание сеансов с мобильных устройств.

Как настроить тестовое и ключевое представление:

В панели администратора перейдите в раздел «Представление» —> «Настройки представления»:

Включите фильтр на посещения роботов.

Включите отслеживание поисковых запросов из строки поиска по сайту.

В настройках представления есть кнопка «Копировать представление». Эта функция может оказаться крайне удобной при создании новых представлений сайта:

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

Связываем GA с сервисами Google

Можно настроить связь с AdWords, чтобы получать данные из рекламного кабинета, а также с AdSense, если вы делаете сайт под рекламу. После связывания AdSense и Google Analytics данные сервисов будут доступны пользователям обоих этих аккаунтов.

Google Реклама

Связать аккаунт «Аналитики» с рекламным кабинетом можно в настройках ресурса, выбрав пункт «Связь с Google Рекламой». Далее вы увидите интуитивно понятный интерфейс страницы с единственной кнопкой «Установить связь с Google Рекламой»:

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

Завершите связывание продуктов нажатием кнопки «Связать аккаунты». Теперь связь установлена, ее можно отредактировать или удалить:

Настраиваем фильтр

С помощью фильтров можно ограничить или изменить данные в представлении. Фильтры нужны для отсеивания нецелевого трафика, например, личных посещений и посещений работниками, визитов ботов поисковых систем. Или, наоборот, — для получения данных по поддомену либо директории сайта. Фильтры можно создавать на уровне аккаунта и представления. Первые применимы к нескольким представлениям. По умолчанию фильтры в представлениях применяются к статистике в порядке создания.

Рекомендуем сразу настроить фильтр по посещениям для вашего IP и компьютеров ваших сотрудников, чтобы такие посещения не учитывались в отчетах:

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

Настраиваем корректный учет органического трафика из «Яндекса» в Google Analytics

С 2017 года мобильный трафик из ПС «Яндекс» стал попадать в отчет Google Analytics (канал referral), а с 2018 года добавился и десктопный органический трафик с «Яндекса».

Чтобы корректно учитывать органический трафик из «Яндекса» в Google Analytics, настройте 2 фильтра в точной последовательности.

Первый фильтр будет переводить трафик ПС из реферального канала в органический, а второй — из источника yandex. ru в yandex:

Если фильтры настроены без соблюдения очередности, задайте последовательность через функцию «Назначение порядка фильтров»:

Настройки для первого фильтра yandex. ru/referral —> yandex. ru/organic:

• Пользовательский фильтр —> Расширенный
• Поставьте галочку напротив «Поле Б обязательно для заполнения»

Настройки для второго фильтра yandex. ru/organic —> yandex/organic:

Теперь поисковый трафик из «Яндекса» определяется в канал с органическим трафиком:

Для охвата органического трафика «Яндекса» из других доменных зон расширьте значение «Источник кампании» с помощью регулярных выражений:

Для трафика из ПС mail. ru настраиваются идентичные фильтры, только для поля А «Источник кампании» используйте выражение:

Задаем адекватный учет отказов

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

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

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

Трудоемкий способ

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

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

Выбираем тип триггера «Таймер»:

Выставляем настройки таймера. Интервал в миллисекундах — указываете желаемый временной интервал, после которого посещение страницы не будет засчитано как отказ. Рекомендуем выставлять 15 секунд, или 15 000 миллисекунд. Ограничение — это максимальное количество активаций события, выставляем 1 раз. И настраиваем условие: при посещении URL, которые содержат домен вашего сайта. Сохраняем триггер.

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

Затем необходимо в конфигурации тега задать тип «Google Аналитика — Universal Analytics»:

Далее настраиваем тег. Устанавливаем тип отслеживания «Событие». Поля категории и действия заполните так, как вам удобнее будет потом анализировать информацию. В поле «Настройки Google Analytics» выберите переменную с идентификатором аналитики вашего сайта. Осталось добавить триггер-таймер и сохранить тег:

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

Быстрый способ

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

В новый код аналитики Google Analytics Universal нужно добавить строку:

setTimeout(“ga(‘send’, ‘event’, ‘read’, ‘15_seconds’)”, 15000);

Настраиваем оповещения

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

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

• Нет трафика. Если значение трафика со всех источников меньше 1, сработает оповещение о неработающем сайте.
• Мало конверсий. Количество конверсий уменьшилось на 20% по сравнению с предыдущей неделей.
• Нет транзакций. Если настроена электронная торговля (ЭТ), но транзакций нет, можно вовремя отследить слетевший код ЭТ.

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

Настройка аккаунта GA4

Настройка аккаунта Google Analytics 4 выполняется в три шага:

Создадим аккаунт. Назовем его, укажем настройки доступа;

Настроим ресурс. Укажем адрес сайта, валюту, часовой пояс.

На этапе настройки ресурса можно создать Universal Analytics. Это предыдущая версия Google Analytics. Больше о возможностях и настройках GA узнайте из нашего гайда «Как настроить Google Analytics».

Как перейти на GA:

• кликнем «Показать дополнительные параметры»;
• активируем опции «Создание ресурса Universal Analytics»;
• укажем URL сайта;
• выберем пункт «Создать только ресурс Universal Analytics».

Также можно одновременно создать ресурс двух типов: Google Analytics 4 и Universal Analytics. Для этого выбирается соответствующий пункт в настройках.

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

Поэтому вернемся к настройке непосредственно Google Analytics 4 и перейдем на следующий этап.

Заполним сведения о компании. Укажем сферу деятельности, размер компании и способ использования системы аналитики.

Кликнем на кнопку «Создать». Примем правила использования Google Analytics в отношении обработки данных.

Как настроить Google Analytics 4

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

Настроим веб-поток. Для этого укажем адрес сайта, назовем поток и кликнем на «Создать поток».

После этого система присвоит аккаунту идентификатор потока данных.

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

• просмотры страницы;
• прокрутка;
• взаимодействие с видео;
• исходящие клики;
• поиск по сайту;
• скачивание файлов.

Настройка тега на сайте

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

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

Связь с Google Ads

Свяжем GA4 с Google Ads — это необходимо для того, чтобы данные из аналитики появлялись в отчетах Google Ads.

Для этого перейдем в раздел «Связь с другими продуктами», выберем пункт «Связь с Google Рекламой» и нажмем на кнопку «Связать».

Выберем подходящий аккаунт Google Ads и свяжем его с новым аккаунтом в GA4.

Мы закончили настройку GA4. Дальше расскажем об основных отличиях в интерфейсе и возможностях инструмента.