Измерение данных полей Core Web Vitals с помощью показателей рекламы

1. Прежде чем начать

В этом практическом занятии вы научитесь измерять основные показатели веб-активности (Core Web Vitals) с помощью готового шаблона тега Google Tag Manager (GTM) и отправлять данные в Google Analytics 4 (GA4) . Вы также узнаете, как извлекать данные из Google Ad Manager и Google AdSense в GA4, чтобы сопоставлять данные полей Core Web Vitals и показатели эффективности рекламы с готовой панелью мониторинга Looker Studio.

Что вы будете делать

• Импортируйте и настройте тег в контейнере Google Tag Manager.
• Измерьте основные показатели веб-страницы (Core Web Vitals) в GA4.
• Настройте тег события GA4 в Google Tag Manager.
• Изучите данные веб-статистики в слое dataLayer и в отчетах GA4.
• Свяжите свой ресурс GA4 с Google Ad Manager и Google AdSense.
• Сопоставьте основные показатели веб-трафика и доход от рекламы с помощью панели мониторинга Looker Studio.

Что вам понадобится

• Аккаунт Google Analytics и веб-ресурс GA4 с доступом для редактирования.
• Аккаунт Google Tag Manager и веб-контейнер с правами на публикацию.
• Для работы требуется аккаунт в сети Google Ad Manager и/или Google AdSense с правами администратора.
• Аккаунт Looker Studio.

2. Добавьте шаблон тега из GitHub в GTM.

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

1. Откройте файл template.tpl
2. Загрузите файл на свой компьютер.

Теперь перейдите в свой аккаунт Google Tag Manager .

1. Откройте свой веб-контейнер.
2. Создайте новое рабочее пространство и введите имя (например, "Core Web Vitals measurement").
3. Перейдите в раздел «Шаблоны».
4. В разделе «Шаблоны тегов» нажмите кнопку «Создать».

5. Щелкните меню «Дополнительные действия» и выберите «Импорт».

6. Выберите ранее загруженный файл TPL на вашем компьютере.
7. Нажмите кнопку «Сохранить».

Вы добавили шаблон тега в контейнер Google Tag Manager.

3. Настройте тег Web Vitals.

1. В рабочей области Google Tag Manager перейдите в раздел "Теги".
2. Чтобы добавить тег Web Vitals, нажмите «Создать», затем «Конфигурация тега» и выберите тег «Web Vitals» в разделе «Пользовательский».
3. Следующий шаг — настройка различных параметров. Все настройки описаны в репозитории GitHub . Для корректной работы этого практического занятия и итоговой панели мониторинга достаточно следующих настроек.

4. Примените один из триггеров просмотра страниц , например, триггер «Все страницы».
5. При необходимости добавьте также возможность запуска исключений .
6. Назовите тег "Core Web Vitals - All Pages" и сохраните его.

4. Изучите данные Web Vitals в dataLayer.

Чтобы увидеть тег в действии, переключитесь в режим предварительного просмотра Google Tag Manager. Откроется Tag Assistant, который запросит URL-адрес для предварительного просмотра и отладки вашей настройки. Укажите URL-адрес страницы с реализованным контейнером Google Tag Manager и нажмите «Подключить». Откроется отдельная вкладка с указанным URL-адресом.

1. Взаимодействуйте со страницей, прокручивая ее и щелкая по элементам или пустым пространствам.
2. Затем вернитесь на вкладку с помощником по тегам и режимом предварительного просмотра Google Tag Manager.
3. Слева вы увидите различные события, передаваемые в dataLayer .
4. Для начала следует проверить, сработал ли тег Web Vitals при выборе триггера просмотра страницы.

5. Вы также должны увидеть три события "web_vitals", каждое из которых представляет собой один ключевой веб-элемент: LCP, INP и CLS.

6. Щёлкните по первому элементу, и справа откройте вкладку "Вызов API", где вы увидите данные, передаваемые из шаблона тега в dataLayer .

7. Проверьте также другие записи событий "web_vitals". Используйте документацию web-vitals.js в качестве справочника по различным типам данных.

5. Отправка данных Web Vitals в GA4.

Для извлечения данных Core Web Vitals из dataLayer и отправки их в GA4 необходимо:

• Создайте триггер для тега GA4.
• Создайте переменные для извлечения данных из dataLayer
• Создайте тег события GA4.

Создайте триггер

1. В рабочей области Google Tag Manager перейдите в раздел «Триггеры».
2. Чтобы добавить новый триггер, нажмите «Создать», затем «Конфигурация триггера» и выберите «Пользовательское событие» в разделе «Другое».
3. В поле «Имя события» укажите «web_vitals», назовите триггер и сохраните.

Создайте переменные dataLayer.

1. В рабочей области Google Tag Manager перейдите в раздел «Переменные».
2. Создайте новую пользовательскую переменную типа "Переменная уровня данных".
3. В поле «Имя переменной уровня данных» укажите «webVitalsData.name», присвойте переменной имя (например, «DLV - webVitalsData.name») и сохраните.

4. Повторите эти шаги для остальных четырех необходимых переменных слоя данных. Создайте переменную "webVitalsData.value".

5. Создайте еще одну переменную с именем поля "webVitalsData.id".

6. Создайте файл "webVitalsData.rating".

7. Создайте файл "webVitalsData.delta".

8. В результате у вас должны получиться следующие пользовательские переменные dataLayer :

Создайте тег события GA4.

Перед созданием тега события GA4 убедитесь, что ваш тег Google уже настроен .

1. В рабочей области Google Tag Manager перейдите в раздел "Теги".
2. Чтобы добавить тег события GA4, нажмите «Создать», затем «Настройка тега» и выберите тег «Google Analytics: событие GA4» в разделе «Google Analytics».
3. Введите идентификатор вашего измерения в соответствующее поле.

4. Для поля ввода "Название события" выберите переменную dataLayer "DLV - webVitalsData.name" из ранее созданного шага.

5. Добавьте другие переменные dataLayer в качестве параметров событий, как показано на скриншоте. Также убедитесь, что добавили параметр "event_category" со значением, например, "Web Vitals", чтобы сгруппировать события Core Web Vitals.

6. Зарегистрируйте эти параметры событий в качестве пользовательских измерений в пользовательском интерфейсе GA4.
7. Примените дополнительные настройки в соответствии с требованиями вашей конфигурации GA4.
8. Установите пользовательское событие "web_vitals" в качестве триггера для тега GA4.
9. При необходимости добавьте также возможность запуска исключений .

6. Проверьте данные в GA4.

Для проверки потока данных в GA4 снова переключитесь в режим предварительного просмотра Google Tag Manager. Укажите URL-адрес в Tag Assistant и нажмите «Подключить».

1. Взаимодействуйте со страницей, прокручивая ее и щелкая по элементам или пустым пространствам.
2. Затем вернитесь на вкладку с помощником по тегам и режимом предварительного просмотра Google Tag Manager.
3. Слева щелкните по каждой записи "web_vitals" и убедитесь, что сработал тег GA4 Core Web Vitals.

4. Откройте тег GA4, щелкнув по карточке, чтобы убедиться, что данные корректно извлекаются из dataLayer . Убедитесь, что переменные отображаются как значения.

5. Теперь переключитесь на свойства вашей системы GA4 и откройте отчет в режиме реального времени .
6. В карточке «Количество событий по названию события» вы можете проверить, успешно ли собраны события Core Web Vitals.

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

7. Опубликуйте свои настройки.

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

1. Откройте свою рабочую область Google Tag Manager.
2. В правом верхнем углу интерфейса нажмите кнопку «Отправить».
3. Укажите название и описание версии и загрузите свою установку, нажав кнопку «Опубликовать».

8. Подключите GA4 к Google Ad Manager или Google AdSense.

После сбора данных Core Web Vitals в GA4, для корректной работы панели мониторинга также должны быть доступны метрики, связанные с рекламой. Подключите к GA4 либо Google Ad Manager и Google AdSense, либо только одно из этих рекламных решений. Обратите внимание, что для подключения вам необходимы права редактора (или выше) в GA4 и права администратора в Google Ad Manager и Google AdSense.

Подключите GA4 к Google Ad Manager

1. Перейдите в свою рекламную сеть Google Ad Manager.
2. Нажмите «Администрирование» -> «Глобальные настройки» -> «Сетевые настройки».
3. В разделе «Настройки отчетов» включите параметр «Отчеты по ресурсам Google Analytics 4 в отчетах Ad Manager».

4. Ознакомьтесь с условиями и положениями и нажмите «Подтвердить».
5. Сохраните обновление.
6. Перейдите в раздел «Администрирование» -> «Связанные учетные записи» -> «Google Analytics 4».
7. Нажмите на ссылку «Новый ресурс Google Analytics 4».
8. Найдите и выберите объект недвижимости GA4, который хотите связать.
9. Нажмите «Сохранить», и готово.

Подключите GA4 к Google AdSense

1. Перейдите в свой аккаунт Google AdSense.
2. Нажмите «Аккаунт» -> «Доступ и авторизация» -> «Интеграция с Google Analytics».
3. Нажмите "+Новая ссылка".

4. Найдите и выберите объект недвижимости GA4, который хотите связать.
5. Нажмите «Создать ссылку».

9. Визуализируйте данные с помощью Looker Studio.

Для визуального представления данных Core Web Vitals вместе с рекламными показателями на этом этапе необходимо настроить панель мониторинга Looker Studio. Пожалуйста, выполните следующие шаги, чтобы сопоставить данные Core Web Vitals с доходом от рекламы.

1. Откройте этот шаблон панели управления Looker Studio.
2. Скопируйте панель управления .
3. Обновите источник данных, выбрав свой объект GA4 из выпадающего списка.
4. Сделанный

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

На первой странице панели управления вы найдете исторический обзор показателей производительности Core Web Vitals:

На второй странице вы можете сопоставить показатели Core Web Vitals с доходом от рекламы в Google Ad Manager и/или Google AdSense:

На третьей странице вы можете анализировать производительность Core Web Vitals на уровне пути к странице вместе с показателями, связанными с рекламой:

10. Заключение

Поздравляем! Вы научились измерять и анализировать основные показатели веб-показателей (Core Web Vitals) с помощью GA4, а также показатели эффективности рекламы из Google Ad Manager и Google AdSense.

Узнать больше

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