Зачастую приходится сталкиваться с задачами по сбору динамических данных или параметров, которые на практике не просто решить стандартными средствами. Например, необходимо зафиксировать размер персональной скидки, URL адрес, контактные данные и так далее, в таких ситуациях на помощь приходит JavaScript и Google Tag Manager.
Рассмотрим задачу на конкретном примере: на лендинге определяется местоположение, и в зависимости от него и выбранной суммы подбираются кредитные предложения банков. Необходимо получить город и сумму кредита, а затем передать эти параметры в метрику.
Рассмотрим варианты решения через передачу параметров визита, и через передачу дополнительного параметра при достижении цели.
Получение данных
Прежде всего необходимо получить данные из форм, для этого воспользуемся JavaScript методом querySelector(), его аргумент - селектор, определяет, элемент к которому обращаемся или выбираем.
Открываем лендинг, с помощью инспектора выбираем форму "Срок кредита" и копируем её селектор. Переходим в консоль браузера, вызываем метод document.querySelector('div.selectric > span') с нашим селектором, форма будет подсвечиваться. Теперь получим содержимое, воспользовавшись свойством .textContent которое добавим к методу и для проверки выведем в консоль.
Получить введенные данные из формы "Сумма кредита" можно тем же методом, но применив свойство .value так как форма заполняется в процессе оформления. Набираем в консоле document.querySelector('input.xxx-g-input.text-slider.currency_inp').value и получаем сумму кредита.
Чтобы сохранить конфиденциальность персональных данных, Условия использования сервиса Яндекс Метрика запрещают передавать идентификационную информацию в Метрику (подробнее)
Теперь у нас есть все необходимые данные, остаётся их передать в удобной структуре для дальнейшего анализа в Метрике.
Передача данных в Метрику
Передавать данные будем через Google Tag Manager, триггер и его создание я пропущу по причине того что он будет индивидуален в большинстве случаев, а вот на теге остановимся подробнее.
Передача параметров визитов
Формирование общей структуры в виде группировки и уровней вложенности отчета мы можем закладывать самостоятельно придерживаясь нотации JSON.
Первым уровнем сделаем понятный заголовок группировки "Онлайн-заявки на кредит" по нему будет проще найти нужную. Для удобного деления заявок сгруппируем их ещё раз по городам, далее привяжем сумму кредита к его сроку (скрипт тега из примера).
Передача дополнительного параметра при достижении цели
В этом варианте нам необходимо создать цель с типом условия "JavaScript-событие", назовем её "online_loan_all_banks". Структура передачи данных будет аналогичной первому примеру, поэтому просто скопируем и вставим её (скрипт из примера). Теперь при достижении цели у нас будут передаваться её параметры и считаться конверсии.
Резюме
Получать и передавать динамические данные можно и нужно, это не так сложно как кажется. Варианты решения задач ограничиваются лишь вашей фантазией.
