Отслеживание Core Web Vitals в GA4 

Перевод статьи Симо Ахава: «Отслеживаем основные показатели Web Vitals в GA4 с помощью менеджера тегов Google»:

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

Устанавливаем шаблон

Чтобы загрузить шаблон, перейдите в интерфейс Google Tag Manager и выберите вкладку «Шаблоны» в левом навигационном меню:

Затем нажмите на кнопку «Поиск в галерее» на панели «Шаблоны тегов»:

После добавления шаблона в рабочую область, перейдите на вкладку «Теги» в левом навигационном меню и нажмите «Создать», чтобы добавить новый тег:

Сам тег не требует настройки – после добавления он будет работать и так (подробнее в описании шаблона).

Добавьте триггер, который будет вызывать тег Core Web Vitals при загрузке на всех страницах. Если вы хотите, чтобы тег работал только для определённых страниц, установите соответствующий триггер:

Сохраните тег, когда всё будет настроено.

Тестируем

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

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

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

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

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

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

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

Выберите одно из событий и разверните API Call. Вы увидите что-то подобное:

Объект Datalayer

Вот, что содержит объект dataLayer:

Создаем триггер для Google Tag Manager и переменные

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

Триггер специальных событий

Триггер Специальных Событий выглядит примерно так:

Переменные уровня данных

Затем создайте шесть переменных Уровня Данных, используя картинку ниже как образец:

Отправляем данные в Universal Analytics

Чтобы разобраться с отправкой данных в Universal Analytics, я рекомендую прочитать отличное руководство на Tag Manager Italia: How To Track Core Web Vitals With Google Tag Manager.

Значение beacon в этом поле нужно, чтобы для тега использовалось Beacon API. Beacon API «защищает» асинхронные запросы, чтобы они были выполнены, даже если пользователь решает покинуть страницу. Это важно для измерения некоторых из основных показателей Web Vitals, которые могут не возвращать значение до тех пор, пока пользователь не решает уйти со страницы.

Но важно держать в голове, что Universal Analytics может принимать только целые числа для полей Event value и Custom Metric. По этой причине используйте переменные webVitalsMeasurement.valueRounded и DLV - webVitalsMeasurement.deltaRounded вместо «сырых» значений.

Отправляем данные в Google Analytics 4

Для отправки данных в Google Analytics 4, вам понадобится тег Google Аналитика: событие GA4, поэтому добавьте его в настройках.

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

В качестве Названия События я указал название показателя, который я буду собирать (LCP, FID или CLS). Напоминаю, что в GA4 используется семантический подход к названиям, и название события должно отражать, что произошло, а не быть просто типовым обозначением, как это было с категорией Событие в Universal Analytics.

Я отправляю четыре «сырых» параметра, потому что GA4 может обрабатывать числа с плавающей запятой в отличие от Universal Analytics. Ниже четыре параметра, которые я отправляю:

• web_vitals_measurement_name для имени показатели;
• web_vitals_measurement_id для ID показателя;
• web_vitals_measurement_value для сырого показателя значения;
• value для дельты сырого показателя.

Я использую value для передачи дельты показателя, потому что value – рекомендованный параметр для основного значения события. Я решил использовать delta, потому что это наиболее разумно для измерения показателя CLS. Если вместо этого в качестве значения показателя передавать value события, то суммарное значение CLS будет завышено, потому что складываться будут не дельты, а сами значения.

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

Напоминаю, что GA4 можно тестировать в собственном режиме предпросмотра, нажав на ID нужного показателя на верхней панели инструментов в интерфейсе режима предпросмотра. Вы можете выбрать одно из событий, например, CLS, и посмотреть детализацию данных, отправленных в GA4 HTTP запросом:

Не забудьте также протестировать Режим отладки в интерфейсе Google Analytics 4:

Наконец, нет ничего приятнее, чем смотреть, как данные импортируются в Google BigQuery:

Заключение

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

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

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