Аналитика блоков

Отчет «Аналитика блоков» - это инструмент для анализа кликабельности элементов интерфейса. Добавив в код инициализации счетчика Топ-100 вызов дополнительного модуля и разметив нужные элементы сайта, можно собирать статистику и решать следующие задачи:

  • оценивать кликабельность целевых блоков страниц или кнопок и сравнивать их CTR;
  • анализировать эффективность разных заголовков материалов;
  • изучать CTR блока рекомендаций и конкретных позиций в нём;
  • исследовать, как одинаковые блоки работают на разных страницах, как меняется кликабельность во времени;
  • сравнивать кликабельность однотипных элементов при A/B или мультивариантном тестировании.

В этой статье мы опишем процесс проработки структуры отчета, расскажем о разметке, а также посмотрим, как можно применять отчет «Аналитика блоков» на практике. 

Мы рекомендуем начать с проектирования разметки на бумаге, а потом перейти к внедрению на сайт. Для начала стоит определить цели сбора данных, например:

  • Какой информации не хватает для оценки эффективности сайта и его страниц? 
  • Информацию о каких действиях посетителей необходимо собрать, чтобы получить достаточно данных для оценки? 

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

Также обратите внимание, что если у блока есть несколько дочерних элементов, следует давать им разные названия. В противном случае в отчете эти элементы будут объединены в один, а данные по ним суммируются, что даст некорректные данные по показам для родительского блока.


Теперь рассмотрим разметку страницы на примере контентного сайта для детей и родителей.

Главная страница состоит из следующих смысловых блоков: меню, популярные материалы, новые материалы, рекомендации, материалы партнеров. 

Страница статьи: меню, рекомендации, популярные материалы из того же раздела, популярные материалы (как на главной странице), новые материалы. 

Разделы сайта (представленные в меню) имеют такую структуру:

  • Младшие классы
    • Развивающие игры
    • Внеклассовые мероприятия
    • и др.
  • Средняя и старшая школа
    • Отзывы о школах
    • Шпаргалки и решебники
    • и др.
  • Поступление
    • ОГЭ и ЕГЭ
    • Выбор вуза
    • Репетиторы и курсы
    • и др.
  • Учебно-методические материалы
    • 1 класс
    • 5 класс
    • и др.

При этом владелец сайта хочет найти ответы на следующие вопросы:

  • Какой из блоков с материалами более кликабельный на главной странице и на страницах статей? 
  • Материалы из каких разделов привлекают больше внимания? 
  • Сколько переходов каждый из разделов получает из блоков с рекомендациями? 

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

Главная страница / Название раздела :: Название блока (меню, рекомендации, популярное, новое) :: Раздел, в который ведет ссылка на материал :: Рубрика :: Название материала / Название раздела (для меню)

В код инициализации счётчика нужно будет передать все значения data-атрибутов. Названия data-атрибутов соответствуют главной странице (main) и разделам сайта: primary - младшие классы, middleandsenior - средняя и старшая школа, graduation – поступление, materials – учебно-методические материалы.

<!-- Top100 (Kraken) Counter --> 

     // ... 

           var options = { 

               project: PROJECT_ID, 

                       attributes_dataset: ['main', 'primary', 'middleandsenior', 'graduation', 'materials']

                          }; // ... 

<!-- END Top100 (Kraken) Counter -->

Отчет «Аналитика блоков» - иерархический: на верхнем уровне вы увидите переданные data-атрибуты, каждый из которых можно развернуть в дерево глубиной до 8 уровней (глубина зависит от настроенной разметки).

Разметку блоков можно передавать двумя способами: на каждом уровне вложенности передавать полный путь или использовать логическую иерархию страницы. Посмотрим, как будет выглядеть разметка для различных элементов главной страницы и раздела «Средняя и старшая школа».


Ссылка на статью «10 причин поступать в МГУ» в блоке рекомендаций на главной странице

data-main = рекомендации:: поступление:: выбор вуза::10 причин поступать в МГУ

Либо так:

<div data-main='рекомендации'>
        <div data-main ='поступление'>
                 <div data-main ='выбор вуза'>
                      <a href='link'
main ='10 причин поступать в МГУ'>10 причин поступать в МГУ</a>
                 </div>
          </div>


Ссылка на рубрику «Выбор вуза» в меню на главной странице

data-main = меню:: поступление:: выбор вуза

Либо:

<div data-main='меню'>
        <div data-main ='поступление'>
                 <div data-main ='выбор вуза'></div>
          </div>


Ссылка на статью «10 причин поступать в МГУ» в блоке новых статей на странице материала в разделе «Средняя и старшая школа»

data-middleandsenior = новое:: поступление:: выбор вуза::10 причин поступать в МГУ

Либо:

<div data-middleandsenior='новое'>
        <div data-middleandsenior='поступление'>
                 <div data-middleandsenior='выбор вуза'>
                      <a href='link'
middleandsenior='10 причин поступать в МГУ'>10 причин поступать в МГУ</a>
                 </div>
          </div>


В отчете данные о CTR ссылки на статью «10 причин поступать в МГУ» в блоке рекомендаций на главной буду выглядеть так:


Благодаря такой разметке будет легко сравнить общую кликабельность ссылок по разным блокам и посмотреть, материалы из каких разделов пользуются наибольшей популярность в каждом из смысловых блоков страниц. Можно также сравнить общую кликабельность страниц различных разделов.

Теперь посмотрим, как полученные данные помогают ответить на некоторые из поставленных вопросов. Поскольку при такой разметке отчет получается довольно громоздким, рассмотрим только релевантные для каждого конкретного вопроса строки.


Какой из блоков с материалами более кликабельный на главной? 

Мы можем видеть, что наиболее кликабельный блок на главной – меню. Все блоки, содержащие материалы на материалы внутри сайта имеют примерно одинаковый CTR. А вот по партнерским материалам пользователи кликают значительно реже.


Какой из блоков с материалами более кликабельный на страницах статей в разделе «Методические материалы»? 

Здесь опять же видно, что пользователи чаще всего кликают на меню. Также им явно интереснее всего почитать популярные материалы из того же раздела (в данном случае – «Методические материалы»). У прочих блоков на странице кликабельность значительно ниже.


Сколько переходов каждый из разделов получает из блоков с рекомендациями на главной странице?

Как следует из отчета, раздел «Поступление» лидирует по количеству переходов, тогда как на материалы из раздела «Методические материалы» пользователи кликают значительно реже.

Если в первую очередь хочется сравнивать популярность материалов из разных разделов, можно изменить иерархию так: Главная страница / Название раздела :: Раздел, в который ведет ссылка на материал :: Название блока (меню, рекомендации, популярное, новое) :: Рубрика :: Название материала / Название раздела (для меню).