Google Tag Manager (GTM) – мощный инструмент для управления тегами на вашем сайте, позволяющий отслеживать действия пользователей, собирать данные для аналитики и оптимизировать маркетинговые кампании. Правильная первоначальная настройка GTM критически важна для эффективной работы. В этом руководстве мы рассмотрим ключевые шаги и настройки, которые необходимо выполнить сразу после создания аккаунта.
Создание и настройка аккаунта Google Tag Manager: пошаговая инструкция
- Перейдите на сайт Google Tag Manager (https://tagmanager.google.com/).
- Войдите в свой аккаунт Google.
- Нажмите кнопку «Создать аккаунт».
- Укажите название аккаунта (например, название вашей компании).
- Выберите страну.
- Укажите название контейнера (например, название вашего сайта).
- Выберите платформу (Web, AMP, iOS, Android). Для большинства сайтов это будет «Web».
- Примите условия использования Google Tag Manager.
Установка контейнера GTM на сайт: различные способы реализации
После создания аккаунта и контейнера вы получите код контейнера GTM. Существует несколько способов его установки на сайт:
- Непосредственно в код сайта: Вставьте первый фрагмент кода как можно выше в
<head>, а второй фрагмент кода сразу после открывающегося тега<body>. Это самый надежный способ. - Через CMS (Content Management System): Многие CMS (WordPress, Joomla, Drupal и др.) предлагают плагины или модули для интеграции с GTM. Установите плагин и укажите ID вашего контейнера GTM.
- Через платформы электронной коммерции: Платформы электронной коммерции (Shopify, Magento, WooCommerce и др.) также могут предлагать встроенные инструменты для интеграции с GTM.
Важно: Убедитесь, что код контейнера GTM установлен на всех страницах вашего сайта.
Предварительный просмотр и отладка: проверка корректности установки GTM
После установки кода контейнера необходимо проверить, правильно ли он работает. Для этого используйте режим предварительного просмотра и отладки (Preview Mode) в GTM.
- В интерфейсе GTM нажмите кнопку «Предварительный просмотр».
- Введите URL вашего сайта.
- Перейдите на свой сайт. В нижней части страницы появится панель отладки GTM.
- Проверьте, срабатывают ли теги и триггеры, которые вы настроили. Если нет, проверьте настройки и исправьте ошибки.
Основные переменные Google Tag Manager: Настройка и использование
Переменные в GTM позволяют собирать и использовать данные о действиях пользователей на вашем сайте. Существуют три основных типа переменных:
Встроенные переменные: активация и выбор необходимых параметров
Встроенные переменные – это переменные, которые уже существуют в GTM. Для их использования необходимо активировать их.
- Перейдите в раздел «Переменные».
- В разделе «Встроенные переменные» нажмите кнопку «Настроить».
- Выберите переменные, которые вам необходимы (например,
pageURL,pagePath,event).
Пользовательские переменные: создание и настройка для сбора специфических данных
Пользовательские переменные позволяют собирать данные, которые не доступны во встроенных переменных. Например, ID пользователя, цену товара, категорию товара.
Пример пользовательской переменной (Data Layer Variable):
Предположим, у вас есть следующий Data Layer на странице товара:
dataLayer.push({
'event': 'productView',
'productName': 'Кружка с логотипом',
'productPrice': 15.00,
'productCategory': 'Сувениры'
});
Чтобы получить цену товара, вы создаете пользовательскую переменную типа «Data Layer Variable» и указываете «productPrice» в качестве имени переменной Data Layer.
Переменные уровня данных (Data Layer): внедрение и использование
Data Layer – это объект JavaScript, который позволяет передавать данные из вашего сайта в GTM. Data Layer – наиболее рекомендуемый способ передачи данных, так как он обеспечивает гибкость и структурированность.
Пример добавления данных в Data Layer:
/**
* Добавляет информацию о просмотренном товаре в Data Layer.
* @param {string} productName - Название товара.
* @param {number} productPrice - Цена товара.
* @param {string} productCategory - Категория товара.
*/
function pushProductViewToDataLayer(productName, productPrice, productCategory) {
if (window.dataLayer) {
window.dataLayer.push({
'event': 'productView',
'productName': productName,
'productPrice': productPrice,
'productCategory': productCategory
});
}
}
// Пример использования:
pushProductViewToDataLayer('Футболка с принтом', 25.00, 'Одежда');
Первые теги и триггеры: Настройка отслеживания базовых событий
Теги – это фрагменты кода, которые выполняются при наступлении определенных событий (триггеров). Рассмотрим настройку основных тегов и триггеров.
Настройка тега Google Analytics: отслеживание просмотров страниц
- Создайте тег типа «Google Analytics: Universal Analytics».
- Выберите тип отслеживания «Просмотр страницы».
- Укажите ваш ID отслеживания Google Analytics.
- Создайте триггер типа «Просмотр страницы» и выберите «Все страницы».
- Сохраните тег и триггер.
Настройка тегов отслеживания кликов: отслеживание кликов по ссылкам и кнопкам
- Активируйте встроенные переменные
Click URLиClick Text. - Создайте тег типа «Google Analytics: Universal Analytics».
- Выберите тип отслеживания «Событие».
- Укажите категорию, действие и ярлык события. Используйте переменные
Click URLиClick Textдля динамического сбора данных. - Создайте триггер типа «Клик – Только ссылки» или «Клик – Все элементы». Настройте фильтры, чтобы отслеживать клики по определенным ссылкам или кнопкам.
Настройка тегов отслеживания отправки форм: сбор данных из форм
- Включите встроенную переменную
Form ID. - Создайте триггер типа «Отправка формы». Можно настроить фильтр по
Form ID. - Создайте тег типа «Google Analytics: Universal Analytics», укажите тип «Событие».
- В настройках тега используйте переменные для отправки данных о форме (например,
Form ID,Form Text).
Права доступа и организация рабочего пространства: Настройка для команды
Если вы работаете в команде, важно правильно настроить права доступа и организовать рабочее пространство.
Управление пользователями и правами доступа в Google Tag Manager
- Перейдите в раздел «Администрирование».
- В разделе «Управление пользователями» добавьте новых пользователей и назначьте им роли (например, администратор, редактор, утверждающий).
Организация работы: создание рабочих пространств и версий
Рабочие пространства позволяют нескольким пользователям одновременно работать над разными частями контейнера. Версии позволяют отслеживать изменения и возвращаться к предыдущим конфигурациям.
- В разделе «Рабочие области» создайте новые рабочие области для разных задач (например, «SEO», «Реклама», «Аналитика»).
- Регулярно создавайте новые версии контейнера, чтобы фиксировать изменения.
Расширенные настройки и полезные советы для начинающих
Настройка согласия на использование cookie (Cookie Consent)
В связи с GDPR и другими законами о конфиденциальности, важно настроить согласия на использование cookie. GTM можно использовать для управления cookie consent banner и блокировки тегов до получения согласия пользователя.
Использование пользовательского HTML-тега: примеры и рекомендации
Пользовательский HTML-тег позволяет добавлять произвольный код JavaScript или HTML на ваш сайт. Это мощный инструмент, но его следует использовать с осторожностью.
Пример использования Custom HTML Tag для загрузки внешней библиотеки:
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://example.com/my-custom-library.js';
script.async = true;
document.head.appendChild(script);
})();
</script>
Важно: Тщательно протестируйте пользовательский HTML-код, чтобы избежать ошибок и проблем с безопасностью.
Рекомендации по оптимизации и отладке работы GTM
- Используйте режим предварительного просмотра и отладки. Это поможет вам выявить и исправить ошибки.
- Называйте теги, триггеры и переменные понятными именами. Это облегчит работу с GTM.
- Регулярно проверяйте работу GTM. Убедитесь, что теги срабатывают правильно и данные собираются корректно.
- Используйте Google Tag Manager Debugger Chrome Extension. Полезный инструмент для отладки.
- Оптимизируйте количество тегов. Избыточное количество тегов может замедлить загрузку страницы.