{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Как отслеживать клики по выпадающим меню/спискам

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

Для настройки нам потребуется пользовательский HTML-тег вместе с некоторыми переменными. Задача HTML-тега - поместить объект, который содержит выбор пользователя, в dataLayer. Этот объект затем можно использовать для отслеживания результатов.

Содержимое пользовательского HTML-тега:

<script> (function() { // Измените селектор CSS в скобках в соответствии с вашим меню выбора. var selectMenu = document.querySelector('select#selectMenu'); var callback = function(e) { var selectedOption = e.target.options[e.target.selectedIndex]; window.dataLayer.push({ event: 'selectionMade', selectedElement: selectedOption }); }; selectMenu.addEventListener('change', callback, true); })(); </script>

Установите тег на срабатывание триггера DOM Ready.

Измените строку, которая начинается с var selectMenu = ..., чтобы селектор соответствовал элементу, который вы хотите отслеживать непосредственно в вашем случае.

Если CSS селекторы вам незнакомы, вы можете прочитать о них здесь или использовать document.getElementById (), или другой метод DOM, который вам больше подходит. Независимо от используемого вами селектора, вам нужно задать именно элемент select в переменной selectMenu, чтобы это решение работало.

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

Итак, когда наш слушатель обнаруживает событие 'change', обратный вызов помещает в dataLayer объект, который содержит кастомное событие selectionMade и ссылку на объект для опции, выбранной пользователем.

Чтобы ваш тег каждый раз срабатывал при выборе, вам понадобится пользовательское событие, который выглядит следующим образом:

Далее, в зависимости от того, как был настроен элемент option, вы можете использовать одну из следующих переменных уровня данных:

Вот и все! Когда пользователь делает выбор - первая захватывает значение атрибута value выбранной опции. Если же value нет, она захватывает текст. Вторая - захватывает текст, даже если опция имеет атрибут value.

Таким образом вы можете отслеживать клики по любым выпадающим меню или спискам.

Если же вы вам нужно отслеживать клики по какому-либо произвольному элементу и у вас это не получается с помощью стандартных триггеров - попробуйте этот способ.

Эту статью в оригинале и другие полезные статьи по digital аналитике вы можете найти на англоязычном блоге Симо Ахавы.

0
Комментарии
-3 комментариев
Раскрывать всегда