Google Tag Manager — это простой, надежный и бесплатный сервис для аналитики сайта с помощью тегов. В GTM можно создавать и обновлять теги для сайта или мобильного приложения, проще использовать код сторонних служб, самостоятельно управлять тегами и заниматься тестированием и отладкой.
Для простоты понимания теги иногда называют метками, но не теми, которыми тегируют материалы. Здесь речь идёт о тегировании посетителей.
Что это такое и как работает
Теги представляют собой фрагменты кода, которые обычно помещаются в часть страницы. Они позволяют сторонним сервисам собирать данные и проводить анализ. Наиболее очевидными примерами являются Google Analytics и ряд других платформ, но теги используют также для ремаркетинга, отслеживания конверсий и других похожих задач.
Управление тегами является концепцией, которая родилась из растущей потребности в более гибком измерении маркетинга и способности отслеживать изменения. Сразу скажу: управление и внесение изменений в тегах является довольно утомительным занятием. Не хорошо использовать абстракции, поэтому возьмем пример из реальной жизни. Рассмотрим компанию SEOmoz.
Настройка Google Tag Manager
Первое, что потребуется – это зарегистрироваться на сервисе и разместить код контейнера на своем сайте.
1. Переходим на официальную страницу Google Tag Manager и нажимаем на «Start for free». Обязательно проверьте, чтобы вы были авторизированы в аккаунте Google – это понадобится, чтобы зарегистрироваться на сервисе. Если у вас нет аккаунта, то можете создать его здесь.
2. Следующим шагом выбираем «Создать аккаунт».
3. Указываем необходимые параметры и жмем «Создать».
Обращайте внимание на целевую платформу – здесь важно указать то, для чего будет использоваться инструмент, например, для приложения или веб-сайта. После этого потребуется принять пользовательское соглашение, для этого жмем на кнопку «Да».
4. В результате перед нами отобразится наш личный аккаунт и небольшое окно, в котором содержится весь необходимый код. Далее копируем код.
5. Если вы случайно закрыли окно, нажмите на уникальную надпись, отмеченную на скриншоте ниже.
6. Осталось разместить указанный код в шапку (<head>) вашего сайта.
В данном случае файл, в котором был прописан код, называется index.html. Также он может именоваться как header.php или как-то иначе, если сайт расположен на CMS.
Далее необходимо будет заняться настройкой встроенных переменных.
Google Tag Manager существуют следующие переменные:
- Страницы. Может принимать полный URL, относительный URL, имя хоста страницы и источник запроса.
- Утилиты. Используются для взаимодействия с событиями, ID и версией контейнера, названием рабочей области и ID HTML-тега.
- Ошибки. Данный тип позволяет посмотреть контейнер в режиме отладки, а также сообщить об ошибке, указать ее URL либо номер строки, где она зафиксирована.
- Клики. В качестве переменной можно использовать HTML-элементы, классы элементов, URL, текст элемента, атрибуты target и ID элемента.
- Формы. Может принимать элементы и классы формы, атрибуты target и href, а также текст формы.
- История. Этот тип переменных поддерживает активацию триггера при изменении хеша URL. Переменная может принимать новый и старый фрагмент URL, а также новое и старое состояние истории или источник истории.
Для того чтобы добавить новую переменную, достаточно отметить ее в меню конфигуратора, после чего она автоматически отобразится в рабочей области.
Настройка триггеров
Для начала давайте рассмотрим основные параметры триггеров, а затем перейдем к их настройке. Всего их 4 типа:
Просмотр страницы
- Модель DOM готова – выполняется во время загрузки страницы.
- Окно загружено – просмотр фиксируется при полной загрузке страницы и всех ее элементов.
- Просмотр страницы – активируется при переходе на страницу.
Клик
- Все элементы – действие по любому кликабельному элементу.
- Только ссылки – действие по клику на ссылку.
Взаимодействия пользователей
- Видео на YouTube – срабатывает при просмотре видео.
- Видимость элемента – срабатывает в зависимости от видимости элемента; выбрать отслеживание можно по ID элемента либо CSS-селектору.
- Глубина прокрутки – позволяет определить скролл страницы в вертикальной или горизонтальной прокрутке.
- Отправка формы – триггер запускается при отправке форм, при этом срабатывание можно настроить только на успешную отправку формы.
Другое
- Группа триггеров – позволяет добавить несколько триггеров в одну группу.
- Изменение в истории – отслеживает изменения в хэше URL-страницы.
- Ошибка JavaScript – срабатывает при появлении ошибки в JavaScript; также можно настроить триггер на ошибку в определенной строке кода.
- Специальное событие – лучшим примером пользовательского события является установка кода Яндекс.Метрики и Google Analytics для отслеживания формы, если стандартный тип триггера «Отправка формы» не сработал.
- Таймер – предназначен для срабатывания события через определенный отрезок времени. Примером может служить срабатывание таймера каждые 25 минут для продления отслеживания сеанса Google Analytics.
Теперь создадим триггер, который будет взаимодействовать с переменной. Для этого выполним следующее:
1. Открываем раздел «Триггеры» и выбираем «Создать».
2. Следующим шагом кликаем по области «Настройка триггера».
3. Для примера выберем триггер по клику «Только ссылки».
4. Указываем условие активации «Некоторые клики по ссылкам», выбираем предварительно созданную переменную и прописываем ссылку, переходы по которой будем отслеживать.
5. В завершение жмем «Сохранить».
При необходимости вы можете настроить более точное срабатывание с помощью дополнительных параметров.
Настройка тегов
Вот мы и пришли к самому интересному: после того как мы определили переменные и настроили триггеры, можно переходить к тегам. Их настройка начинается в разделе «Теги» с помощью кнопки «Создать».
В меню конфигуратора мы увидим два блока «Конфигурация тега» и «Триггеры». Первым делом нам понадобится верхний раздел – перейдем в него и посмотрим, что там находится.
Здесь мы можем выбрать один из тегов, который соответствует нужному нам сервису. Пусть это будет «Google Аналитика: Universal Analitics».
После этого перед нами отобразится окно настроек выбранного тега. Так как мы хотим использовать Google Analytics, потребуется добавить идентификатор отслеживания. Чтобы это сделать, отмечаем пункт «Включить переопределение настроек в этом теге» и вводим значение.
Найти идентификатор можно в аккаунте Google Analytics, Администратор -> Настройки ресурса -> Идентификатор отслеживания.
Теперь нам нужно привязать к этому тегу триггер – для этого на этой же странице открываем блок «Триггеры» и выбираем тип отслеживания просмотра страниц «All Pages». В данном случае мы используем триггер, который был автоматически сгенерирован сервисом. Если вы ранее создавали собственный тег, то можете добавить его, но только в том случае, если он подходит под данное действие.
В завершение сохраняем созданный нами тег.
Тег был создан, теперь давайте проверим его работоспособность – для этого в Google Tag Manager есть специальная функция «Предварительный просмотр».
На отобразившейся странице вводим ссылку на свой сайт и жмем «Start».
После этого будет выполнен переход на сайт. Если на панели отладки появится тег, то поздравляю. Все получилось!
Осталось опубликовать контейнер с созданным тегом. Для этого на главной странице выбираем «Отправить».
На этом настройка Google Tag Manager завершена. Как только вы нажмете на кнопку «Отправить», перед вами отобразится новое окно, в котором можно указать название версии и ее описание. После внесения изменений останется нажать на кнопку «Опубликовать».
Преимущества Google Tag Manager
Стоит понимать, что GTM – это не единственный сервис в своем роде, существуют такие системы, как Tealium, Adobe Dynamic Tag Manager, Yahoo Tag Manager.
Но выбирают Google по следующему ряду причин:
- У Google есть возможность использовать шаблоны для интеграции Google Analytics и прочих метрик.
- Разрешено внедрять пользовательские теги.
- Контроль версий, благодаря чему можно всегда откатиться к ранней версии.
- Настройка текстовой подмены, что позволяет мгновенно изменять варианты кода.
- Асинхронная загрузка тегов.
Также, стоит отметить, что GTG удобен в использовании и тем самым сильно облегчает многие задачи.