Как отслеживать всплывающие окна с помощью Google Tag Manager

Константин Булгаков
Константин Булгаков
25 Авг.2019
Как часто посетители вашего сайта взаимодействуют со всплывающими окнами? С помощью специального триггера Google Tag Manager можно отслеживать появление попапов и передавать данные о событиях в Google Analytics. Давайте разбираться!

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

  • Оформление покупки;
  • Заказ обратного звонка;
  • Подписка на рассылку;
  • Отправка контактных данных.

Отследить взаимодействие с pop-up стандартными способами не представляется возможным. В такие моменты на помощь приходит Google Tag Manager. С помощью триггера Доступность элемента система получит сигнал о вызове попапа и передаст событие в Google Analytics.

Шаг 1: Определяем уникальный селектор окна

Для начала определим тип селектора и его уникальное значение.

Вызываем появление окна на сайте и используем консоль разработчика Google Chorme (можно вызвать сочетанием клавиш Ctrl + Shift + I или просто F12), чтобы определить атрибут элемент.

Наводим курсор на окно и определяем уникальный идентификатор.

Определяем уникальный ID окна

В нашем случае появившееся окно имеет id="fancybox-content". Этот атрибут мы и укажем в настройках триггера. Менеджер тегов по уникальному значению определит, что посетитель открыл окно и передаст событие в Аналитикс.

Шаг 2: Настройка триггера

Переходим к созданию нового триггера.

  1. Входим в аккаунт в Google Tag Manager и открываем раздел Триггеры;
  2. Нажимаем кнопку Создать и выбираем из списка триггер Доступность элемента;
  3. В блоке Метод выбора добавляем атрибут элемента из прошлого шага;
  4. Устанавливаем правило запуска триггера;
  5. Отмечаем изменения в DOM;
  6. Указываем для триггера понятное название и сохраняем.

Настройка будет иметь такой вид.

Настройки триггера Доступность элемента

В нашем примеры мы используем Метод выбора именно Идентификатор, так как элемент содержит атрибут id="fancybox-content". Однако в вашем случае таким элементом может быть селектор CSS, если для попапа в стилях задан атрибут class.

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

  • Один раз на страницу. Триггер срабатывает на странице только один раз. Если на странице несколько элементов соответствуют атрибуту ID или селектору CSS, то триггер сработает только тогда, когда один из них впервые отобразится на странице. Если пользователь обновляет страницу или переходит на новую, триггер сбрасывается и может сработать повторно, если выбранный элемент снова появится.
  • Один раз на элемент. Триггер срабатывает для выбранного элемента на странице только один раз. Если на странице несколько элементов соответствуют селектору CSS, то триггер будет срабатывать, когда каждый из них впервые отображается на странице. Если у нескольких элементов на странице совпадает атрибут ID, триггер сработает только для первого подходящего элемента. Однако когда включена функция Регистрация изменений DOM в разделе Расширенные настройки, этот вариант может вызвать повторное срабатывание триггера, если первый подходящий элемент был удален функцией регистрации изменений DOM. Когда пользователь обновляет страницу или переходит на новую, триггер сбрасывается и может сработать повторно, если выбранный элемент снова появится.
  • При каждом появлении элемента на экране. Триггер будет срабатывать при каждом отображении подходящего элемента.

Почитать подробнее про настройки триггера Доступность элемента можно в официальной справке от Google.

Шаг 3: Передача события в Google Analytics

С настройкой триггера разобрались. Теперь переходим к созданию тега и передачи события в Google Analytics.

  1. Переходим в раздел меню Теги и нажимаем Создать;
  2. Выбираем тип триггера Google Аналитика — Universal Analytics;
  3. В поле Тип отслеживания выбираем Событие;
  4. Указываем в свободной форме поля Категория и Действие;
  5. В поле Настройки Google Analytics добавляем переменную с идентификатором отслеживания Google Analytics;
  6. В нижнем блоке триггеры добавляем ранее созданные нами триггер Доступности элемента;
  7. Сохраняем и проверяем корректность настроек, используя режим Предварительного просмотра.

Получиться должно следующее:

Создание тега для GA

Чтобы вызвать режим Предварительного просмотра опубликуйте изменения и нажмите на кнопку Предварительный просмотр.

Где посмотреть статистику в Google Analytics

Чтобы просмотреть отчеты по событиям в Google Analytics, выполните действия:

  1. Войдите в аккаунт Google Analytics;
  2. Выберите нужное представление;
  3. Откройте Отчеты > Поведение > События.

Также отследить события можно в отчете В режиме реального времени — События. Отчет зафиксирует в реальном времени взаимодействие с контентом на сайте.

Не помогла статья?

Напишите ваш комментарий или вопрос в форме ниже. Попробуем разобраться, что не получилось.

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

Как отслеживать всплывающие окна с помощью Google Tag Manager: 1 комментарий

  1. Там небольшая ошибка. В идентификаторе вы указали значение со знаком решетка, т.е. #my_element_id, но как оказалось — нужно без неё, т.е. просто my_element_id.

    my_element_id — пример конечно

Добавить комментарий для Чип Дэйл Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *