Активация тега один раз за сеанс с использованием Google Tag Manager
Google Tag Manager предоставляет три основных варианта активации тегов - Без ограничений (Unlimited), Один раз на событие (Once per Event) и Один раз на страницу (Once per page). Но как быть, если вам необходимо активировать тег только один раз за сеанс или только при первом просмотре страницы? Решения есть и они давно известны.
В каких случаях может потребоваться активировать тег таким нетривиальным способом? Вот несколько примеров:
- когда вы передаете какие-то данные в Яндекс Метрику с помощью параметров визитов, и нужно это сделать один раз. Например, отслеживая User-Agent и передавая его в Яндекс Метрику не каждый раз с загрузкой счетчика, а только один раз. Иначе в отчете по параметром визита вы будете видеть большое количество одинаковых параметров визитов. Хотя, на самом деле, достаточно одной отправки;
- чтобы зафиксировать источник трафика (например, UTM-метки или домен реферера) только при первом визите, а не при каждой загрузке страницы;
- фиксация данных A/B-теста или эксперимента (если пользователь попал в определенную группу (например, вариант B в A/B-тесте), эту информацию нужно отправить один раз, чтобы не засорять данные);
- отслеживание уникальных событий (подписки или покупки), то есть ели событие должно учитываться только один раз, но пользователь может перезагрузить страницу;
- выполнять активацию тегов с целью запуска ретаргетинговых кампаний, например, когда пройдет N дней после первого просмотра страницы (или первого события);
- если данные (например, город или тип устройства) не меняются в рамках сессии, их можно отправить один раз;
- и так далее.
Использование файлов cookie
В 2014 году Симо Ахава описал решение для Universal Analytics, позволяющее запускать код только один раз не сеанс. В его основе используются файлы cookie. Если он существует, это означает, что сеанс все еще активен и никакой код не выполняется, кроме сброса времени истечения срока действия файла cookie. Если cookie не существует, это означает, что сеанс истек, и в этом случае можно запустить нужный код, а затем создать cookie и повторно уже его не запускать.
В 2019 году в блоге analyticsmania.com было опубликовано обновленное решение на основе файлов cookie, которое работает по следующему сценарию:
- когда посетитель попадает на страницу (любую страницу вашего сайта, где реализован контейнер GTM), срабатывает код JavaScript;
- этот код устанавливает файл cookie, содержащий количество просмотров страниц посетителем. Это число не ограничивается одним сеансом. Если посетитель в первый день выполнит 5 просмотров страниц и вернется через месяц, количество просмотров страниц изменится на 6 (если этот файл cookie будет все еще присутствовать в браузере пользователя);
- с помощью Google Tag Manager мы считываем значение cookie-файла и используем его в триггерах.
Вот код, который будет увеличивать количество просмотров страниц каждый раз при загрузке страницы (неважно, разные ли это страницы или посетитель просто нажимает кнопку Обновить на одной и той же странице. Его необходимо вставить в тег типа Пользовательский HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<script> function setCookie(name, value, expires) { var cookie = name + "=" + value + "; path=/; domain=." + location.hostname.replace(/^www\./i, ""); if (typeof expires !== "undefined") { var now = new Date(); now.setTime(now.getTime() + expires * 24 * 60 * 60 * 1000); cookie += "; expires=" + now.toUTCString(); } document.cookie = cookie; } function getCookie(name) { var cookies = document.cookie.split(";"), toReturn; for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); if (cookie.indexOf(name + "=") === 0) { toReturn = cookie.substring((name + "=").length, cookie.length); } } return toReturn; } (function() { var pageviewCount = getCookie("pageviewCount"); if (typeof pageviewCount === "undefined") { pageviewCount = 1; } else { pageviewCount++; } setCookie("pageviewCount", pageviewCount, 30); })(); </script> |
В качестве триггера активации можно задать Инициализация (Initialization) или Все страницы (All Pages). По умолчанию этот файл cookie действителен в течение 30 дней. Если вы хотите изменить эту настройку, отредактируйте число в 37-й строке кода.
1 |
setCookie("pageviewCount", pageviewCount, 30); // 30 означает, что cookie действителен в течение 30 дней |
Сам тег в Google Tag Manager будет выглядеть так:
Сохраните изменения.
Примечание: в другой статье моего блога описаны несколько способов подсчета просмотренных страниц с помощью Google Tag Manager. Прочитайте и ее, чтобы иметь альтернативные способы расчета.
После этого создайте пользовательскую переменную типа Собственный файл cookie, задав в ней название cookie pageviewCount, ровно так же, как это значение прописано в коде выше. Она вернет количество просмотров страниц, сохраненное в этом cookie-файле.
Сохраните переменную.
После этого вы можете открыть режим предварительного просмотра Google Tag Manager и проверить корректность выполненных настроек. Выберите любое событие на шкале (например, Загрузка контейнера) и перейдите на вкладку Переменные. Там вы должны увидеть переменную собственного файла cookie, созданную на предыдущем шаге. Она должна принять значение 1.
Перейдите на любую другую страницу своего сайта или просто обновите текущую. Вернитесь в режим отладки GTM и посмотрите какое значение переменная приняла в этот раз. Там должна отображаться цифра 2.
Таков принцип работы выполненных отслеживаний. Код JavaScript, который вы добавили в пользовательский тег HTML, ищет файл cookie с именем pageviewCount, и если он его находит, он увеличивает значение на единицу. Если вы видите значение undefined вместо цифр, вероятно, вы некорректно указали название файла cookie в переменную.
Во время тестирования вы можете удалить этот файл cookie (и начать отсчет снова с 0), перейдя в список файлов cookie вашего браузера и удалив его. Для этого откройте консоль разработчика через сочетание клавиш Ctrl + Shift + I (для Google Chrome), или через меню с тремя точками - Дополнительные инструменты - Инструменты разработчика. Перейдите на вкладку Application (Приложение). В разделе Cookies выберите свой домен и найдите в таблице файл cookie pageviewCount. Нажмите на правой кнопкой мыши и удалите файл cookie (Delete).
После этого вы можете обновить свои триггеры, задав им дополнительное условие активации. Например, вы хотите активировать тег только при первом просмотре страницы. Тогда в дополнительном условие активации вы должны задать такое условие - {{Cookie - pageviewCount}} cоответствует регулярному выражению 1|undefined:
Это означает, что если файл cookie содержит 1 (первый просмотр страницы) или если файл cookie еще не был создан и имеет значение undefined, этот триггер активируется. С помощью этого кода JavaScript вы можете настроить теги так, чтобы они срабатывали не только при первом просмотре страницы, но и только при втором, третьем и т.д. (когда файл cookie будет иметь значение 2,3,4 и так далее). Все зависит от реализации на вашем сайте.
Использование сеансового хранилища
Однако в связи с некоторыми ограничениями, с которыми веб-аналитики сталкиваются при работе с cookie, другим решением является использование локальных хранилищ - localStorage и sessionStorage. Нижеприведенный способ будет основан на сессионном хранилище.
Сам алгоритм отслеживания практически не отличается:
- с помощью Google Tag Manager создается элемент в объекте sessionStorage при первом просмотре страницы;
- его значение увеличивается при последующих просмотрах страниц;
- если оно < 2, то тогда и только тогда активируется тег. В других случаях триггер блокируется и тег не срабатывает.
Перейдите в Google Tag Manager и создайте тег типа Пользовательский HTML, вставив в него следующий код:
1 2 3 4 5 6 7 8 9 10 11 |
<script> // Используем строгую проверку (===) и parseInt, чтобы избежать строковых значений if (sessionStorage.getItem('pv') === null) { // Первый просмотр страницы в этой сессии sessionStorage.setItem('pv', '1'); } else { // Уже был просмотр — увеличиваем счетчик var currentPv = parseInt(sessionStorage.getItem('pv'), 10) || 0; sessionStorage.setItem('pv', (currentPv + 1).toString()); } </script> |
Он проверяет, есть ли в sessionStorage запись с ключом pv (счетчик просмотров). Если записи нет (первый просмотр в сессии), создает ее и устанавливает значение 1. Если запись есть (после первых просмотров), то получает текущий счетчик, преобразует его из строки в число (используя parseInt), затем увеличивает значение на 1 и обновляет это значение в sessionStorage.
В качестве триггера активации можно задать Инициализация (Initialization) или Все страницы (All Pages). Сам тег в Google Tag Manager будет выглядеть так:
Сохраните изменения.
После этого создайте пользовательскую переменную типа Собственный код JavaScript, чтобы вернуть значение из сессионного хранилища. Вставьте в нее следующую конструкцию:
1 2 3 4 |
function() { var sStorage = sessionStorage.getItem('pv'); return sStorage; } |
В Google Tag Manager:
Сохраните переменную.
После этого вы можете открыть режим отладки Google Tag Manager и проверить корректность выполненных настроек, точно так же, как вы проделывали в примере с использованием файлов cookie. Единственное отличие, которое есть - это то, что вам не нужно переходить в консоль разработчика и удалять метку pv из сессионного хранилища. Она уничтожается сама.
Данные, хранящиеся в браузерном сессионном хранилище (sessionStorage), удаляются в следующих случаях:
- закрытие вкладки или браузера - когда пользователь закрывает текущую вкладку или весь браузер, содержимое sessionStorage автоматически очищается;
- явное удаление программным способом - если в коде JavaScript вызывается метод sessionStorage.clear() или sessionStorage.removeItem(key), то соответствующие данные удаляются немедленно;
- перезагрузка страницы - при перезагрузке страницы данные в sessionStorage сохраняются, пока вкладка остается открытой;
- истечение сессии - если пользователь закрывает вкладку или браузер, сессия считается завершенной, и данные sessionStorage удаляются.
В отличие от localStorage, sessionStorage не сохраняется между сессиями и исчезает при закрытии вкладки или браузера.
Но чтобы увидеть саму метку в сессионном хранилище, вы можете перейти в консоль разработчика, на вкладку Application (Приложение) и открыть Session storage. Там вы должны увидеть ваш ключ pv с текущим значением просмотренных страниц:
После этого вы можете обновить свои триггеры, задав им дополнительное условие активации. Например, вы хотите активировать тег только при втором просмотре страницы. Тогда в дополнительном условие активации вы должны задать такое условие - {{CJS - sessionPageViewCount}} равно 2:
Как вы понимаете, это всего лишь пример, и окончательная настройка зависит от ваших пожеланий и реализации, которую вы планируете осуществить на сайте. Итоговый триггер применяется к тем тегам, которые отправляют данные в аналитику.