Google Tag Manager. Руководство по настройке форм

Диспетчер тегов — сервис, который упрощает использование кодов сторонних служб на сайтах или в приложениях. Благодаря нему нам достаточно один раз добавить на сайт контейнер, после этого коды других служб можно добавлять через интерфейс диспетчера.

Так ли необходимо использовать GTM? Да, если вы постоянно добавляете на сайт коды различных сервисов и всерьез занимаетесь аналитикой, Tag Manager упростит вам работу.

Задачи, которые можно решить с помощью GTM

• установка кода ретаргетинга и ремаркетинга
• подтверждение прав на сайт
• установка кнопок шеринга
• мониторинг внутренних переходов
• отслеживание переходов по всем внешним ссылкам
• отслеживание переходов по конкретной внешней ссылке
• уточнение показателя отказов
• мониторинг отправки форм
• отслеживание кликов по социальным кнопкам и виджетам
• отслеживание кликов по элементам с тем или иным текстом
• мониторинг конкретных источников внешнего трафика

Несколькими статьями ранее мы рассматривали возможность отслеживания показателя отказов с помощью таймера установленного через GTM. А сейчас хотим показать, как можно отслеживать клики по элементам и настраивать отслеживание отправки форм.

Настройка Google Tag Manager

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

Код GTM можно найти в интерфейсе, для этого достаточно кликнуть на номер контейнера.

Рис 1. Поиск кода контейнера GTM

Далее следуя инструкциям из всплывающего окна установить код контейнера на сайт.

Рис 2. Инструкция по установке кода контейнера

После того как GTM установлен на сайте и правильно функционирует, нужно настроить пользовательские и встроенные переменные, триггеры и теги.

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

Активация тегов в диспетчере происходит, когда значение триггера совпадает с заданной пользователем переменной. Например, встроенная переменная Click Text всегда содержит какой-либо текст, а переменная Click URL — URL. В данном случае триггер активируется, если значение переменной совпадает с заданными параметрами: кликом по элементу с указанным текстом или URL.

Нам доступны следующие типы встроенных переменных:

Страницы:

В качестве переменной вы можете выбрать полный URL (Page URL), относительный URL (Page Path), имя хоста страницы (Page Hostname), источник запроса (Page Referrer).

Утилиты:

Этот тип переменных включает события, ID и версию контейнера, название рабочей области и ID HTML-тега.

Ошибки:

Этот тип встроенных переменных включает просмотр контейнера в режиме отладки, а также сообщение об ошибке, URL ошибки и номер строки ошибки.

Клики:

В качестве переменной можно использовать HTML-элементы, классы элементов, URL, текст элемента, атрибуты target и ID элемента.

Формы:

В качестве переменной можно использовать элементы и классы формы, атрибуты target и href, а также текст формы.

История:

Этот тип переменных поддерживает активацию триггера при изменении хеша URL. В качестве переменной можно использовать новый и старый фрагменты URL, а также новое и старое состояние истории или источник истории.

Для того чтобы включить переменную, необходимо поставить галочку в чек-боксе возле ее названия.

Рис. 3. Основные стандартные переменные, которые нужны нам для отслеживание отправки форм

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

Рис 4. Создание собственной переменной

Рис. 5. Выбор конфигурации собственной переменной.

Настройка отслеживания простой формы через GTM.

С первичной настройкой тегов, триггеров и переменных не бывает проблем. Рассмотрим настройку отслеживания классической отправки формы, в 100% идеальных условиях, когда GTM сможет отловить форму с помощью стандартных переменных.

Для настройки отслеживания формы у нас должна быть активирована переменная «формы»

Рис.5. Активируем переменную From Classes

После активации переменной создаем триггер. В настройках указываем тип «Отправка формы».

Рис.6. Выбираем тип триггера

В настройках триггера переключаем галочку в положение «Некоторые формы». Укажите в качестве условий активации «Фильтр Form Classes содержит» и укажите значение атрибута class формы.

Рис. 8. Настройка активации триггера

Рис. 9. Поиск класса формы в коде сайта.

Далее создаем соответствующий тег Universal Analytics. Сохраняем изменения и опубликовываем контейнер. Работоспособность триггеров и тега проверяем в режиме предпросмотра.

Рис 10. Конфигурация настройки Тега

Настройка отслеживания нестандартных форм через GTM.

Однако через GTM не всегда отслеживание формы можно настроить рассмотренным выше примером.

Существуют формы, в которых невозможно поймать атрибут «Form Classes», тут на помощь к нам приходят пользовательские переменные.

Рассмотрим вид формы, в которой условием активации Тега отправки будет:

1) Успешное заполнение поля «Имя»
2) Успешное заполнения поля «Телефон»
3) Отправка формы при заполненных полях.

Для начала нужно создать пользовательскую переменную, в конфигурации выбрать параметр «Собственный Java Script»

Рис 11. Скрипт переменной для поля «Имя»

getElementsByName (“name”) в скрипте означает то, что мы будем считывать данные из поля с именем «name», в каждой форме она может называться по разному, поэтому как с классом форм, имя этого поля необходимо находить в коде сайте. То же самое проделываем для поля «телефон», и если есть с полем«email». Сохраняем и используем эти переменные в качестве условиий активации триггера формы.

Но этого недостаточно для правильной работы триггера, далее необходимо настроить клик на элемент, после которого идет отправка формы.

Рис 12. Конфигурация триггера с пользовательскими переменными

Обратите внимание на параметр «Поле Имени», в нем необходимо выбирать настройку «не соответствует регулярному выражению» ^$, которое означает, что поле должно быть обязательно «не пустым». Элемент, по которому происходит клик в нашем случае – это кнопка «Отправить», еге настраиваем через атрибут «Click Text». Сохраняем триггер и после этого настраиваем тэг на отправку формы, так же как в первом случае.

Далее настраиваем Тэг отправки формы, по только что настроенному триггеру.

Рис. 13. Конфигурация Тэга на отправку формы.

Итог:

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

Диспетчер тегов упрощает мониторинг и аналитику эффективности сайта. С помощью набора встроенных и пользовательских переменных вы можете быстро настроить отслеживание практически любых событий на сайте.