Использование Tag Assistant Recordings для отладки отслеживания глубины скролла

By | 23.12.2015
Google Tagmanager необычайно полезный инструмент в работе веб-аналитика. С ним я, не призывая программиста, могу:
  • отследить практически все взаимодействия посетителя с сайтом, заполнение форм, клики по ссылкам
  • установить теги третьих систем: AdWords, отслеживание конверсий Twitter, код Яндекс.Метрики и прочих
Но есть небольшая проблема — раз инструмент полезен, это означает что он не прост, и использование его требует усилий, а усилия сопровождаются ошибками. Ошибки — это нормально, ненормально их не исправлять. Очень помогает в этом режим отладки — «Предварительный просмотр и отладка» («Preview and Debug»), но им наши инструменты не исчерпываются. В августе 2015 года у расширения Google Chrome Tag Assistant  появилась новая функциональность — возможность записи своих действий.
Причем действия записываются не только на существующих страницах сайта, но и на страницах во вне: на странице оплаты, на виртуальной странице подтверждения заказа. Screen Shot 2015-07-21 at 2.27.31 PMПричем действия записываются не только на существующих страницах сайта, но и на страницах во вне: на странице оплаты, на виртуальной странице подтверждения заказа.

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

После записи доступно два отчета:
  1. Отчет Tag Manager — сохранены активированные в процессе сессии теги (за исключением пользовательских HTML тегов), значения переменных dataLayer. После закрытия браузера этот отчет пропадет, если вы не сохраните его в PDF формате.
  2. Отчет Google Analytics со значениями, которые были отправлены в Google Analytics, включая пользовательские параметры и метрики. Этот отчет можно сохранить в расширении.
Обратите внимание, что пока отчеты только на английском.

Пример использования Tag Assistant Recordings —  настройка отслеживания глубины просмотра.

Страницы на сайтах длиннее чем 1 экран, и пользователь вынужден (ну или ему это нравится) скроллить экран ниже, чтобы прочитать статью, просмотреть все картинки. Промостраницы (landing-pages) становятся всё более популярны — а это означает что много экранный одностраничный сайт встречается все чаще. Поэтому отслеживание как далеко просмотрел пользователь информацию будет частой вашей задачей. Это можно делать с помощью замечательного скрипта, который можно найти вот тут. И конечно мы будем использовать GTM для настройки.
Как это делается, я подробно расписывать не буду — информацию об этом можно найти (или могу я вам все настроить), но вот вкратце алгоритм:

1. Создаем пользовательский HTML тег куда размещаем код скаченный с сайта.

2. Добавляем функцию ниже размещенного кода:

( jQuery, window, document );
jQuery(function() {
jQuery.scrollDepth();
});

3. Заключаем код в тег скрипта <script>…код…</script>, и размещаем тег на тех страницах которые отслеживаем.

4. Создаем переменные (Variables) типа dataLayer для тега передающего события о глубине скролла в GA. В русском GTM это переменные уровня данных:

    • Event Category = {{eventCategory}}
    • Event Action = {{eventAction}}
    • Event Label = {{eventLabel}}
    • Event Value = {{eventValue}}

5. Создаем пользовательское событие, срабатывающее при «event» содержит (contains) «ScrollDistance».

6. Создаем тег типа событие, выбираем соответствующие созданным переменным категорию, действие, ярлык и ценность события.  Отмечаем, что скролл не является взаимодействием (Non-interaction=TRUE), если хотим этого (это может повлиять на показатель отказов). Активируем этот тег при созданном в п.5 событии.

7. Тестируем и если все нормально, публикуем тег

Вот на последнем пункте остановимся чуть подробнее. На своем сайте я решил настроить отслеживание уже после того как приобрел опыт — на двух сайтах клиентов скрипт работал без ошибок, и я не ожидал что возникнут какие-то проблемы. Я сделал все ровно по привычному алгоритму описанному выше, и результат:
скрипт не запускается
Как вы видите ничего не срабатывает — нет события ScrollDistance и значения которые генерирует скрипт, даже не появляются в списке переменных. То есть проблема на уровне скрипта — он не срабатывает.
Какие у скрипта требования? Лезем на сайт-источник и видим:
The two requirements are Google Analytics and jQuery (v1.7+)
Упс, а jQuery у меня установлен? Проверяем командой в консоли браузера:
var msg;
if (window.jQuery) {
    msg = 'You are running jQuery version: ' + jQuery.fn.jquery;
} else {
    msg = 'jQuery is not installed';
}
alert(msg);
и вижу ответ: jQuery is not installed.
Что же — ставим библиотеку на сайт (для этого вам возможно понадобится помощь человека/компании поддерживающей ваш сайт, здесь решение для wordpress) и снова все проверяем:
корректно работающий ScrollDistance
Все работает и теперь можно опубликовать новую версию в GTM.
Новая возможность отладки очень полезна, на мой взгляд самое полезное  то, что нет необходимости повторять тестируемые действия на сайте — при изменении тегов в GTM поменяется и отчет.
И традиционно: если заметка понравилась — делитесь в соц сетях, если есть дополнения — велкам в коменты, я всегда рад обоснованной критике.

Добавить комментарий