Триггер GTM —  доступность элемента

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

С помощью триггера можно фиксировать появление новых элементов на экране. Вы можете отслеживать динамические элементы, которые подгружаются на страницу при помощи ajax.

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

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

Как настроить?

Рассмотрим на примере моего блога. На странице контакты есть форма для заявки. После успешной отправки, на страницу, подгружается блок с информацией об успешной отправке. Появление этого блока мы будем отслеживать.

Определяем класс элемента который появляется после отправки формы

В GTM создаем триггер доступность элементов

Настраиваем триггер

1 — Метод выбора, выбираем селектор css

2 — Селектор элементов прописываем класс, нашего элемента

3 — Правило запуска триггера, при каждом появлении элемента на экране (тут смотрите сами как вам надо)

4 — Минимальный процент видимости, можно задать процент видимости элемента при котором триггер активируется, чем меньше процент тем быстрее он активируется.

5 — Регистрация изменений DOM, поставьте галочку, чтобы GTM фиксировал происходящие на странице изменения.

Теперь мы можем использовать этот триггер для активации тегов

Создадим пользовательский тег с алертом, который будет выводить надпись “оно работает” в случае срабатывания тега. В качестве триггера укажем созданный на предыдущем шаге триггер.

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

Для тестирования отправляем форму.

Как видите у нас появился блок с благодарностью, сработал триггер “доступность элемента” этот триггер активировал тег с алертом “оно работает”

Вместо пользовательского html тега вы можете использовать стандартный тег universal analytics. С его помощью можно отправить данные в аналитикс и зафиксировать достижение цели при отправке форм.

О том как настроить теги universal analytics для передачи данных из GTM в GA читайте в статье Настройка  и подключение GTM. Часть 2 — Передача данных об отправке форм