В одном из постов я кратко описал, для чего нужны переменные в Google Tag Manager 2.0., и что существует 2 вида переменных:

• Встроенные переменные(built-in variables);
• Пользовательские переменные(user-defined variables).

В данной статье речь пойдет о встроенных переменных.

Встроенные переменные — это переменные, которые создаются автоматически в каждом контейнере, и которые нельзя изменить. Фактически, это готовый набор переменных, которые могут быть полезны большинству пользователей Google Tag Manager. Работа с этими переменными ничем не отличается от пользовательских переменных. Единственное, на что стоит обратить внимание: часть встроенных переменных неактивна по умолчанию. И в этом случае вы не увидите их, например, в выпадающем списке переменных при создании триггера. Активировать их очень просто: в интерфейсе Google Tag Manage 2.0. нужно перейти в меню “Variables” и поставить галочку напротив тех переменных, которые мы планируем использовать:

Встроенные переменные

В Google Tag Manager на данный момент существует 6 категорий пользовательских переменных:

• Pages
• Clicks
• Utilities
• Forms
• Errors
• History

Pages

Эта одна из самых простых и часто используемых(на мой взгляд) категорий переменных. Переменные из этой категории используются, чтобы определить, где пользователь находится в данный момент относительно URL-структуры сайта.

Page URL — переменная возвращает полный URL текущей страницы.
Пример: если пользователь загрузил страницу http://mysite.com/posts?category=gtm#vars, то переменная вернет значение: http://mysite.com/posts?category=gtm (все, кроме хэша!).

Page Hostname — переменная возвращает имя хоста в URL текущей страницы.
Пример: для страницы http://mysite.com/posts?category=gtm#vars данная переменная вернет значение: mysite.com.

Page Path — переменная возвращает путь к странице в текущем URL.
Пример: на странице http://mysite.com/posts?category=gtm#vars данная переменная возвращает значение: /posts.
Важно отметить отличие от Universal Analytics, где Page Path(по умолчанию) включает в себя GET-параметры. Например, в GTM 2.0. для страниц:
http://mysite.com/posts?category=gtm
http://mysite.com/posts?category=ua
значение переменной {{Page Path}} будет /posts/.

А в Universal Analytics для первой страницы {{Page Path}} = /posts?category=gtm, а для второй страницы — /posts?category=ua.

Referrer — полный URL перехода к текущей странице.
Например, если пользователь со страницы http://mysite.com/examples перешел на страницу http://mysite.com/about, то значение данной переменной будет http://mysite.com/examples

Clicks

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

Click Element — переменная возвращает объект данных для того HTML-элемента, на который кликнул пользователь. В dataLayer этот объект можно найти под именем gtm.element(на скриншоте лишь часть его свойств):

В данном объекте очень много информации об HTML-элементе(на который кликнул пользователь), наиболее полезными являются поля id, class, innerText, parentElement.
На мой взгляд, данная переменная будет интересна для пользователей с опытом JavaScript-программирования и понимающих базовые принципы JS-объектов.

Например, можно получить свойсто className нажатого элемента в GTM-теге:
[html]
<script>
console.log({{Click Element}}.className);
</script>
[/html]

Click classes — возвращает HTML-свойство class для нажатого элемента.
Например, для элемента <span class=”myspan red”> при нажатии на него данная переменная будет равна myspan red.

Фактически, эта переменная — то же самое, что и {{Click Element}}.className, но в более удобном формате.

Click ID — возвращает HTML-свойство id для элемента, по которому был произведен клик.
Например, при нажатии на элемент <a id=”top-menu”> данная переменная вернет значение top-menu.

Аналог свойства {{Click Element}}.id.

Click Target — возвращает HTML-свойство target для кликнутого элемента.
Пример: при нажатии на ссылку <a target=»_blank» href=»https://www.facebook.com/yoursite/»> вернет значение _blank.

Аналог свойства {{Click Element}}.target.

Click URL — возвращает свойство href(для ссылок) или action(для форм).
Пример: при нажатии на ссылку <a href=”http://google.com”> переменная вернет http://google.com.

Аналог свойства {{Click Element}}.href для ссылок, и {{Click Element}}.action для форм.

Click Text — возвращает текст элемента, на который был произведен клик.
Пример: при нажатии на <a href=”/about”>About me</a> данная переменная вернет значение About me.

Аналог свойства {{Click Element}}.innerText.

Utilities

Эта категория, на мой взгляд, является служебной.

Event — возвращает подстроку, содержащую тип события, которое произошло на сайте и было отслежено в Google Tag Manager 2.0.

Примеры:
— При нажатии на любой элемент возвращает gtm.click
— При нажатии на ссылку возвращает gtm.linkClick,
— При заполнении формы — gtm.formSubmit

Container ID — возвращает номер контейнера GTM в формате GTM-XXXXXX.
Пример значения: GTM-TB7984.

Container Version — возвращает номер версии текущего контейнера GTM.
Пример значения: 19.

Random Number — возвращает случайное число от 0 до 2147483647.
Пример: 12323.

Errors

Иногда в JavaScript случаются ошибки, и разработчикам полезно понимать суть самой ошибки и в каком случае она происходит.
Используя встроенные переменные категории “Errors” в Google Tag Manager и Universal Analytics Event Tracking можно анализировать ошибки, происходящие на сайте(вплоть до анализа конкретных страниц, версий браузеров, разрешения экрана, типа устройства).
Важно отметить, что для использования этих переменных необходимо их активировать и создать хотя бы один триггер типа “JavaScript Error”. Также, предполагаю, что GTM прослушивает только те JS-ошибки, которые произошли после загрузки самого сниппета GTM.

В качестве примера я создал JS — файл error_js_runner.js, содержащий JavaScript-ошибку, и подключил его к шаблону сайта.
Содержание файла очень простое:

[javascript]
setTimeout(function(){
console.log(‘first line’);
console.log(unknown_function);
}, 3000);
[/javascript]

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

После запуска режима отладки в GTM, я вижу следующие значения переменных категории Errors:

Error Message — сообщение об ошибке JavaScript.
В моем примере это строка Uncaught ReferenceError: unknown_function is not defined

Error URL — URL пути к файлу, в котором произошла ошибка. Так как я в качестве примера разместил JS-файл с ошибкой прямо в корневой директории своего сайта, значение данной переменной в моем примере будет http://konygin.net/error_js_runner.js.

Error Line — строка файла, в которой произошла ошибка.
В примере выше эта переменная имеет значение 3.

Debug mode — возвращает true, если активирован режим отладки в Google Tag Manager.
В примере этот режим включен, поэтому переменная возвращает true.

Forms

Эта категория очень похожа на категорию “Clicks”.

Form element — возвращает JS-объект для формы, которая была отправлена пользователем. Например, атрибуты class, ID, данные о родительских и дочерних элементах.

Form classes — содержит набор атрибутов class для отправленной формы.
Например, после отправки формы <form class=”feedback” class=”ajax-form”>…</form> данная переменная будет содержать значение feedback ajax-form.

Form ID — содержит атрибут id для отправленной формы.
После отправки формы <form id=”contact” class=”ajax-form”>…</form> данная переменная будет содержать значение contact.

Form Target — содержит значение атрибута target для формы.
При отправке формы <form id=”contact” target=”_blank”>…&lt/form> данная переменная будет содержать значение _blank.

Form URL — для формы эта переменная содержит значение атрибута action. Переменная может быть очень полезна, если формам не присвоены атрибуты id и class, но формы отсылаются разным обработчикам на сервере. Например, если форма обратной связи отсылает данные на /contact_handler.php, а форма подписки на рассылку отсылает данные на /newsletter_handler.php.

При отправке формы <form action=”/contact_handler.php”>…</form> данная переменная будет содержать значение /contact_handler.php.

Form Text — переменная содержит в себе текст, содержащийся в отправленной форме и ее потомках.
Например, после отправки формы:
[html]
<form method="get" id="searchform" action="/sender.php">
<label for="s" class="screen-reader-text">Search for:</label>
<input type="text" name="s" id="s">
</form>
[/html]
переменная будет содержать значение Search for:.

History

Данная категория переменных будет полезна тем, кто имеет дело с сайтами, у которых контент подгружается динамически(как правило, с помощью AJAX). В таких сайтах содержимое страницы может меняться без ее перезагрузки, при этом, в адресной строке меняется хэш(например, /about#bio, /about#projects). Чтобы использовать переменные данной категоии, необходимо создать хотя бы один триггер типа “History Change”.

New History Fragment — значение хэша после события истории.
Например, пользователь перешел с /checkout#step1 на /checkout#step2(URL страницы не изменился, но изменился хэш).
Тогда значение переменной будет step2 (новый хэш).

Old History Fragment — значение хэша после события истории.
Пусть пользователь перешел с /checkout#step3 на /checkout#step4.
В таком случае, значение переменной будет step3(предыдущий хэш).

New History State — объект состояния истории после того, как произошло событие истории(JS-метод history.pushState() был выполнен).

Old History State — объект состояния истории, активный до того, как произошло событие истории(JS-метод history.pushState() был выполнен).

History Source — возвращает строку-событие, которое привело к изменению объекта истории.
Например, pushState или popstate.

Резюме

Google Tag Manager по умолчанию содержит встроенные переменные, которые часто используются для содания как тегов, триггеров, так и других переменных. Это очень удобный и мощный инструмент, позволяющий существенно сэкономить время в настройке GTM. Использование встроенных переменных порой позволяет заменить десятки строк кода всего парой кликов, да и не требует глубокого знаний в программировании.