Настройка отслеживания радиокнопок и выпадающего меню (списка) в формах с помощью GTM

Радиокнопки и выпадающее меню (список) очень часто встречаются в различных формах и выполняют различные функции на сайтах или в личных кабинетах (в случае регистрации или редактировании настроек).

В данной статье разберём, как отслеживать значения этих элементов при отправке форм обратной связи, так как сами по себе без дальнейших событий они редко несут в себе какой-либо смысл.

В первую очередь необходимо внедрить 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/

Поделиться ссылкой: