Отслеживание времени визита (сеанса) через GTM

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

Зачем это нужно?

Первый сценарий в котором стоит использовать такую переменную — это ограничение отправки некоторых целей (копирование/клики по email и номеру телефона, отправка форм и т.п.) в аналитические системы. Посмотрим на скриншот из Метрики:

На скрине я построил отчет по визитам длительностью до 30 секунд и вложил внутрь источники трафика. В качестве метрик взял основные цели. В последнем столбце цель «Клиент связался с организацией» — это все отправленные формы и сообщения в чат. в сегменте от 1 до 9 секунд видно, что из рекламы пришло 60 конверсий — это около трёх процентов от всех достигнутых целей за которые я плачу в кампаниях Я.Директа. А теперь давайте подумаем: «кто проводит на сайте до 10 секунд и оставляет заявку»?

В теории это могут быть и целевые лиды, но я все же склоняюсь к тому, что это боты и те самые ребята, которым плевать, что у вас за продукт и они скликивают вашу рекламу с целью впихнуть вам свое коммерческое предложение; ну и конечно наши «любимые» фродофермы. Просто не станет адекватный человек не изучив продукт оставлять заявку, а на это 10 секунд маловато. И даже если и попадет в этот сегмент целевой посетитель, наверное не так уж и страшно не доплатить Яндексу 1-2% от цены лидов (это я про модель оплаты за конверсии в Директе).

Для того, чтобы отсечь таких вот посетителей, достаточно в триггерах GTM поставить дополнительное условие с проверкой, что длительность сессии была более 10 секунд.

Также с помощью переменной длительности сеанса можно:

• отправлять в аналитику точное время, когда произошла отправка формы или другое целевое событие;
• вычитать друг из друга разные значения этой переменной, чтобы понять сколько в среднем требуется времени на прохождение квиза или калькулятора;
• создать свой аналог вовлеченных сессий в Директе (об этом будет отдельная статья) и пр.

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

• переменную со счетчиком времени визита (сеанса);
• тег сброса счетчика при бездействии на сайте более 5 минут;
• триггер для событий отправки форм, совершенных после 10 секунд на сайте;
• теги отправки события в Яндекс Метрику и Google Analytics.

Создаём переменную в GTM со счётчиком времени сеанса / визита

Идем в менеджер тегов в Переменные и создаем пользовательскую с типом «Собственный код JavaScript». Вставляем в нее следующей код:

function getSessionTime() {
  // Проверка, поддерживает ли браузер sessionStorage
  if (typeof sessionStorage !== 'undefined') {
    // Проверка, есть ли сохраненное значение времени начала сеанса в sessionStorage
    var sessionStartTime = sessionStorage.getItem('sessionStartTime');
    if (!sessionStartTime) {
      // Если сохраненного значения нет, установка нового значения
      sessionStartTime = new Date().getTime();
      sessionStorage.setItem('sessionStartTime', sessionStartTime);
    }

    // Вычисление времени прошедшего с начала сеанса
    var elapsedTime = (new Date().getTime() - sessionStartTime)/1000;

    return elapsedTime;
  }

  return null;
}

В коде есть комментарии, поясняющие что будет делать следующий ниже блок кода. Стоит также уточнить, что sessionStorage — это, если грубо, аналог cookie, но он хранится не на стороне сайта, а в браузере посетителя и «живет» до тех пор, пока не будет закрыта вкладка (переходы на другие страницы и перезагрузки страницы этот тип хранилища переживает). SessionStorage не отключается блокировщиками рекламы и браузерами, в отличии от cookie, поэтому мы записываем время начала сессии в него. Каждый раз при совершении действий на сайте, фиксируемых GTM, мы вычитаем из текущего времени время начала сессии, тем самым получая её длительность. По закрытию вкладки счетчик сбросится.

Если нужно, чтобы счетчик не сбрасывался по завершению сеанса, а происходило суммирование времени всех сеансов, то нужно заменить в коде выше SessionStorage на LocalStorage. Это хранилище переживает даже закрытие вкладок и очистку cookie. Пример кода ниже.

function getSessionTime() {
  // Проверка, поддерживает ли браузер localStorage
  if (typeof localStorage !== 'undefined') {
    // Проверка, есть ли сохраненное значение времени начала сеанса в localStorage
    var sessionStartTime = localStorage.getItem('sessionStartTime');
    if (!sessionStartTime) {
      // Если сохраненного значения нет, установка нового значения
      sessionStartTime = new Date().getTime();
      localStorage.setItem('sessionStartTime', sessionStartTime);
    }

    // Вычисление времени прошедшего с начала сеанса, деление на 1000 нужно, чтобы перевести миллисекунды в секунды
    var elapsedTime = (new Date().getTime() - sessionStartTime)/1000;

    // Возвращаем (записываем) в нашу переменную новое значение времени сеанса
    return elapsedTime;
  }
  // Иначе записываем в переменную null
  return null;
}

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

Дайте переменной понятное имя и сохраните.

Сброс времени визита (сеанса) при бездействии посетителя

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

Для этого нам потребуется создать тег типа «Пользовательский HTML» с триггером «Все страницы» и вставить в него следующий код;

<script>
// Проверка, поддерживает ли браузер sessionStorage
if (typeof sessionStorage !== 'undefined') {

  // Отслеживание факта скролла или клика на странице. Изначально записываем в переменную hasScrollOrClick логическое нет (false)
  var hasScrollOrClick = false;

  // Прослушиваем клики, если есть, записываем в hasScrollOrClick логическое да (true)  
  document.addEventListener('click', function() {
    hasScrollOrClick = true;
  });

  // Запускаем цикл проверки процента скролла каждые 10 секунд, если прокрутка больше 50%, записываем в hasScrollOrClick логическое да (true)  
  setInterval(function() {
    // Определение высоты документа и текущей прокрутки
    var documentHeight = Math.max(
      document.body.scrollHeight,
      document.body.offsetHeight,
      document.documentElement.clientHeight,
      document.documentElement.scrollHeight,
      document.documentElement.offsetHeight
    );
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
    // Расчет прокрученной части страницы в процентах
    var scrollPercent = (scrollTop / (documentHeight - window.innerHeight)) * 100;

    // Проверка, что прокрутка больше 50% и запись true в hasScrollOrClick
    if (scrollPercent >= 50) {
      hasScrollOrClick = true;
    }
  }, 10000); // Проверка каждые 10 секунд (можно менять)

  // Проверка условия для очистки sessionStorage. Если 5 минут нет активности, сбрасываем счетчик времени сеанса
  var clearStorageTime = 300000; // 5 минут в миллисекундах (можно менять)    
  // Запускаем интервал проверки каждые 60 секунд
  setInterval(function() {
    // Если не было кликов и скролла 50%, считаем как долго не было активности
    if (!hasScrollOrClick) {
      var sessionStartTime = sessionStorage.getItem('sessionStartTime');
      var remeveTime = new Date().getTime() - sessionStartTime;
      // Если активности не было более чем записано в clearStorageTime (5 минут), очищаем счетчик времени сессии
      if (remeveTime >= clearStorageTime) {
        sessionStorage.removeItem('sessionStartTime');
      }
    }
  }, 60000); // Проверка каждую минуту

}
</script>

Вы можете поменять в коде ряд значений на удобные вам:

• интервал проверки прокрутки (скролла) с 10 секунд (нужно поменять 10000 миллисекунд на свое значение);
• через какое время сбрасывать счетчик у неактивных посетителей ( нужно заменить 300000 миллисекунд на свое значение);
• процент прокрутки, который вы считаете достаточным для того, чтобы считать пользователя активным и не сбрасывать счетчик (меняем 50 на свое значение здесь

if (scrollPercent >= 50) {

В Менеджере тегов Google будет так:

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

В качестве примера использования нашего счетчика, создадим тег, который отправит в Метрику (или в Google Analytics 4) цель только в том случае, когда посетитель отправил форму не ранее чем через 10 секунд после входа на сайт. Таким образом отсечем неинтересные нам фродовые лиды.

Создадим триггер активации

• тип — «отправка формы»;
• выбираем «Некоторые формы»;
• в поле «Активировать триггер при наступлении события» указываем свою переменную счетчика времени сеанса и выставляем условие «больше 10».Секунды указывать не нужно.

В Google Tag Manager будет так:

Триггер будет слушать отправки форм и срабатывать только для тех, которые отправлены не ранее чем через десять секунд после начала визита (сеанса). Если вам нужно отслеживать не все, а определенные формы, то просто добавьте нужное условие активации (они работают через оператор «И»). Мне на моем сайте нужно отслеживать только отправку форм с классом modal, поэтому у меня триггер будет выглядеть так:

Создадим тег отправки цели в Яндекс Метрику при отправке формы

• тип — «Пользовательский HTML»;
• триггер — созданный на предыдущем шаге.

В поле HTML вставляем такой код:

<script>
	ym('{{YM-number}}', 'reachGoal', 'form_submit');
</script>

Вместо {{YM-number}} вставляем свой код счетчика. Вместо form_submit вписываем свой идентификатор цели, которую вы создали в Метрике. Если в Метрике нет цели и вы не знаете как её создать, делайте пошагово, как на скриншоте:

Создадим тег отправки события в Google Analytics 4 при отправке формы

• тип — «Google Аналитика: событие GA4;
• тег конфигурации — ваш тег с настройками GA4;
• название события — «любое название, которое будет отображаться в интерфейсе Analytics». Я в своих проектах использую имя «generate_lead», т.к. это рекомендуемое событие Google (документация тут). ID формы я передаю как параметр события. В GTM это выглядит так:

P.S. Если будете делать так же как я, не забудьте в разделе «Администратор» → «Специальные определения» добавить специальный параметр form_id на уровне события.

На этом все. Теперь у вас будут отслеживаться только те формы, которые были отправлены не ранее чем через 10 секунд после начала визита.

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