#analyticsTips: Улучшенный триггер таймера в Google Tag Manager: запускаем таймер по времени активности вкладки

Улучшенный триггер таймера в Google Tag Manager: запускаем таймер по времени активности вкладки

      Одна из главных проблем маркетологов и веб-аналитиков — большое количество параллельно открытых вкладок в браузерах пользователей.

Главная проблема маркетолога

      Именно они и не позволяют посетителям сконцентрироваться только на нашем контенте. Поэтому, маркетологи придумывают различные “уловки”, чтобы удерживать внимание пользователей. Еще большей проблемой это является для аналитика: при таком количестве вкладок нельзя быть уверенным, что пользователь все время от начала загрузки до определенного момента провел на странице.

      В итоге могут возникать абсурдные ситуации:

  • Маркетолог хочет показать окно со спец. предложением пользователю, который пробыл на странице больше 2 минут. Пользователь открыл страницу и переключился на соседнюю вкладку. Спустя 5 минут вернулся и сразу видит специальное предложение. Особенно забавно это выглядит в таких случаях: 

Всплывающее окно по таймеру

  • Аналитик хочет собрать аудиторию людей, которые провели на определенной странице больше 3 минут, чтобы в дальнейшем догнать их ремаркетингом. Для этого он настраивает триггер таймера на 3 минуты и отправляет соответствующее событие в Google Analytics. Пользователь открывает несколько вкладок, на одной из них в течении 5 минут находит ответ на свой вопрос и закрывает все, включая нашу. Такой пользователь попадет в новосозданную аудиторию, хотя реально на странице даже не был.

      Подобные примеры можно приводить бесконечно, но лучше показать решение. Как видите, обычный триггер таймера в Google Tag Manager уже не кажется таким прекрасным, поэтому давайте напишем свой.

Настройка таймера по времени активности вкладки

      В этом решении будем использовать  Page Visibility API с помощью которого мы можем отследить активна вкладка на данный момент или нет. В моменты активной вкладки таймер работает, в противном случае таймер ставится на паузу. Спасибо Eugen Hardysh, который помог написать этот код.

<script>

 (function($) {

   $.fixTime = function() {

     var dateObj = new Date();

     return Math.floor(dateObj.getTime() / 1000);

   }

 })(jQuery);

 function onVisibilityChange() {

   var current_timestamp;

   if (document.visibilityState === "hidden") {

     invisibility_time = jQuery.fixTime();

   } else {

     current_timestamp = jQuery.fixTime();

     window_invisibility_time += (current_timestamp - invisibility_time);

   }

 }

 //Осуществляем вызов вышеописанных функций и передаем данные в GTM

 jQuery(document).ready(function() {

   /* Через сколько секунд после загрузки окна отправлять данные в dataLayer? */

   TIME_WHEN_SEND_DATA = 30;

   // дальше тело скрипта

   invisibility_time = 0;

   window_invisibility_time = 0;

   document.addEventListener('visibilitychange', onVisibilityChange, false);

   if (document.visibilityState === "visible") {

     if (typeof dataLayer === 'undefined') {

       console.log('dataLayer НЕ ОПРЕДЕЛЁН!!!');

     } else {

       var startLiveDoc = jQuery.fixTime();

       var check_time = function() {

         if (document.visibilityState === "visible" && jQuery.fixTime() - startLiveDoc - window_invisibility_time === TIME_WHEN_SEND_DATA) {

           dataLayer.push({

             'event': 'active_time_' + TIME_WHEN_SEND_DATA

           });

         } else {

           setTimeout(check_time, 1000);

         }

       };

       check_time();

     }

   }

 });

</script>

      Вам всего лишь нужно изменить значение переменной TIME_WHEN_SEND_DATA. Время необходимо указать в секундах. Давайте настроим это. Нам понадобится тег типа Пользовательский HTML, в который мы поместим наш скрипт и триггер пользовательского события.

Пользовательский тег таймер по времени активности вкладки

      Для тега со скриптом будем использовать триггер All Pages. Так как мы с вами делаем таймер, его не обязательно запускать сразу при загрузке страницы. При необходимости вы можете использовать и другие триггеры.

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

Триггер таймера активности вкладки в Google Tag Manager

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

dataLayer.push({

        'event': 'active_time',

        'time': TIME_WHEN_SEND_DATA

});

      Конечно, такое решение не позволит отследить посетителей, которые открыли вкладку и пошли делать себе кофе, но оно в любом случае сделает ваши данные более точными. 

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