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

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

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

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

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

Что такое Core Web Vitals и какие основные показатели отслеживать мы рассказывали в статье «Страх и ненависть в апдейте».

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

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

Вкладка «Шаблоны»
Вкладка «Шаблоны»

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

Поиск в галерее
Поиск в галерее
В появившемся справа окне воспользуйтесь поиском и найдите шаблон, который называется Core Web Vitals, выберите его и нажмите «Добавить в рабочую область», далее следуйте инструкциям во всплывающих окнах:
Добавление в рабочую область
Добавление в рабочую область

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

Создание нового тега
Создание нового тега
Выберите новый шаблон Core Web Vitals для вашего тега:
Выбор шаблона
Выбор шаблона

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

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

Выбор триггера
Выбор триггера

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

Тестируем

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

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

Обратите внимание!

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

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

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

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

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

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

Предварительный просмотр
Предварительный просмотр

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

API Call
API Call

Объект Datalayer

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

Показатель Пример значения Описание
event 'coreWebVitals' Название события – всегда coreWebVitals.
webVitalsMeasurement.name 'FID' Одно из следующих: LCP, FID, CLS.
webVitalsMeasurement.id 'v1-123123123-234234234' Уникальный ID конкретного измерения на конкретной странице. Может использоваться, чтобы связать многократные измерения CLS с одной загрузкой страницы.
webVitalsMeasurement.value 123.55 Значение в миллисекундах (для LCP и FID), или балл для CLS.
webVitalsMeasurement.delta 17.77 Дельта, взятая к предыдущему измерению на той же странице (актуально для CLS).
webVitalsMeasurement.valueRounded 124 Значение, округленное до ближайшего целого числа. Значение CLS сначала умножается на 1000 для наглядности.
webVitalsMeasurement.deltaRounded 18 Дельта, округленная до ближайшего целого числа. Значение CLS сначала умножается на 1000 для наглядности.

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

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

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

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

Триггер Специальных Событий
Триггер Специальных Событий
Убедитесь, что вы установили сoreWebVitals в качестве значения в поле Название События.
Обязательно «сoreWebVitals» с маленькой буквы. GTM чувствителен к регистру.

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

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

Переменные Уровня Данных
Переменные Уровня Данных
Название переменной Имя переменной Уровня Данных
DLV - webVitalsMeasurement.name webVitalsMeasurement.name
DLV - webVitalsMeasurement.id webVitalsMeasurement.id
DLV - webVitalsMeasurement.value webVitalsMeasurement.value
DLV - webVitalsMeasurement.delta webVitalsMeasurement.delta
DLV - webVitalsMeasurement.valueRounded webVitalsMeasurement.valueRounded
DLV - webVitalsMeasurement.deltaRounded webVitalsMeasurement.deltaRounded

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

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

Не забудьте добавить поле transport со значением beacon у тега Universal Analytics:
Отправка в Universal Analytics
Отправка в Universal Analytics

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

GA4 не требует специальных настроек, чтобы отправлять данные через Beacon API. По умолчанию во всех запросах используется navigator.sendBeacon().

Но важно держать в голове, что 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:

Результаты в Google BigQuery
Результаты в Google BigQuery

Заключение

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

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

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