При настройке отслеживания микро и макро конверсий через Google Tag Manager очень часто возникают ситуации, когда без программиста не обойтись. В первую очередь, из-за отсутствия возможности настроить триггер через class либо ID элемента страницы, или другим известным методом.

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

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

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

Область применения триггера “Доступность элемента”

Доступность элемента очень хорошо решает задачу настройки событий, когда при отправке формы либо выполнения другого целевого действий появляется pop-up окно или сообщение, которое сообщает об успешности выполнения действия.

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

Пример на сайте allo.ua, после отправки формы на странице “Контакты”.

Как настроить триггер "Доступность элемента" в Google Tag Manager: пошаговый мануал
Т.е. тип триггера “Доступность элемента” срабатывает только в случае, если определенный элемент страницы доступен пользователю.

Как настроить отслеживание через доступность элемента

  1. В первую очередь необходимо создать новый триггер со следующими параметрами:

    Тип триггера: Доступность элемента.
    Метод выбора: Селектор CSS.

  2. Как настроить триггер "Доступность элемента" в Google Tag Manager: пошаговый мануал

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

    Получить его достаточно просто. Нужно выполнить 3 простых шага:

    • Нажать правой кнопкой мыши на блоке, который появляется в результате выполнения события.
    • Нажать правой кнопкой мыши на коде элемента и выбрать Copy -> Copy selector
    • Значение будет добавлено в буфер обмена, далее его нужно вставить в поле “Селектор элемента”.

    Как настроить триггер "Доступность элемента" в Google Tag Manager: пошаговый мануал

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

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

  4. Как настроить триггер "Доступность элемента" в Google Tag Manager: пошаговый мануал

  5. Следом необходимо определить правила запуска триггера:
    • Один раз на страницу: если несколько элементов на данной странице сопоставляются с помощью селектора CSS, этот триггер сработает только при первом отображении одного из них на этой странице.
    • Один раз на элемент: если несколько элементов на данной странице сопоставляются с помощью селектора CSS, этот триггер сработает при первом отображении каждого из них на этой странице.
    • При каждом появлении элемента на экране: этот триггер срабатывает каждый раз, когда соответствующий элемент становится видимым.
  6. Указываем дополнительные значения.
    • Указываем минимальный процент видимости. Чем ниже процент, тем скорее сработает триггер. Увеличивая процент, мы делаем условие активации более строгим.
    • Указываем минимальное время видимости. Это время, которое мы должны наблюдать необходимый элемент до того, как триггер сработает. Чем меньше время, тем скорее сработает триггер.
    • Если необходимый элемент является динамически отображаемым (т.е. он возникает при предварительном взаимодействии со страницей, изначально не отображаясь на ней), то в настройке триггера так же необходимо поставить отметку “Регистрация изменений DOM”.
  7. В итоге должен получиться триггер с настройками:
  8. Как настроить триггер "Доступность элемента" в Google Tag Manager: пошаговый мануал

  9. Теперь создаем тег, который будет отправлять данные в Google analytics. Создать его необходимо также как и для других событий.

    Тип тега: Google Аналитика — Universal Analytics.
    Тип отслеживания: Событие.
    Категория: произвольное значение.
    Действие: произвольное значение.
    Ярлык: {{Page URL}} — это чтобы в ярлыке можно было увидеть url-адрес на котором сработало событие.

  10. Как настроить триггер "Доступность элемента" в Google Tag Manager: пошаговый мануал
    И указываем триггер, который мы создали ранее.

    Как проверить реализацию?

    После выполнения всех указанных настроек необходимо обязательно проверить корректность срабатывания события при помощи отладчика Google Tag Manager.

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

    Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.