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

Для контроля отправки форм будем использовать Google Tag Manager. Он позволяет, без привлечения программиста, настроить отслеживание необходимых целевых действий на страницах сайта.

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

1. Формы на Ajax с применением jQuery

Проверяем подключена ли библиотека jQuery в коде страницы

Для удобства вот букмарклет 'Проверка jQuery', который автоматически проверят подключена ли библиотека jQuery и выдает соответствующее сообщение

Проверка наличия jQuery через букмарклет

Библиотека jQuery содержит стандартную функцию API - .ajaxSuccess(), она поможет отслеживать ajax-запросы. В случае успешной отправки на сервер ajax-запроса, будет вызвана callback-функция .ajaxSuccess(), которая в качестве аргументов получит все необходимые для идентификации формы данные. Вот пример кода функции:

$(document).ajaxSuccess(function(event, request, settings) {
    dataLayer.push({
        'event': 'ajaxSuccess',
        'ajaxSuccessOptions': {
            'url': settings.url || '',
            'options': settings.data || '',
            'responseText': request.responseText || ''
        }
    });
});

Разберемся немного в теории

Начиная с версии jQuery 1.9 использовать метод ajaxSuccess можно только с объектом document. Параметры event, request, settings можно переименовать (в таком случае не забудьте переименовать соответствующие переменные в теле функции).

Полученные данные об ajax-запросе нужно добавить в массив GTM, который по-умолчанию называется dataLayer (что в переводится как 'уровень данных'). GTM будет брать данные из dataLayer, что позволит оперировать ими в визуальном интерфейсе инструмента, а оттуда передавать в Google Analytics.

dataLayer поддерживает все стандартные методы массивов в JavaScript. Добавляем в dataLayer объект с данными об ajax-запросе с помощью метода push(). Задаем свойства объекта в соответствии с синтаксисом языка 'свойство':'значение'. Свойству 'event' присваиваем значение 'ajaxSuccess' (имя свойства 'event' читается GTM по-умолчанию). В 'ajaxSuccessOptions' вкладываем объект со свойствами url, options и responseText. Это основной набор данных, который поможет идентифицировать передачу ajax-запроса по конкретной форме

Перейдем к настройке в Google Tag Manager:

1.1. Создаем 'Пользовательский тег' и вставляем код:

<script>
$(document).ajaxSuccess(function(event, request, settings) {
    dataLayer.push({
        'event': 'ajaxSuccess',
        'ajaxSuccessOptions': {
            'url': settings.url || '',
            'options': settings.data || '',
            'responseText': request.responseText || ''
        }
    });
});
</script>

Настройка пользовательского тега GTM для ajaxSuccess

1.2. Задаем в теге триггер 'Модель DOM готова', чтобы структура страницы успела загрузиться и не возникло ошибок выполнения JavaScript

1.3. В пользовательских переменных создаем 'Переменная уровня данных'.

В поле 'Имя переменной уровня данных' задаем значение по которому будет идентифицироваться форма.

Например, у меня это 'ajaxSuccessOptions.url'. Такая настройка позволила получить URL, на который был отправлен ajax-запрос, и идентифицировать определенную форму. Иногда может понадобиться комбинация нескольких переменных

1.4. Создаем тег 'Google Аналитика – Universal Analytics'.

Выбираем 'Тип отслеживания' - 'Событие'

Задаем удобные значения для полей 'Категория' и 'Действие'. После настройки цели в Google Analtyics, аналитика будет ожидать эти значения, и в случае их поступления в таком пересечении категория/действие, будет засчитано достижение цели.

1.5. Создаем и подключаем триггер 'Пользовательское событие'

Для 'Имя события' задаем значение 'ajaxSuccess'. Чтобы триггер срабатывал при каждом появлении события 'ajaxSuccess' в dataLayer.

Включаем кнопку 'Использовать регулярные выражения'.

В 'Условия активации триггера' выбираем 'Некоторые специальные события'

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

Создание триггера пользовательского события

2. Формы на базе HTML-элемента <form>

Этот способ подойдет, если не к чему привязаться - при отправке формы ничего не изменяется. Однако, в данном случае ошибки отправки данных могут обрабатываться по-разному. Если валидация формы настроены на стороне клиента, то будут регистрироваться только успешно отправленные формы. Если же обработка происходит на стороне сервера, то в Google Analytics могут передаться сведения о неуспешных отправках формы.

2.1. Создаем триггер 'Отправка формы'

2.2. Привязываемся к удобной переменной. Например, Form Classes - отслеживание формы будет происходить по ее классу. Класс элемента можно получить в коде страницы - это значение атрибута 'class'

3. Формы, изменяющие внешний вид или выводящие сообщения

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

3.1. Создаем триггер 'Доступность элемента'.

В 'Метод выбора' указываем 'Селектор CSS'. Задаем селектор элемента, который появляется после успешной отправки формы.

Получить CSS-селектор можно, выбрав элемент окна с сообщением об успешной отправке формы. 'Посмотреть код' > правой кнопкой мыши на элемент в коде > 'Copy' > 'Copy Selector'

Для 'Правило запуска этого триггера' выбираем 'При каждом появлении элемента на экране'. Это позволит отслеживать несколько отправленных подряд заявок. Т. е. в случае, если пользователь не обновит страницу и закажет несколько раз.

В 'Минимальный процент видимости' задаем '1%'. Так как часто на мобильных устройствах сообщения об успешной отправке выходят за пределы нижней границы экрана устройства.

Включаем 'Регистрация изменений DOM'. Если этого не сделать, то наличие элемента в структуре документа страницы будет проверено только один раз - при загрузке страницы. Также нужно учитывать, что постоянный опрос DOM на наличие элемента в структуре создает дополнительную нагрузку на устройство пользователя, поэтому следует указывать 'узкий' css-селектор, который возвращает в результате поиска не более 1 элемента.

4. Формы без Ajax и не изменяющиеся при отправке

Этот способ самый легкий в настройке, но и отправки формы будут регистрироваться все - как успешные, так и нет.

2.3.1. Создаем триггер 'Все элементы'.

В 'Условия активации триггера' выбираем 'Некоторые клики'. В таком случае тег на отправку формы будет срабатывать каждый раз при нажатии на кнопку отправки.

Привязываемся к подходящей встроенной переменной Click. Например, 'Click Element'.

Выбираем 'соответствует селектору CSS'. В значении указываем CSS-селектор кнопки отправки формы

После выбора оптимального способа отслеживания отправки формы, нужно провести все необходимые настроки в Google Tag Manager. Затем опубликовать новую версию контейнера GTM, и настроить цели в Google Analytics на заданные в тегах событий категорию / действие / ярлык / значение.