Радиокнопки и выпадающее меню (список) очень часто встречаются в различных формах и выполняют различные функции на сайтах или в личных кабинетах (в случае регистрации или редактировании настроек).
В данной статье разберём, как отслеживать значения этих элементов при отправке форм обратной связи, так как сами по себе без дальнейших событий они редко несут в себе какой-либо смысл.
В первую очередь необходимо внедрить GTM в исходный код сайта, если его там ещё нет. Если есть, переходим к настройке.
После этого переходим в ГТМ в тег, где прописан код Метрики, и видим код:
после webvizor:true добавляем запятую, и на следующей строчке пропишем:
params: window.yaParams
Код должен выглядеть вот так:
Затем необходимо исследовать код формы, радиокнопок и выпадающего меню (списка).
Из кода видим, что кнопка формы имеет атрибут class со значением feedback btn btn-block btn-large btn-success.
Радиокнопки имеют атрибут value со значениями zn1, zn2 и zn3
Выпадающее меню (список) имеет имеет id — select-items, а а пункты имеют значения value — select-1, select-2, select-3, select-4 и select-5.
Далее переходим в ГТМ в Переменные и создаём там 2 переменные типа Собственный код JavaScript:
для радиокнопок — называем Radio Buttons
function() {
var radioName = "radio";
try {
var buttons = document.getElementsByTagName(radioName);
for (var i = 0;i < buttons.length;i++){
if (buttons[i].checked) {
return buttons[i].value;
}
}
} catch (e) {}
return "";
}
для выпадающего меню (список) — называем Drop-Down List
function() {
var selectId = "select-items";
try {
var options = document.getElementById(selectId).options;
for (var i = 0;i < options.length;i++){
if(options[i].selected) {
return options[i].value;
}
}
} catch(e) {}
return "";
}
Затем создадим 2 переменные типа Таблица поиска, которые помогут нам получать имена пунктов в системы аналитики:
для радиокнопок — называем Radio Buttons Search Table
в качестве входной переменной указываем переменную {{Radio Buttons}}, входные данные — значения value, а результат — сами названия этих пунктов
для выпадающего меню (списка) — называем Drop-Down List Search Table
в качестве входной переменной указываем переменную {{Drop-Down List}}, входные данные — значения value, а результат — сами названия этих пунктов
Переходим к Триггерам. Создаём триггер типа Клик — Все элементы, называем его, например Form — Radio and Drop-Down List, в условиях активации выбираем Некоторые клики, и задаём следующие условия:
| Click Classes | содержит | feedback |
| Radio Buttons Search Table | не равен | undefined |
| Drop-Down List Search Table | не равен | undefined |
Переходим к Тегам и создадим тег для Google Analytics типа Google Аналитика — Universal Analytics со следующими параметрами:
- Тип отслеживания: Событие
- Категория события: Form Test
- Действие: Radio Buttons and Drop-Down List
- Ярлык: Radio Button — {{Radio Buttons Search Table}} and Drop-Down Item — {{Drop-Down List Search Table}}
- Настройки Google Analytics: {{Google Analytics}}
и привязываем к нему триггер Form — Radio and Drop-Down List
После этого создадим тег для Яндекс Метрики типа Пользовательский HTML:
<script>
yaCounterXXXXXXXX.params({
"Radio Buttons and Drop-Down List":
[{"Radio Button": "{{Radio Buttons Search Table}}"}, {"Drop-Down Item": "{{Drop-Down List Search Table}}"}]
});
</script>
и привязываем к нему триггер Form — Radio and Drop-Down List
XXXXXXXX — это id счётчика Метрики
Сохраняем и опубликовываем.
Заполняем форму и отправляем её
Смотрим результаты.
Переходим в Google Analytics в раздел Отчёты — Поведение — События — Лучшие события
Переходим в Яндекс Метрику в раздел Отчёты — Стандартные отчёты — Содержание — Параметры визитов
Готово!
P.S.: некоторые скрипты были взяты отсюда: https://www.uplab.ru/blog/prodvinutoe-otslezhivanie-form-v-dispetchere-tegov-google/
Поделиться ссылкой:
