Для чего может понадобится подобная функция? Например для отслеживания последовательности действий пользователя.
Прежде чем перейдем к установке и чтению cookie в Google Tag Manager, определим что такое cookie. За информацией обратимся к wikipedia.org.
Куки (от англ. cookie — печенье) — небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Веб-клиент (обычно веб-браузер) всякий раз при попытке открыть страницу соответствующего сайта пересылает этот фрагмент данных веб-серверу в виде HTTP-запроса. Применяется для сохранения данных на стороне пользователя…
Теперь практика, вначале немного JavaScript. Для установки cookie необходимо использовать следующий вызов:
|
1 |
document.cookie = "name=value; expires=дата; path=путь; domain=домен; secure"; |
- name — имя для cookie;
- value — значение присваиваемое cookie
- expires — до какого времени будет «жить» cookie;
- path — путь, внутри которого будет доступ к cookie;
- domain — домен, на котором доступно cookie;
- secure — cookie можно передавать только по HTTPS.
Secure обычно не используются, domain не указывается, если cookie устанавливается для текущего домена, а для path значение / означает, что cookie доступно со всех страниц сайта.
Expires — время (дата) истечения куки в формате GMT. Если дату не указать, то cookie удаляется при закрытии браузера. Если дата в прошлом, то cookie будет удалена.
Чтобы сделать работу с cookie более удобной используют различные функции, облегчающие повседневные операции. Функция установки значения может быть следующей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function set_cookie( name, value, expires, path, domain, secure ) { var cookie_string = name + "=" + escape ( value ); if ( typeof expires == 'number' && expires > 0 ) { var d = new Date(); var n = new Date(d.setTime( d.getTime() + expires*1000 )); expires = n.toUTCString(); cookie_string += "; expires=" + expires; } if ( path ){ cookie_string += "; path=" + escape ( path ); } else { cookie_string += "; path=/"; } if ( domain ) cookie_string += "; domain=" + escape ( domain ); if ( secure ) cookie_string += "; secure"; document.cookie = cookie_string; } |
Удобство описанной функции в том, что вы можете передать в качестве expires количество секунд, на которое необходимо установить cookie.
Если вам необходимо получить значение ранее установленной cookie используется следующий вызов:
|
1 |
var my_var = document.cookie; |
Выполнение этого кода вернет строку, которая будет содержать список пар имя/значение, разделенных точкой с запятой для всех cookie, которые существуют для текущей страницы:
|
1 |
"my_var1=value1; my_var2=value2" |
Как и ранее, для облегчения получения значения ранее установленной cookie используют дополнительные функции, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function get_cookie( name ) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if ( cookie.length > 0 ) { offset = cookie.indexOf( search ); if (offset != -1) { offset += search.length; end = cookie.indexOf( ";", offset ) if (end == -1) { end = cookie.length; } setStr = unescape( cookie.substring( offset, end ) ); } } return( setStr ); } |
Чтобы при необходимости удаления куки не высчитывать каждый раз нужное значение времени/даты, возможно использование следующей функции:
|
1 2 3 4 5 |
function delete_cookie( name ) { var expires = new Date (); expires.setTime ( expires.getTime() - 1 ); document.cookie = name += "=; expires=" + expires.toGMTString(); } |
Теперь у нас есть необходимый набор функций для установки, чтения и удаления cookie. Несколько практических примеров использования описанных выше функций.
Установка cookie с именем name до закрытия браузера:
|
1 2 3 4 5 6 |
var my_value = 'Привет мир!'; set_cookie( 'name', my_value ); // или set_cookie( 'name', 'Привет мир!' ); |
Чтение ранее уставленной cookie с именем name:
|
1 |
var my_value = get_cookie( 'name' ); |
Удаление cookie с именем name:
|
1 |
delete_cookie( 'name' ); |
Установка cookie с именем name на сутки:
|
1 2 3 4 5 6 7 |
var my_value = 'Привет мир!'; var expires = 60*60*24; // секунды*минуты*часы set_cookie( 'name', my_value, expires ); // или set_cookie( 'name', 'Привет мир!', 60*60*24 ); |
Для того чтобы использовать названные функции на страницах сайта, необходимо создать новый тег в Google Tag Manager.
Задайте удобное для вас имя тега, например Функции JavaScript, укажите тип тега Пользовательский тег HTML, затем в поле ввода содержимого тега добавьте первую строку <script> затем разметите функции записи, изменения и удаления cookie, после чего завершающей строкой укажите </script>.
Тег Google Tag Manager с функциями JavaScript
Заполнив поля настройки тега не забудьте указать правила активации, если вам необходима активация тега на всех страницах сайта используйте существующее правило — Все страницы.
Теперь необходимо создать теги, которые будут использовать функции манипуляции cookie. Попробуем создать счетчик просмотра количества страниц сайта посетителем и выводить предупреждение с данными счетчика.
Создайте новый тег типа Пользовательский тег HTML, укажите произвольное имя и правило активации Все страницы. В поле HTML введите следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var counter = get_cookie( 'counter' ); if ( counter != null ){ counter++; alert('Это ' + counter + ' ваше посещение!'); } else { alert('Здравствуйте! Это ваше первое посещение!'); counter = 1; } set_cookie( 'counter', counter ); </script> |
Краткое пояснение алгоритма:
- получаем значение cookie;
- проверяем значение cookie и если не установлено, то присваиваем значение 1, если ранее установлено, то увеличиваем значение на единицу больше;
- сохраняем обновленное значение cookie.
Обратите внимание на строку:
|
1 |
set_cookie( 'counter', counter ); // cookie устанавливается до закрытия браузера |
Отсутствует третий параметр, это значит, что cookie будет «жить» до закрытия браузера, установив его значение, например, в 3600, мы сможем получать cookie в течении часа с момента последнего открытия страницы сайта:
|
1 |
set_cookie( 'counter', counter, 3600 ); // cookie устанавливается на час |
Пример работы описанного процесса в Google Chrome:
Пример работы тега
Если Вам понадобится удалить cookie, используйте следующий код:
|
1 |
delete_cookie( 'cookie' ); |
Если материал оказался полезным и интересным для вас, прошу поделиться им в социальных сетях.
