Продуктовая аналитика главного меню сайта
Опубликовано: 12 июл 2021
Вы наверняка неоднократно видели и сами пользовались на различных сайтах тем, что называется "мега меню" - главное меню сайта с рядом подразделов и кучей ссылок внутри каждого раздела. Это могут быть разные категории товаров, подразделы контента, навигация внутри личного кабинета, разные дополнительные ссылки, такие как помощь, документация и т. п.
Насколько эффективно работает ваше меню? Ответ на этот вопрос может заключать в себе ряд исследований, которые должны прояснить, например, такие типичные подвопросы:
- почему пользователи кликают на на одни пункты меню и не кликают на другие?
- эти пункты меню их не интересуют или они им не понятны?
- какая часть меню не помещается на экране ноутбуков при первой загрузке?
- cтанут ли пользовательские метрики лучше, если мы поменяем порядок некоторых ссылок внутри экранов меню?
- если у вас есть последний пункт меню "Еще" или "Дополнительно" — почему пользователи кликают на него и ничего не кликают внутри, что они ищут и чего не находят?
- распределение по кликам в десктопной и мобильной версии одинаково или нет?
- и т. п.
Посмотрев на эти вопросы, мы уже видим, что правильный сбор данных будет играть ключевую роль, и что это достаточно нетривиальная задача. По каждому событию клика нам нужно будет собирать не только текст ссылки, но и как минимум положение (порядок) ссылки внутри подменю, возможно заголовок этого подменю и название активного пункта верхней строчки меню. Отслеживание порядкового номера расположения ссылки нам пригодится, если мы решим поэксперементировать с этим порядком.
Если вам это кажется сложным, и вы ищите простое решение, то вполне можно воспользоваться визуальными инструментами, которые предлагают различные вендоры аналитических решений. Например, Яндекс Метрика имеет такие инструменты, как Карта Ссылок и Карта Кликов. Недостаток их заключается в том, что вы не можете выгрузить эти данные и автоматизировать аналитику или провести более детальные исследования, например, с применением a/b тестов.
Сбор данных с помощью GTM
Использование Google Tag Manager для отслеживания подобных событий имеет хорошо известные плюсы и минусы — его можно достаточно быстро реализовать и собрать необходимые данные, но устойчивость решения будет ограничена в том плане, что если разработчики что-то изменят в меню без вашего ведома, то оно может перестать работать.
1. Отслеживание клика по верхнему уровню меню.
Триггер для отслеживания клика по верхнему уровню меню может выглядеть так:
Trigger Type: Click - All Elements
Fires on: Click Element matches CSS selector div[data-qa="MainMenu"] span
В данном случае для примера мы предположили, что верхний уровень главного меню находится в DIV с атрибутом data-qa="MainMenu" и каждый подпунт - это элемент span.
Названия пункта меню мы можем передавать с помощью встроенной в GTM переменной Click Text или же, если в пункте меню помимо текста также имеются иконки на которые пользователь может кликать, то с помощью кастомной переменной, возвращающей текст общего элемента span:
function() {
return {{Click Element}}.closest('span').textContent;
}
2. Отслеживание клика по ссылке на всплывающем экране меню.
Триггер для отслеживания клика по ссылке внутреннего экрана меню может выглядеть так:
Trigger Type: Click - All Elements
Fires on: Click Element matches CSS selector div[data-qa="DesktopMenu"] div[data-qa="LinksBlock"] a, div[data-qa="DesktopMenu"] div[data-qa="LinksBlock"] a *, aside div[data-qa="LinksBlock"] a, aside div[data-qa="LinksBlock"] a *
Здесь для примера мы отслеживаем четыре типа кликов:
- клик по ссылке десктопного меню
- клик по иконке внутри ссылки десктопного меню
- клик по ссылке мобильного меню (которое находится внутри блока
aside) - клик по иконке внутри ссылки мобильного меню
Естественно ваш код для параметра CSS selector может заметно отличаться, поскольку он зависит от структуры меню внутри DOM.
Заголовок раздела подменю, названия активного верхнеуровнего меню и другие вспомогательные данные для данного события можно собирать с помощью таких javascript функций, как closest, parentNode, firstChild и т. п.
Так например, javascript переменная, передающая заголовок раздела подменю может выглядеть так:
function() {
return {{Click Element}}.closest('div[data-qa="LinksBlock"]').parentNode.firstChild.innerText.trim();
}
3. Отслеживание порядкового номера пункта меню
Для отслеживания положения пункта меню, нам нужно получить значение индекса данного элемента внутри его родительского элемента. Как это можно сделать подробно разобрано, к примеру, на stackoverflow. К сожалению на момент написания статьи GTM по прежнему не полностью поддерживает ECMASCRIPT_2015, и мы не можем использовать наиболее изящное решение
function() {
return [...{{Click Element}}.parentElement.children].indexOf({{Click Element}});
}
которое выдаст соответствующую ошибку.
Вместо этого мы можем создать отдельную javascript переменную-функцию getElementIndex, которая будет возвращать индекс:
function() {
return function(node) {
var index = 0;
while ( (node = node.previousElementSibling) ) {
index++;
}
return index;
}
}
и использовать ее для получения порядкового номера элемента в другой javscript переменной, например так:
function() {
return {{getElementIndex}}({{Click Element}})+1;
}
4. Отслеживание типа устройства, где использовалось главное меню
Поскольку главное меню выглядит и используется по разному на декстопных мониторах и мобильных устройствах, вам может быть интересно сравнить данные кликов в разрезе мобильных и десктопных пользователей. Опциональный, но в тоже время интересный момент — если ваше меню оборачивается в различные контейнеры DIV для мобильной и десктопной версии, мы можем передавать переменную, которая будет индикатором того, использовалось ли меню в мобильной или десктопной версии. Для этого необходимо просто отслеживать какой DIV-контейнер был активным.
Например javascript переменная JSV MainMenu isDesktop может выглядеть таким образом:
function() {
return Boolean({{Click Element}}.closest('div[data-qa="DesktopMenu"]'));
}
Затем мы можем преобразовать True и False в соответствующие значения desktopMenu, mobileMenu с помощью опции Format Value для данной переменой:
При этом необходимо убедиться, что в мобильной версии соответствующие функции поиска десктопного меню будут возвращать null, например:
document.querySelector('aside div').closest('div[data-qa="DesktopMenu"]') >> null
Построение отчетности и аналитика
Теперь, когда у вас есть все данные в виде цифр, вы можете проводить любой сравнительный анализ и строить графики как в виде таблиц, так и на временных интервалах.
Дополнительно можно отслеживать аномальные изменения в данных по кликам, и при необходимости создать алерты для таких изменений.
Добавив к этому визуальную аналитику с помощью инструментов типа Вебвизор и Карта ссылок, вы будете иметь полное представление о том, как пользователи взаимодействуют с вашим главным меню.