Последнее время очень распространились посадочные страницы. Как глубина просмотра сайта важна для обычных ресурсов, так же точно глубина скроллинга важна для оценки эффективности посадочных.
Для работы нам не понадобиться программист или глубокие знания JavaScript.
Мы будем использовать 3 инструмента:
1) Google Analytics (Universal или классический)
2) Google Tag Manager (v2)
3) Плагин для Google Analytics — Scroll Depth
Приступим.
Предполагаю что у вас на сайте уже установлен код Google Tag Manager и с помощью него встроен код Google Analytics. Так же на сайте должен быть установлен JQuery версии не ниже 1.7.
Создаем новый тег, для установки Scroll Depth на сайт (сам код плагина качаем по ссылке выше).
Жмем «далее» и вставляем код плагина (у меня стоит плагин для подсветки кода, поэтому фон окна с кодом — серый).
Обратите внимание, что код плагина нужно заключить в <script></script>
А так же, дописать перед </script> следующий код:
jQuery(function() {
jQuery.scrollDepth();
});
Выбираем условие активации тега.
Я буду отслеживать скроллинг на всех страницах сайта.
Если вам нужно отслеживать прокрутку на каких-то конкретных страницах, выбирайте соответствующее условие активации.
Тег будет отправлять в Analytics события о прокрутке каждых 25% вашей страницы. Т.е. при достижении 25%, 50%, 75% и 100%.
Можно так же настроить отслеживание событий по попаданию в поле видимости определенных объектов. Для этого нужно добавить JQuery селекторы необходимых элементов в массив elements (по умолчанию — пустой).
Если мы сейчас опубликуем контейнер, в Google Analytics не будут передаваться ни какие данные. Для передачи информации на сторону аналитикса нам понадобиться 4 переменные которые будут хранить в себе данные и еще один тег, который эти данные будет передавать.
Создайте 4 переменных со следующими настройками:
Ок. Осталось настроить тег Google Analytics для отслеживания события и указать условия его активации (номер счетчика Analytics у меня лежит в переменной UA).
Отлично. Теперь когда мы опубликуем контейнер, данные будут отправляться в Analytics.
Проверяем работоспособность в дебаггере.
Смотрим отображаются ли данные по событиям в отчетах в реальном времени.
Вот собственно и все.
Таким нехитрым способом можно за 10-15 минут настроить отслеживание скроллинга с помощью пары инструментов.
Источники:
- http://scrolldepth.parsnip.io/
- http://andygibson.us/2013/10/track-scroll-depth-using-google-tag-manager/
- https://spark.ru/startup/adstein/blog/9238/otslezhivaem-glubinu-prokrutki-stranitsi-cherez-google-tag-manager-v2