Как отследить длительность показа элементов на экране с помощью Google Tag Manager?

Почему важно анализировать время видимости элементов на странице?

Анализ времени видимости элементов на странице позволяет понять, насколько эффективно пользователи взаимодействуют с контентом. Если важный элемент (например, CTA-кнопка или баннер) находится в поле зрения пользователя недостаточно долго, это может указывать на проблемы с дизайном, расположением элемента или общей структурой страницы.

Как отслеживание времени показа элементов помогает улучшить UX и конверсию?

Отслеживание времени показа элементов позволяет:

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

Обзор методов отслеживания времени видимости: Intersection Observer API и Google Tag Manager

Существует несколько способов отслеживания времени видимости элементов. Один из наиболее эффективных и современных — использование Intersection Observer API в сочетании с Google Tag Manager (GTM). Intersection Observer API предоставляет возможность асинхронно отслеживать изменения пересечения элемента с другим элементом (например, окном просмотра) или с другим элементом-родителем. GTM позволяет легко развертывать и управлять кодом отслеживания без необходимости изменения кода сайта.

Настройка Intersection Observer API для отслеживания видимости

Объяснение Intersection Observer API: основные параметры и функции

Intersection Observer API предоставляет следующие основные параметры:

• root: Элемент, относительно которого происходит отслеживание пересечения. По умолчанию — окно просмотра.
• rootMargin: Отступы вокруг root элемента, которые используются для расширения или сужения зоны видимости.
• threshold: Массив пороговых значений (от 0 до 1), определяющих, какая часть элемента должна быть видна, чтобы сработал колбэк.

Основные функции:

• observe(element): Начинает отслеживание указанного элемента.
• unobserve(element): Прекращает отслеживание указанного элемента.
• disconnect(): Прекращает отслеживание всех элементов.

Создание JavaScript-кода для отслеживания времени видимости элемента

/**
 * @param {string} elementId - ID элемента для отслеживания.
 * @param {number} threshold - Порог видимости (от 0 до 1).
 * @param {string} dataLayerEventName - Название события для передачи в Data Layer.
 */
function trackElementVisibility(elementId, threshold, dataLayerEventName) {
  const element = document.getElementById(elementId);
  if (!element) {
    console.warn(`Element with ID '${elementId}' not found.`);
    return;
  }

  let startTime = null;
  let isVisible = false;

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          if (!isVisible) {
            isVisible = true;
            startTime = Date.now();
          }
        } else {
          if (isVisible) {
            isVisible = false;
            const endTime = Date.now();
            const visibilityDuration = endTime - startTime;

            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
              'event': dataLayerEventName,
              'elementId': elementId,
              'visibilityDuration': visibilityDuration,
            });
          }
        }
      });
    },
    {
      threshold: threshold,
    }
  );

  observer.observe(element);
}

Пример кода: отслеживание видимости баннера или CTA-элемента

trackElementVisibility('my-banner', 0.5, 'bannerVisibility');
trackElementVisibility('cta-button', 0.8, 'ctaVisibility');

Интеграция с Google Tag Manager (GTM)

Создание пользовательского HTML-тега в GTM

В Google Tag Manager создайте новый тег типа «Пользовательский HTML».

Добавление JavaScript-кода Intersection Observer в тег

Вставьте JavaScript-код (например, функцию trackElementVisibility) в созданный HTML-тег. Оберните код в теги <script>.

Настройка триггеров для активации тега

Создайте триггер типа «DOM готов» или «Окно загружено», чтобы тег активировался после загрузки DOM или окна браузера. Это гарантирует, что элемент, который вы хотите отслеживать, уже существует на странице.

Создание переменных уровня данных (Data Layer) для передачи данных о времени видимости

В GTM создайте переменные уровня данных, соответствующие ключам, которые вы передаете в dataLayer.push (например, elementId и visibilityDuration). Тип переменной: «Переменная уровня данных». Укажите имя ключа как «Имя переменной уровня данных».

Конфигурация тегов Google Analytics через GTM

Создание тега события в Google Analytics

Создайте новый тег в GTM типа «Google Analytics: событие».

Настройка параметров события (event category, event action, event label, event value) для передачи данных о времени видимости

Настройте параметры события:

• Категория события: Например, «Visibility».
• Действие события: Например, название элемента, который вы отслеживаете (можно использовать переменную уровня данных elementId).
• Ярлык события: Например, URL страницы.
• Значение события: Время видимости в миллисекундах (переменная уровня данных visibilityDuration). Обратите внимание, что event value должно быть числом. GTM будет автоматически конвертировать строку в число.

Активация тега с помощью триггера GTM, связанного с переменными Data Layer

Создайте триггер типа «Пользовательское событие». В поле «Имя события» укажите название события, которое вы передаете в dataLayer.push (например, bannerVisibility или ctaVisibility). Свяжите этот триггер с созданным тегом Google Analytics.

Анализ данных и отчетность

Просмотр данных о времени видимости в Google Analytics

В Google Analytics перейдите в раздел «Отчеты» -> «Поведение» -> «События». Здесь вы сможете увидеть данные о событиях, которые вы отправляете из GTM.

Создание пользовательских отчетов для анализа эффективности элементов

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

Интерпретация результатов и оптимизация элементов на странице

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