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

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

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

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

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

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

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

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

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

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

Теперь перейдите в свою учетную запись Диспетчера тегов Google .

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

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

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

Вы добавили шаблон тега в контейнер Диспетчера тегов Google.

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

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

4. Примените один из триггеров просмотра страниц , например триггер «Все страницы».
5. При необходимости добавьте также триггерные исключения .
6. Назовите тег «Основные веб-показатели — все страницы» и сохраните его.

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

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

1. Взаимодействуйте со страницей, прокручивая и нажимая на элементы или пустые места.
2. Затем вернитесь на вкладку с Tag Assistant и режимом предварительного просмотра Диспетчера тегов Google.
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 перейдите в раздел «Триггеры».
2. Добавьте новый триггер, нажав «Новый», затем «Конфигурация триггера» и выберите «Пользовательское событие» в разделе «Другое».
3. Установите «web_vitals» в поле «Имя события», назовите триггер и сохраните.

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

1. В рабочей области Диспетчера тегов Google перейдите в раздел «Переменные».
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 перейдите в раздел «Теги».
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. Укажите URL-адрес Tag Assistant и нажмите «Подключиться».

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

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

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

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

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

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

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

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

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

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

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

4. Ознакомьтесь с условиями и нажмите «Подтвердить».
5. Сохраните обновление.
6. Зайдите в «Администратор» -> «Связанные аккаунты» -> «Google Analytics 4».
7. Нажмите «Новая ссылка на ресурс Google Аналитики 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. Выполните следующие действия, чтобы сопоставить основные веб-показатели и доходы от рекламы.

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

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

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

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

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

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

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

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

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