Счетчик просмотренных страниц с помощью GTM

28 апреля, 2020

Запустить триггер, тег после просмотра пользователем 1,2,3...N страниц (PageView)? Легко, особенно когда есть cookie и Google Tag Manager!

В этой статье я разберу несколько способов отслеживания количества просмотров страниц с помощью Google Tag Manager и продемонстрирую отличие работы сессионных кук от кук со сроком жизни. Рекомендую перед ознакомлением с этим материалом прочитать статью про cookie.

Данная задача является очень распространенной, поскольку позволяет посчитать для каждого пользователя количество просмотренных страниц в течение определенного времени, и, в зависимости от этого, настроить для него персональное предложение. Например, если пользователь просмотрел на сайте 5 страниц, то показать ему всплывающее окно с подпиской на новости, 10 - баннер со скидкой/подарком и т.д.

И поскольку это не так сложно, как кажется на первый взгляд, перейдем сразу к настройке. Способы, описанные в этой статье, уже были разобраны в интернете задолго до меня. В русскоязычном сообществе я пока не видел решений в GTM на основе файлов cookie. Есть статья за 2015 год от Ивана Иванова, автора блога prometriki.ru, но она немного устарела. Предлагаю вам обновленный вариант настройки счетчика просмотренных страниц с помощью Google Tag Manager.

Важно: из-за различий в работе браузеров представленные ниже способы и решения подсчета могут отслеживаться по-разному.

Решение №1. ProMetriki

Создайте тег типа Пользовательский тег HTML со следующим кодом:

<script>
    var counter = getCookie('counter');
    if ( counter != null ){
        counter++;
    }
    else {
        counter = 1;
    }
    setCookie('counter', counter);
</script>

var counter = getCookie('counter');

if ( counter != null ){

counter++;

}

else {

counter = 1;

}

setCookie('counter', counter);

</script>

В Google Tag Manager это будет выглядеть так:

Счетчик просмотренных страниц с помощью GTM

Скрипт ProMetriki

Триггер активации - Все страницы (All Pages).

Сначала с помощью команды getCookie мы получаем значение cookie. Затем идет проверка - если оно не установлено, то присваивается значение 1, а если установлено, то счетчик увеличивает значение на единицу (+1). По окончании мы устанавливаем обновленное значение куки с помощью setCookie. Поскольку в setCookie не задан третий параметр, то куки являются сеансовыми и будут существовать пока пользователь не закроет браузер. Чтобы получать значение из counter с момента последнего открытия страницы сайта в течение определенного времени, необходимо установить дополнительное значение. Добавим его чуть позже в другом способе.

Чтобы получить значение из counter, необходимо создать пользовательскую переменную типа Основной файл cookie (1st Party Cookie) с названием counter:

Основной файл cookie - counter

Сохраняем настройки. Теперь необходимо настроить триггер активации. Для этого можно воспользоваться типом Окно загружено и задать условие, в результате которого будет активироваться триггер. Например, если пользователь просмотрит больше или равно 3 страницам:

Пользователь просмотрел 3 или больше страниц

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

Решение №2. gtmscripts.com

Действия по настройке аналогичны предыдущему примеру. Создайте тег типа Пользовательский тег HTML со следующим кодом (оригинал):

<script>
  (function() {
  if (typeof {{PageNumber}} === 'undefined') {
var cookieName  = "PageNumber"; 
var cookieValue = 0;
var cookiePath  = "/";
var expirationTime = 1800;        // Срок жизни в секундах, 30 минут (60*30)
expirationTime = expirationTime * 1000;                 
var date = new Date();                                  
var dateTimeNow = date.getTime();                       
date.setTime(dateTimeNow + expirationTime);             
var expirationTime = date.toUTCString();               
document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path="+cookiePath;  
  }    
    
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}    
 
var cookieName  = "PageNumber"; 
var cookieValue = 1 + parseInt(readCookie("PageNumber"));
var cookiePath  = "/";
var expirationTime = 1800;       // Срок жизни в секундах, 30 минут (60*30)                    
expirationTime = expirationTime * 1000;                
var date = new Date();                                 
var dateTimeNow = date.getTime();                       
date.setTime(dateTimeNow + expirationTime);             
var expirationTime = date.toUTCString();                
document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path="+cookiePath;    
 })();
</script>
 
<script>
dataLayer.push({'event':'PageViewEvent'});
</script>

(function() {

if (typeof {{PageNumber}} === 'undefined') {

var cookieName = "PageNumber";

var cookieValue = 0;

var cookiePath = "/";

var expirationTime = 1800; // Срок жизни в секундах, 30 минут (60*30)

expirationTime = expirationTime * 1000;

var date = new Date();

var dateTimeNow = date.getTime();

date.setTime(dateTimeNow + expirationTime);

var expirationTime = date.toUTCString();

document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path="+cookiePath;

}

function readCookie(name) {

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for (var i = 0; i < ca.length; i++) {

var c = ca[i];

while (c.charAt(0) == ' ') c = c.substring(1, c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

}

return null;

}

var cookieName = "PageNumber";

var cookieValue = 1 + parseInt(readCookie("PageNumber"));

var cookiePath = "/";

var expirationTime = 1800; // Срок жизни в секундах, 30 минут (60*30)

expirationTime = expirationTime * 1000;

var date = new Date();

var dateTimeNow = date.getTime();

date.setTime(dateTimeNow + expirationTime);

var expirationTime = date.toUTCString();

document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path="+cookiePath;

})();

</script>

dataLayer.push({'event':'PageViewEvent'});

</script>

В Google Tag Manager это выглядит так:

Скрипт gtmscripts.com

Триггер активации - Все страницы (All Pages).

В этом коде есть два существенных отличия:

переменная {{Page Number}}, на которую ссылаются (выделена стрелкой на скриншоте). Здесь необходимо использовать ту переменную, которую мы создадим далее с именем PageNumber;
дополнительная строчка кода с методом dataLayer.push({'event':'PageViewEvent'}), которая вызывает событие PageViewEvent (название может быть произвольным) каждый раз после просмотра страницы. Оно нам пригодится позже при настройке триггера.

В примере срок жизни куки составляет 1800 секунд (30 минут). По умолчанию сеанс в Google Analytics и Яндекс.Метрике заканчивается через 30 минут бездействия.

Необходимо создать пользовательскую переменную типа Основной файл cookie (1st Party Cookie) с названием cookie PageNumber:

Основной файл cookie - PageNumber

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

Корректность настройки можно проверить с помощью режима отладки и консоли разработчика. В режиме предварительного просмотра появится наше событие PageViewEvent, а на вкладке Application - Cookies отобразится значение куки PageNumber:

Событие PageViewEvent и значение куки в консоли разработчика

Значение куки (число 4) мы можем посмотреть не только в консоли разработчика, но и на вкладке Variables напротив PageNumber:

Значение PageNumber на вкладке Variables

Теперь можем создать триггер активации типа Пользовательское событие с именем PageViewEvent для активации других кодов и тегов, если количество просмотров страниц у пользователя, например, будет больше 3:

Триггер сработает, если количество просмотров страниц будет больше 3

Решение №3. analyticsmania.com

Самый простой способ настройки счетчика с помощью cookie и GTM. Все, что нужно сделать, это:

перейти на страницу блога Analytics Mania;
скачать готовый файл JSON с настроенными переменными, триггерами и тегами;
импортировать файл к себе в контейнер GTM;
настроить любой тег, который вы хотите, триггеру Window Loaded - 3rd Page View. Это решение устанавливает cookie и создает только триггер. Вам придется создать собственный тег для передачи данных в инструменты веб-аналитики вручную.
проверить корректность всех настроек с помощью режима предварительного просмотра. Если все хорошо, просто опубликуйте контейнер GTM с изменениями;
изменить срок жизни куки (необязательно), который в этом скрипте составляет 30 дней. Если вы хотите изменить срок действия, замените число 30 на собственное значение в теге cHTML - Set Cookie - Pageview Counter;

Изменение срока жизни куки

изменить правило активации триггера (необязательно), которое по умолчанию составляет Количество просмотренных страниц больше или равно 3:

Сохраните изменения. Как и в примерах выше, вы можете создать тег Universal Analytics и передать данные в Google Analytics, а можете использовать триггер для запуска другого кода, например, показа баннера.

Если вы хотите, чтобы триггер срабатывал не каждый раз, когда значение в куки будет больше или равно 3, а только один раз, когда оно равно определенному значению (например, просмотр 5 страниц), то просто измените условие активации триггера с больше или равно 5 на условие равно 5. Аналогично можно сделать и для пользовательского события PageViewEvent.

Метки: Analytics Mania, cookie, Google Tag Manager, ProMetriki

Счетчик просмотренных страниц с помощью GTM

Получайте бесплатные уроки и фишки

Еще статьи