Что такое Google Tag Manager и зачем он нужен?
Google Tag Manager (GTM) – это система управления тегами, позволяющая быстро и удобно развертывать и обновлять маркетинговые и аналитические теги (фрагменты кода) на веб-сайте без непосредственного изменения кода сайта. Это значительно упрощает процесс внедрения различных инструментов аналитики, отслеживания конверсий и ремаркетинга, позволяя маркетологам и аналитикам работать более независимо от разработчиков.
Обзор переменных GTM: типы и назначение
Переменные в GTM – это именованные контейнеры, хранящие значения, которые могут быть использованы в тегах, триггерах и других переменных. Существуют различные типы переменных:
- Встроенные переменные: Предопределенные переменные, такие как URL страницы, hostname, referrer и другие.
- Переменные уровня данных (Data Layer): Переменные, извлекаемые из объекта
dataLayer, который передает данные с сайта в GTM. - Пользовательские переменные: Переменные, которые вы определяете сами, используя JavaScript, таблицы поиска, константы и другие типы переменных.
Пользовательский HTML тег: возможности и ограничения
Пользовательский HTML тег позволяет вставлять произвольный HTML и JavaScript код на страницу через GTM. Это мощный инструмент, но требующий осторожности. Он дает возможность реализовать сложные сценарии отслеживания, интеграции и персонализации, которые не предусмотрены стандартными типами тегов. Однако, неправильное использование пользовательского HTML может привести к проблемам с производительностью сайта и безопасности.
Почему использовать переменные GTM в пользовательском HTML?
Использование переменных GTM в пользовательском HTML теге позволяет сделать код более динамичным и адаптивным. Вместо жестко закодированных значений можно использовать переменные, которые автоматически обновляются в зависимости от контекста (например, от текущей страницы, действий пользователя или данных из dataLayer). Это значительно упрощает управление и поддержку кода, а также повышает гибкость системы отслеживания.
Как использовать переменные GTM в пользовательском HTML теге
Синтаксис использования переменных GTM в HTML
Для использования переменной GTM в пользовательском HTML теге, необходимо заключить имя переменной в двойные фигурные скобки: {{имя_переменной}}. GTM автоматически заменит это выражение на текущее значение переменной при выполнении тега.
Доступ к переменным уровня данных (Data Layer)
dataLayer – это JavaScript объект, который используется для передачи данных с вашего сайта в Google Tag Manager. Для доступа к данным из dataLayer нужно создать переменную типа «Переменная уровня данных» и указать имя ключа, который необходимо получить.
Например, если dataLayer содержит { 'productName': 'Книга', 'price': 25 }, то для получения названия продукта нужно создать переменную productName типа «Переменная уровня данных» и указать productName в качестве имени ключа.
// Пример добавления данных в dataLayer
dataLayer.push({
'event': 'productView',
'productName': 'Книга',
'price': 25
});
// Пример пользовательского HTML тега, использующего переменную dataLayer
<script>
var productName = '{{productName}}'; // productName - имя переменной GTM типа "Переменная уровня данных"
console.log('Просмотрен продукт: ' + productName);
</script>
Использование встроенных переменных GTM (Built-in Variables)
GTM предоставляет ряд встроенных переменных, таких как {{pageURL}}, {{pageTitle}}, {{event}} и другие. Для их использования достаточно активировать нужные переменные в настройках контейнера GTM. После активации их можно использовать в пользовательском HTML теге, как и любые другие переменные.
<script>
console.log('URL страницы: {{pageURL}}');
console.log('Заголовок страницы: {{pageTitle}}');
</script>
Применение пользовательских переменных (User-Defined Variables)
Пользовательские переменные позволяют определять собственные правила получения данных. Например, можно создать переменную, которая извлекает значение cookie, получает данные из localStorage или выполняет произвольный JavaScript код.
«`javascript
// Пример пользовательской переменной типа