GTM: Основа работы
Привет. Я Дмитрий Макаров. Занимаюсь рекламой с 2013 года. Продвигал более сотни проектов, в т.ч. собственные. Самый долгосрочный проект веду 8-й год. Люблю всё, что позволяет гибко настроить аналитику, а так же поиск и сбор ЦА)
Google Tag Manager, о котором пойдёт речь в статье, — контейнер. С его помощью, не трогая код сайта, без программиста, можно добавлять пиксели ретаргетинга и аналитики, настраивать динамический ремаркетинг, отслеживание и сбор аудитории, а также менять контент на сайте по разным событиям:
— Пробыли на странице определенное время.
— Нажали на кнопку/отправили форму.
— Видели конкретный объект.
— Перешли с конкретными метками.
И многое другое.
- Создание GTM
- Запуск на всех страницах
- Запуск по клику
- Запуск при отправке формы
- Запуск по URL
- Запуск по таймеру
Создаём аккаунт
Имя аккаунта и контейнера — произвольные. Целевая платформа «Веб-сайт» (см.скрин 1)
После создания вы увидите окно с 2 частями кода GTM. Их нужно установить на ВСЕ СТРАНИЦЫ сайта (см.скрин 2). Подчеркнул инструкцию по установке. Для повторного открытия кода, нажмите на идентификатор. На 2 скрине обвел красным квадратом.
Основные инструменты
- Тег (Tag) — фрагмент нашего кода, который запускается на сайте.
- Триггер (Trigger) — событие, запускающее или блокирующее тег: отправка формы, клик по кнопке, таймер, и т.д.
- Переменная (Variables) — условие для запуска триггера.
Итак! Переменная — это условие для запуска триггера, который активирует/блокирует тег, содержащий нужный нам код.
Подготовка
Идём в «Переменные» → «Настроить» (Configure). Там выбираем под свой сайт нужные переменные. На скрине описал базовые переменные.
1-й тег. Пиксель на все страницы.
Для начала я поставлю пиксель ВКонтакте на все страницы сайта.
Чтобы получить пиксель, идём в РК, раздел «ретаргетинг» → «Пиксели» → «Создать пиксель». Указываем название, домен и тематику. Создаём пиксель.
Идём в раздел «Теги» (Tags), создаём новый тег. Имя — произвольное.
Кликаем в область «Конфигурация тега» (Tag Configuration). Скрин 1.
GTM предлагает нам ряд своих вариантов тегов, есть шаблоны тегов, написанные другими пользователям.
Нас сейчас (почти всегда) интересует «Пользовательский HTML» (Custom HTML)
В появившемся окне вставляем код пикселя ВК (скрин 2).
Кликаем в область для выбора триггера (скрин 1).
Выбираем триггер «Все страницы» (All Pages). 3-й скрин. Сохраняем тег.
Изменения вступят в силу только после публикации контейнера.
Таким же образом можно установить счетчики .метрики, GA, mail.ru и т.д.
Запуск тега по клику
В этой части научу собирать в базу ретаргетинга тех, кто совершил целевой клик (например, «добавить в корзину»), а так же отслеживать это действие.
Создаём новый тег.
Назовём «Добавить в корзину».
Формат, как и в первом случае, «Пользовательский HTML» (Custom HTML).
В тег вставляем код для сбора аудитории в базу ретаргетинга и для отслеживания конверсий в рекламном кабинете:
<script type="text/javascript">
VK.Retargeting.Init('VK-RTRG-XXXX-XXXX');
VK.Retargeting.Event('conversion');
VK.Goal('conversion')
</script>
Разберёмся в коде
VK.Goal('conversion') — отвечает за учет событий в рекламном кабинете.
VK.Retargeting.Init('VK-RTRG-01234-56789'); — инициирует пиксель ВК. Подставьте идентификатор своего пикселя.
VK.Retargeting.Event('conversion'); — записывает пользователя в нужную базу ретаргетинга. Название события в теге и в аудитории ретаргетинга должны совпадать.
Создаём новый триггер
Жмём в область для выбора триггера. В появившемся окне справа вверху жмём плюс для создания нового триггера.
Даём произвольное название. Выбираем тип триггера «Все элементы» (All elements) (см. ниже скрин 1)
Лучше цеплять триггер за CSS класс элемента кнопки. Его можно посмотреть через исходный код на сайте. Для этого кликаем правой кнопкой мыши по нужному элементу. Появится окно с выделенным блоком.
Находим элемент class="". Копируем все, что находится между кавычками (см.скрин 2)
Возвращаемся в ГТМ, выбираем «Некоторые клики» (Some clicks).
Выбираем переменную «Click Classes» → «Содержит» (Contains). Вставляем код элемента Classes, скопированный с сайта. (см.скрин 3)
Если сложно вытаскивать CSS класс элемента, то цепляйте за текст.
Тогда выбираем переменную «Click Text» → «Содержит» (contains) → прописываем текст кнопки.
В нашем случае: «Добавить в корзину». (см.скрин 4). Значение переменной чувствительно к регистру. Будьте внимательны!
Проверяем настройку
Справа вверху жмем «Предварительный просмотр» (Preview) (см.скрин 1)
Указываем ссылку на наш сайт с http://, либо https:// (см.скрин 2)
Попав на сайт у нас должно быть как на скрине 3.
Совершите целевое действие (у нас это нажать на кнопку добавить в корзину). Если тег перешел в «активированные» — вы молодцы!
Проверяем, что пиксель ВК передает событие в РК
Открываем сайт. Жмём CTRL+SHIFT+I. Открываем вкладку «Network». В поле ввода пишем «rtrg»
Важно
Посмотрите какие есть триггеры и переменные в GTM. Чем больше про них узнаете, тем гибче будут ваши реклама и аналитика.
Запуск при отправке формы.
Принцип настройки тот же, что по клику.
Главное, выберите тип триггера «отправка формы» и переменную, связанную с отправкой формы. Так же либо по CSS классу элемента, либо по нажатию на текст настройте триггер.
Запуск тега по URL.
Выбирайте тип триггера PageView (см.скрин 1).
Допустим, настраиваем триггер для страницы благодарности. Её URL выглядит так: mysite.ru/spasibo.
Тогда указываем переменную «Page URL» → «Содержит» (contains) → spasibo (см.скрин 2).
Запуск по таймеру
Выберите тип триггера «Таймер» (Timer).
Интервал в миллисекундах (*1000). Ограничение — кол-во раз, которое сработает триггер. Если не поставить ограничение, то триггер будет срабатывать бесконечно.
Переменная — Page Hostname. Содержит — домен вашего сайта.
Не забудьте сохранить и использовать эту статью!
Ещё больше пользы для успешных запусков здесь:
✓ Регистрация в ERESH
✓ Рубрикатор — каталог полезных материалов о работа с ERESH.
✓ Партнёрская программа — делись своей реферальной ссылкой и пополняй баланс.
✓ Актуальные тарифы на функции ERESH
✓ Чат сообщества ERESH. Welcome за общением!
✓ Техническая поддержка ERESH: пишите в сообщения сообщества.
✓ LAKE – агентский кабинет компании ZeMedia. Всё о работе и преимуществах.
