Часть 1: встроенные переменные в GTM 2.0

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

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

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

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

GTM 2.0. активация переменной

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

В 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(на скриншоте лишь часть его свойств):
GTM 2.0. структура объекта 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:

Ошибки - dataLayer

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. Использование встроенных переменных порой позволяет заменить десятки строк кода всего парой кликов, да и не требует глубокого знаний в программировании.

Digital analytics consultant.

Want to improve your website performance?
Contact me!

  • Аркадий

    Очень полезная статья. Написано доступным языком. Главное — с примерами на каждом пункте. Мне, как начинающему изучать GTM2, статья очень помогла.

  • Как мне передать в GTM значение переменной model. Пробовал создать переменную уровня данных и прописывал имя pageSubCategory.model, но получал значение undefined.

  • Александр

    Большое вам спасибо. В рунете это единственная статья, которая раскладывает все по полкам. Очень помогли.

    • Ruslan Konygin

      Спасибо за отзыв, Александр,
      Рад, что статья вам пригодилась.

  • Дмитрий

    Руслан, а вы не сталкивались с проблемой активации триггеров по условию Page path\Page URL которые содержат кириллицу?

    У меня почему-то теги не запускаются если в условиях указано например «Page path содержит мазда»

    Пришлось делать через кракозябры, указывая вместо русского «мазда» конструкцию %D0%BC%D0%B0%D0%B7%D0%B4%D0%B0

    Триггер начал активировать тег, но тут же выявилась еще одна проблема — он срабатывал только когда «мазда» была сразу в начале пути, то бишь «адрессайта/мазда»

    А вот если оно дальше, к примеру «адрессайта/новая-мазда-обзор» то не срабатывает даже кракозябры.

    Как заставить GTM понимать кириллицу?

    • Ruslan Konygin

      Добрый день, Дмитрий,
      я сам с такой проблемой никогда не сталкиватся,
      сейчас зашел на кириллический домен и попробовал «декодировать» pagepath с помощью функции decodeURI: получается кириллический текст(как мы и видим в строке браузера).
      Возможно, вам поможет следующее:
      1. Создать переменную в GTM(custom Javascript), которая будет возвращать decodeURI(window.location.pathname)
      2. В триггере пробовать искать подстроку «мазда» уже в этой переменной

      Возможно, вам это поможет. Этот алгоритм обратен вашему: мы раскодируем «крокозябры» в кириллическую строку внутри GTM, а потом уже внутри строки пытаемся найти подстроку «мазда».
      К сожалению, потестировать, насколько это сработает, не могу.

      • Дмитрий

        Спасибо, попробуем

  • Мария

    Руслан добрый день!

    Столкнулась со сложностью настройки передачи страниц с URL по типу https://www.site.com/#/for/business
    В дополнительных настройках тега перепробовала разные комбинации, но url так и не передается в Universal
    Подскажите, пожалуйста, как корректно настроить тег,

    Один из последних способов настройки:
    Тип отслеживания — просмотр страницы
    В дополнительных настройках поля, которые необходимо задать:
    Название поля — {{Page Path}}
    значение — {{New History Fragment}}
    Условия активации — все страницы

    что я делаю не так?
    заранее благодарю

    • Ruslan Konygin

      Добрый день,
      сложности действительно могут возникать для таких URL, так как все, что находится после хэша(#), Universal Analytics будет игнорировать(при настройках по умолчанию). То есть, при просмотре страницы site.com/category/88/#/some-url/123 в Universal Analytics будет передана лишь подстрока «/category/88/»(имя сайта и хэш не передаются в Page Path).

      Проблема решается дополнительными настройками GTM,
      например, в поиске сразу же нашел довольно неплохую статью на эту тематику(правда, для GTM 1.0):
      http://www.first.com.au/blog/tracking-fragment-urls-in-universal-analytics-with-google-tag-manager/

      Для реализации вам может понадобиться небольшая помощь программиста. Хотя код в п.2. статьи можете просто скопировать самостоятельно.

      • Мария

        Спасибо огромное за то что не оставили мою просьбу без внимания!
        О настройках есть хорошая статья на русском языке (для таких как я) http://prometriki.ru/kak-v-universal-analytics-fiksirovat-znak-v-url/#comment-1582

        но к сожалению в ней описание настроек GTM первой версии и аналогичные настройки не помогли.

        А в указанной Вами статье код нужно разместить на сайте, я правильно понимаю?

        • Ruslan Konygin

          Код из указанной выше статьи нужно разместить внутри GTM-переменной.

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

  • Автору спасибо, написано на доступном (в отличии от мануального хелпа) и понятном языке

  • Руслан, огромное спасибо за статью! Реально лучшая в рунете 🙂
    Может быть у вас будет возможность подсказать мне решение проблемы? Неделю уже читаю всякое, все без толку.
    Суть задачи: на сайте в выпадающем жава-скрипт меню пользователь выбирает свой город. И в соответствии с выбранным городом я хочу менять выводимые контактные данные и режим работы. Доступа до скрипта выбора города нет, он внешний. Не могу сообразить, как и какой мне триггер прописать, чтобы контактные данные менялись «на лету».
    Буду признателен за помощь.

  • Сергей

    Спасибо за хорошую статью с примерами