Отслеживание производительности в Google Analytics 4

02 марта, 2023

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

Его автор Дэвид Вальехо (David Vallejo), основатель блога thyngster.com и разработчик многих аналитических решений. Он также является создателем нескольких браузерных расширений для отладки Google Analytics и Яндекс.Метрики, а по совместительству и его собственному мнению - еще и большим фанатом производительности.

Статьи Дэвида, как и материалы другого разработчика Симо Ахавы (Simo Ahava), автора блога simoahava.com, считаются очень глубокими и ценными с точки зрения технических аспектов, а методики и подходы в работе - нетривиальными и очень важными для интернет-маркетинга и цифровой аналитики. Именно поэтому я периодически обращаюсь на их сайты и перевожу самые интересные статьи для вас. Их уровень - это то, к чему мы все можем стремиться!

Дэвид очень сильно скучал по отчету Скорость загрузки сайта (Site Speed Report), поэтому решил скопировать текущие показатели и логику из Universal Analytics в Google Analytics 4, а решением поделиться с нами.

Скорость загрузки сайта (Site Speed Report) в Universal Analytics

Для этого мы будем использовать Google Tag Manager.

Содержание

Пользовательский HTML тег

Перейдите в раздел Теги и создайте тег типа Пользовательский HTML. Вставьте в него нижеприведенный код:

<script>
(function() {

var siteSpeedSampleRate = 100;
var gaCookiename = '_ga';
var dataLayerName = 'dataLayer';

// No need to edit anything after this line
var shouldItBeTracked = function(siteSpeedSampleRate) {
// If we don't pass a sample rate, default value is 1
if (!siteSpeedSampleRate)
siteSpeedSampleRate = 1;
// Generate a hashId from a String
var hashId = function(a) {
var b = 1, c;
if (a)
for (b = 0,
c = a.length - 1; 0 <= c; c--) {
var d = a.charCodeAt(c);
b = (b << 6 & 268435455) + d + (d << 14);
d = b & 266338304;
b = 0 != d ? b ^ d >> 21 : b
}
return b
}
var clientId = ('; ' + document.cookie).split('; '+gaCookiename+'=').pop().split(';').shift().split(/GA1\.[0-9]\./)[1];
if(!clientId) return !1;
// If, for any reason the sample speed rate is higher than 100, let's keep it to a 100 max value
var b = Math.min(siteSpeedSampleRate, 100);
return hashId(clientId) % 100 >= b ? !1 : !0
}

if (shouldItBeTracked(siteSpeedSampleRate)) {
var pt = window.performance || window.webkitPerformance;
pt = pt && pt.timing;
if (!pt)
return;
if (pt.navigationStart === 0 || pt.loadEventStart === 0)
return;
var timingData = {
"page_load_time": pt.loadEventStart - pt.navigationStart,
"page_download_time": pt.responseEnd - pt.responseStart,
"dns_time": pt.domainLookupEnd - pt.domainLookupStart,
"redirect_response_time": pt.fetchStart - pt.navigationStart,
"server_response_time": pt.responseStart - pt.requestStart,
"tcp_connect_time": pt.connectEnd - pt.connectStart,
"dom_interactive_time": pt.domInteractive - pt.navigationStart,
"content_load_time": pt.domContentLoadedEventStart - pt.navigationStart
};
// Sanity Checks if any value is negative abort
if (Object.values(timingData).filter(function(e) {
if (e < 0)
return e;
}).length > 0)
return;
window[dataLayerName] && window[dataLayerName].push({
"event": "performance_timing",
"timing": timingData
})
}
}
)()
</script>

(function() {

var siteSpeedSampleRate = 100;

var gaCookiename = '_ga';

var dataLayerName = 'dataLayer';

// No need to edit anything after this line

var shouldItBeTracked = function(siteSpeedSampleRate) {

// If we don't pass a sample rate, default value is 1

if (!siteSpeedSampleRate)

siteSpeedSampleRate = 1;

// Generate a hashId from a String

var hashId = function(a) {

var b = 1, c;

if (a)

for (b = 0,

c = a.length - 1; 0 <= c; c--) {

var d = a.charCodeAt(c);

b = (b << 6 & 268435455) + d + (d << 14);

d = b & 266338304;

b = 0 != d ? b ^ d >> 21 : b

}

return b

}

var clientId = ('; ' + document.cookie).split('; '+gaCookiename+'=').pop().split(';').shift().split(/GA1\.[0-9]\./)[1];

if(!clientId) return !1;

// If, for any reason the sample speed rate is higher than 100, let's keep it to a 100 max value

var b = Math.min(siteSpeedSampleRate, 100);

return hashId(clientId) % 100 >= b ? !1 : !0

}

if (shouldItBeTracked(siteSpeedSampleRate)) {

var pt = window.performance || window.webkitPerformance;

pt = pt && pt.timing;

if (!pt)

return;

if (pt.navigationStart === 0 || pt.loadEventStart === 0)

return;

var timingData = {

"page_load_time": pt.loadEventStart - pt.navigationStart,

"page_download_time": pt.responseEnd - pt.responseStart,

"dns_time": pt.domainLookupEnd - pt.domainLookupStart,

"redirect_response_time": pt.fetchStart - pt.navigationStart,

"server_response_time": pt.responseStart - pt.requestStart,

"tcp_connect_time": pt.connectEnd - pt.connectStart,

"dom_interactive_time": pt.domInteractive - pt.navigationStart,

"content_load_time": pt.domContentLoadedEventStart - pt.navigationStart

};

// Sanity Checks if any value is negative abort

if (Object.values(timingData).filter(function(e) {

if (e < 0)

return e;

}).length > 0)

return;

window[dataLayerName] && window[dataLayerName].push({

"event": "performance_timing",

"timing": timingData

})

}

)()

</script>

Текущий код позволяет вам даже установить частоту выборки siteSpeedSampleRate (Universal Analytics). Но чтобы не нарушить его работу, оставьте все значения по умолчанию.

Название тега можете задать Tool - Performance Timing Tracking, а в качестве триггера активации нужно выбрать Окно загружено (Window Loaded). В диспетчере тегов это будет выглядеть так:

Тег "Пользовательский HTML"

Этот код поместит все данные о метриках, измеряющих скорость загрузки сайта, в уровень данных (dataLayer). Эту информацию вы дальше будете использовать в теге события Google Analytics 4.

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

Пример данных в dataLayer:

{
event: 'performance_timing',
timing: {
page_load_time: 1952,
page_download_time: 5,
dns_time: 0,
redirect_response_time: 1,
server_response_time: 874,
tcp_connect_time: 0,
dom_interactive_time: 1279,
content_load_time: 1279
}
}

{

event: 'performance_timing',

timing: {

page_load_time: 1952,

page_download_time: 5,

dns_time: 0,

redirect_response_time: 1,

server_response_time: 874,

tcp_connect_time: 0,

dom_interactive_time: 1279,

content_load_time: 1279

}

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

Теперь вам необходимо создать пользовательские переменные типа Переменная уровня данных. Всего их будет 8 штук:

timing.page_load_time
timing.page_download_time
timing.dns_time
timing.redirect_response_time
timing.server_response_time
timing.tcp_connect_time
timing.dom_interactive_time
timing.content_load_time

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

Восемь переменных уровня данных

В результате вы должны получить список из восьми переменных уровня данных:

Список переменных уровня данных

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

Перейдите в раздел Триггеры и создайте триггер специального события с названием события performance_timing:

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

Тег события GA4

Заключительным шагом настройки в GTM является создание тега типа Google Аналитика: событие GA4 с такой конфигурацией:

Тег конфигурации - Google Analytics 4

Название события - performance_timing

Параметры события

page_load_time
page_download_time
dns_time
redirect_response_time
server_response_time
tcp_connect_time
dom_interactive_time
content_load_time

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

Итоговый тег события GA4 в Google Tag Manager будет выглядеть так:

Тег события GA4

Сохраните изменения и опубликуйте контейнер.

Специальные показатели в Google Analytics 4

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

Для этого перейдите в интерфейс вашего счетчика Google Analytics 4 и на уровне ресурса откройте раздел Специальные определения:

Специальные определения

Перейдите на вкладку Специальные показатели и создайте восемь штук со следующими данными:

Область действия - Событие
Единица измерения - Миллисекунды
Параметр события - точно такой же, как вы прописали в теге события GA4
Название показателя

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

Список специальных показателей

Расшифровка показателей

Список показателей, которые вы можете настроить и использовать для репликации старых отчетов Universal Analytics с помощью решения Дэвида Вальехо:

Page Load Time (мс) в GA4 - Среднее время загрузки страницы (сек) в GA3
Domain Lookup Time (мс) в GA4 - Среднее время поиска домена (сек) в GA3
Page Download Time (мс) в GA4 - Среднее время загрузки страницы (сек) в GA3
Redirection Time (мс) в GA4 - Среднее время переадресации (сек) в GA3
Server Connection Time (мс) в GA4 - Среднее время соединения с сервером (сек) в GA3
Server Response Time (мс) в GA4 - Среднее время ответа сервера (сек) в GA3
Document Interactive Time (мс) в GA4 - Среднее время взаимодействия с документом в GA3
Document Content Loaded Time (мс) в GA4 - Среднее время загрузки содержания документа (сек) в GA3

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

Показатели в миллисекундах в Universal Analytics

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

Показатели в стандартном отчете Google Analytics 3

В интерфейсе Google Analytics 4 мы создали специальные показатели, но влиять на итоговой тип агрегации мы в отчетах не можем. Зато это можно сделать в Looker Studio (Google Data Studio). Как? Разберем чуть позже.

Отладки события

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

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

Данные о событии и параметрах в DebugView

Отчетность

Исследование

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

Исследование со специальными показателями

Looker Studio (Google Data Studio)

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

Отчет по скорости загрузки в Looker Studio

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

Автоматически созданные показатели Average в источнике данных Google Analytics

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

Google BigQuery

А для самых продвинутых аналитиков Дэвид в своей статье приводит пример SQL-запроса для Google BigQuery. При условии, что у вас установлена связь Google Analytics 4 и BigQuery, вы можете повторить пример его запроса.

Сколько и какие страницы загружались более 1 секунды:

SELECT * ,
FROM `osipenkovru-373609.analytics_206854065.events_20230301`
WHERE event_name = "performance_timing" AND 
(SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'page_load_time') > 1000

SELECT * ,

FROM `osipenkovru-373609.analytics_206854065.events_20230301`

WHERE event_name = "performance_timing" AND

(SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'page_load_time') > 1000

, где osipenkovru-373609.analytics_206854065.events_20230301 - датасет и таблица с вашими данными в BQ (эту строку вам следует заменить на свою).

В BigQuery результат запроса будет отображаться следующим образом:

Результат запроса в BigQuery

Примечание: если вам необходимо выполнить запрос сразу к нескольким таблицам BigQuery (диапазону дат), то используйте конструкцию с _TABLE_SUFFIX

Принцип работы siteSpeedSample

В конце статьи Дэвид поясняет принцип работы своего кода и того, как отслеживаются показатели времени загрузки в Universal Analytics на основе частоты выборки (siteSpeedSample). Ожидалось, что Google Analytics будет делать расчет и выборку на основе хитов (hits). Но на самом деле выборка выполняется для пользователей (устройств).

Это означает, что вместо получения данных о 5% просмотров страниц вы получаете информацию о 5% посетителей. Universal Analytics полагается на значение уникального идентификатора пользователя Client ID, чтобы определить, должен ли текущий пользователь отправлять данные о времени загрузки.

Схема работы

Метки: Google Analytics 4, Google BigQuery, Google Tag Manager, Looker Studio, Исследования, специальные показатели

Отслеживание производительности в Google Analytics 4

Пользовательский HTML тег

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

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

Тег события GA4

Специальные показатели в Google Analytics 4

Расшифровка показателей

Отладки события

Отчетность

Исследование

Looker Studio (Google Data Studio)

Google BigQuery

Принцип работы siteSpeedSample

Получайте бесплатные уроки и фишки

Еще статьи