Карта скроллинга в Google Data Studio

Февраль 12, 2020

Нестандартное решение, которое позволяет создать карту скроллинга для страниц в Google Data Studio.

Идею подсказал мой друг. Все мы знаем, а кто-то даже пользуется картой скроллинга в Яндекс.Метрике. Она показывает как внимание пользователя распределяется по странице.

Тепловая карта скроллинга в Google Data Studio

Карта скроллинга в Яндекс.Метрике

В Google Analytics такого инструмента нет. Но мы можем создать что-то похожее в Google Data Studio (GDS):

Тепловая карта скроллинга в Google Data Studio

Тепловая карта скроллинга в Google Data Studio

Статья носит скорее креативный, нежели практический характер. Почему? Дочитайте до конца и все поймете. Что нужно для реализации? Всего лишь настройка отслеживания глубины прокрутки, отчет в GDS и скриншот страницы сайта, на которую мы наложим форматирование и подсвечивание пороговых значений. Давайте приступим к реализации.

Отследить глубину прокрутки можно с помощью Google Tag Manager и напрямую через Google Analytics с помощью скрипта. Подробный процесс настройки я описал в соответствующих материалах. В Google Analytics данные по событиям находятся в отчете Поведение — События — Лучшие события.

Тепловая карта скроллинга в Google Data Studio

События по порогам скроллинга в Google Analytics

Вот с помощью этих значений мы сможем реализовать визуализированный отчет в Google Data Studio. Для этого необходимо создать сам отчет в GDS, выбрав коннектор Google Analytics. Подробно об этом я писал в одной из глав своей книги, а также на ppc.world.

Параллельно этому процессу следует сделать скриншот той страницы, для которой мы будем строить этот отчет. В качестве примера я выберу главную страницу своего тестового сайта graphanalytics.ru. Захватить всю страницу целиком можно с помощью различных сервисов, например, s-shot.ru. Просто введите адрес своего сайта и поставьте галочку напротив полноразмерного режима.

Тепловая карта скроллинга в Google Data Studio

Скриншот сайта

Полученный скриншот страницы сайта нужно сохранить на компьютер как картинку. А чтобы визуально понять, где находятся отслеживаемые отметки в 10, 25, 50, 75, 100%, я воспользовался старым, добрым фотошопом.

Карта скроллинга в Google Data Studio

Определение границ в Photoshop

Сохраненный скриншот вставьте на лист отчета Google Data Studio.

Тепловая карта скроллинга в Google Data Studio

Скриншот сайта в Google Data Studio

После этого создаем таблицу, в которой в качестве параметра выведем ту метрику, в которой передаются пороговые значения глубины прокрутки. В моем примере — это Ярлык события. В качестве второго столбца я буду использовать количество всех событий. Привожу таблицу в порядок, накладываю фильтры, чтобы отобразить только глубины прокрутки. В результате получаю:

Тепловая карта скроллинга в Google Data Studio

Таблица с событиями

Воспользуемся форматированием таблицы и подсветим значения в строках с помощью тепловой карты:

Тепловая карта скроллинга в Google Data Studio

Применение стилей к таблице в виде тепловой карты

А теперь самое интересное! Нам нужно увеличить шрифт этой таблицы до максимального — 96px, убрать лишние строки и наложить эту тепловую подсветку на скриншот нашего сайта. Чтобы получить примерно следующее:

Тепловая карта скроллинга в Google Data Studio

Наложение таблицы на скриншот

Что же у нас получается? Прозрачность меньше ближе к концу скриншота, а должно быть наоборот. Поэтому для правильного отображения нам необходимо перевернуть таблицу, а точнее значения внутри нее, чтобы они подсветились тепловой картой наоборот. Сделать это очень просто — создать собственный показатель с событиями и умножить Всего событий на -1.

Тепловая карта скроллинга в Google Data Studio

Собственное поле с формулой

И тогда в нашу первую таблицу добавляем это поле. Получим перевернутую подсветку:

Тепловая карта скроллинга в Google Data Studio

Перевернутая тепловая карта

Нам нужно еще сделать сортировку, изменив с По убыванию на По возрастанию.

Тепловая карта скроллинга в Google Data Studio

Изменение сортировки

Теперь еще чуточку нестандартного форматирования. Подгоняем области таким образом, чтобы получились примерные пороги отслеживания в 10, 25, 50, 75, 100%. А чтобы скрыть надписи, просто создайте фигуру типа Прямоугольник, назначьте ей белый цвет и нанесите поверх таблицы. Получится примерно так:

Тепловая карта скроллинга в Google Data Studio

Скрытая часть таблицы

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

Тепловая карта скроллинга в Google Data Studio

Накладываем положение и добавляем фильтр на пороговые значения

Устанавливаем их в положении На передний план (1) и не забываем добавить фильтр (2), чтобы данные отображались корректно:

Тепловая карта скроллинга в Google Data Studio

Фильтр на сводку с пороговым значением

Проделываем это для всех пороговых значений. Результат:

Тепловая карта скроллинга в Google Data Studio

Тепловая карта скроллинга в Google Data Studio

Вот таким вот ручным способом можно создать карту скроллинга на данных Google Analytics в Google Data Studio 😉

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике