Таймер времени на странице с помощью Яндекс Тег Менеджера

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

Наверняка вы знаете, что при создании цели в Яндекс Метрике вы можете выбрать тип условия - Продолжительность визита:

Цель этого типа позволяет отслеживать визиты, в которых посетители находились на сайте дольше установленного времени. Другими словами, Яндекс учитывает разницу между первым и последним событием на сайте, и высчитывает итоговое значение. Первое событие - это загрузка счетчика на странице. Последним может быть просмотр страницы, переход по внешней ссылке, скачивание файла, достижение цели, служебное событие «неотказ» или отправка параметров.

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

Это один из способов отслеживания продолжительности визита пользователя. Однако с появлением Яндекс Тег Менеджера и шаблонов мы можем создавать свои собственные, уникальные решения, и при этом не ограничиваться отправкой данных только в Яндекс Метрику.

А совсем недавно (буквально неделю назад) в каталоге шаблонов ЯТМ появилось решение, позволяющее отслеживать время, проведенное пользователем на странице, и отправлять событие со своим идентификатором в Яндекс Метрику при достижении заданного временного порога. Называется оно AMDG - Таймер времени на странице:

Каталог шаблонов - это библиотека готовых решений для настройки тегов в Яндекс Тег Менеджере, которая упрощает работу. Существуют личные шаблоны (доступные только вам) и публичные, которыми вы можете делиться с другими пользователями. Подробнее об этом читайте в официальной документации Яндекс Тег Менеджера. А подать заявку на верификацию автора можно здесь.

Воспользоваться им очень просто. Для этого перейдите в раздел Теги и создайте новый тег:

В открывшемся окне в разделе Шаблон тега выберите Шаблоны из каталога:

Добавьте публичный шаблон AMDG - Таймер времени на странице к себе в контейнер ЯТМ:

После этого вам откроется страница тега, где вам необходимо задать собственные настройки:

• Название - Таймер времени на 30 секунд (произвольное, в зависимости от того, какое пороговое значение вы отслеживаете);
• Номер счетчика - идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;

• Имя цели - идентификатор цели, задается на странице редактирования счетчика при создании или изменении цели типа JavaScript-событие.

Например, если вы создали цель с идентификатором timer_30sec:

То в настройках тега задаете именно это значение:

В поле Время таймер задайте пороговое значение в секундах, которое вы хотите регистрировать. Например, 30 секунд:

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

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

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

Вы можете скопировать код автора и вставить в любую нейросеть (чат-бот) для его расшифровки и убедиться, что он полностью прозрачный и выполняет самый простой/базовый функционал.

И да, этот таймер срабатывает только на текущей странице. При обновлении или переходе на другую страницу он обнуляется и начинается заново (если снова будет вызван этим тегом). Тот, кто работал с Google Tag Manager, примерно представляет, как работает триггер Таймер.

Примечание: чтобы время сохранялось между страницами, нужно усовершенствовать данное решение и сохранять startTime где-то вне памяти страницы (например, в localStorage или sessionStorage). Вы можете попробовать создать свой собственный шаблон тега, используя чат-бота ИИ в качестве помощника.

На вкладке Разрешения представлены те самые разрешения к глобальным переменным, которые позволяют корректно активировать работу тега:

Убедившись, что публичный шаблон тега подходит для вашего проекта и не представляет угрозы, вернитесь к его настройкам. Последний шаг - задайте триггер:

И добавьте новый триггер:

В качестве триггера активации вы можете использовать Просмотр страницы:

Сохраните его. Итоговый тег по отслеживанию времени на странице (в моем примере - это 30 секунд) будет выглядеть так:

Сохраните тег.

Теперь вы можете проверить корректность срабатывания тега Яндекс Метрики и передачу данных JS-события в аналитику. Для этого активируйте режим предварительного просмотра. В правом верхнем углу Тег Менеджера нажмите на кнопку Предварительный просмотр и дождитесь компиляции ссылки.

Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

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

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview.  Добавьте нижеприведенную конструкцию после параметра _ytm_preview через &, чтобы получилось так:

Вы можете сделать это даже в режиме Инкогнито, после компиляции ссылки для режима предварительного просмотра ЯТМ. Внизу страницы появится значок  . Нажмите на него, чтобы открыть панель отладки. Откройте вкладку Events и перейдите на любую страницу своего сайта. Дождитесь заданного времени. У меня - это 30 секунд.

Если вы все настроили корректно, то на шкале событий увидите достижение JS-цели таймера:

Дополнительно шаблон тега выводит в консоли разработчика уведомление об успешной отправленной цели в Яндекс Метрику:

Через некоторое время данные по достигнутой цели отобразятся в Яндекс Метрике в отчете Конверсии:

Если вам необходимо отслеживать и другие пороговые значения пользователей (40 секунд, 50 секунд, 60 секунд, 90 секунд и т.д.) - просто создайте для каждого действия свое JavaScript-событие и свой тег, вставив в него соответствующий идентификатор цели.

Вот такой вот простой, но эффективный публичный шаблон тега предоставила нам команда AMDG в Яндекс Тег Менеджере. Он позволяет отслеживать время, проведенное пользователем на странице, и отправлять событие в Яндекс Метрику при достижении заданного временного порога.