Подключение Google Tag Manager
Как расширить возможности веб-аналитики и эффективно использовать маркетинговые сервисы на сайте
Многие могут создать сайт, но теряются, когда нужно подключить дополнительные сервисы. Google tag manager — бесплатный инструмент Google для сайта, в котором удобно подключать коды разных сервисов и управлять ими, не привлекая технических специалистов.
Что такое Google Tag Manager
Кроме сервисов веб-аналитики (Google Analytics и Яндекс. Метрики), в помощь маркетологу и владельцу сайта есть десятки инструментов:
- Сервисы ремаркетинга и ретаргетинга (Adroll, ВКонтакте, myTarget и другие рекламные системы) — так можно «догнать» людей, которые еще не сделали заказ, или допродать что-нибудь тем, кто уже заказал;
- Сервисы оптимизации конверсии (Yagla), которые адаптируют контент сайта в зависимости от заданных факторов — поискового запроса или источника, с которого пришел посетитель;
- Виджеты заказа обратного звонка, онлайн-консультанта, социальных сетей, персональных товарных рекомендаций (Callbackhunter, Retail Rocket), которые помогают продажам.
Все эти сервисы требуют вставки фрагмента кода (его называют тегом) на сайт. Обычно это делают штатные программисты или агентства-подрядчики, что замедляет работу и приводит к дополнительным затратам.
Ремаркетинг
Рекламный механизм, который позволяет обращаться к пользователям, которые раньше уже посещали ваш сайт или работали с вашим приложением.
Ретаргетинг
Рекламный механизм, с помощью которого онлайн-реклама направляется тем пользователям, которые уже видели рекламируемый продукт.
Человеку, далекому от программирования, трудно сориентироваться в коде — поэтому с запуском нового сайта или страниц данные сервисов часто теряются или ломают процессы на сайте.
С Google Tag Manager можно делать все нужные интеграции без технической подготовки и привлечения других специалистов. Установленные коды сервисов хранятся в специальном контейнере. GTM хранит историю изменений, если что-то сломается или перестанет работать. При этом в коде сайта не нужно ничего менять — достаточно внести изменения в контейнере GTM и опубликовать их.
Как работает Google Tag Manager
- Размещаете у себя на сайте или в мобильном приложении код контейнера GTM.
- Через интерфейс GTM устанавливаете на сайт нужные сервисы (Google Analytics или Яндекс. Метрики, сервисы ретаргетинга/ремаркетинга и т. д.) и события (триггеры), при которых сервисы будут активироваться — загрузка страницы, отправка формы, нажатие на кнопку и т. д.
Никого уже не удивишь веб-аналитикой
Яндекс.Метрику и Google Analytics ставят на сайты все. Но если с установкой кода счетчика на сайт маркетологи научились справляться, то с настройками целей обычно есть проблемы.
Даже те, кто понимает, зачем нужны цели, не может их настроить без помощи программиста.
Google осознал глубину проблемы и выпустил Google Tag Manager. Установив код GTM на сайт, маркетолог, не имеющий знаний в программировании (главное — чтобы он был любопытным и не ленивым), сможет и счетчики установить, и цели настроить.
Еще GTM позволяет расшифровать UTM-метку и отправить ее в Google Analytics более точно, чем это делает сам счетчик (актуально для анализа рекламы в Яндекс. Директ). С помощью этого инструмента можно также скорректировать безумные цифры по отказам на одностраничных сайтах, добавив тег с таймером. И это только некоторые возможности.
Яндекс.Метрику и Google Analytics ставят на сайты все. Но если с установкой кода счетчика на сайт маркетологи научились справляться, то с настройками целей обычно есть проблемы.
Даже те, кто понимает, зачем нужны цели, не может их настроить без помощи программиста.
Google осознал глубину проблемы и выпустил Google Tag Manager. Установив код GTM на сайт, маркетолог, не имеющий знаний в программировании (главное — чтобы он был любопытным и не ленивым), сможет и счетчики установить, и цели настроить.
Еще GTM позволяет расшифровать UTM-метку и отправить ее в Google Analytics более точно, чем это делает сам счетчик (актуально для анализа рекламы в Яндекс. Директ). С помощью этого инструмента можно также скорректировать безумные цифры по отказам на одностраничных сайтах, добавив тег с таймером. И это только некоторые возможности.
Если вы используете 1−2 сторонних сервиса, необходимости в установке GTM нет. Если больше — в них легко запутаться. GTM помогает ориентироваться в используемых сервисах — в интерфейсе видно, на каких страницах сайта они установлены и к каким событиям привязаны.
Алексей Иванов
Директор агентства ISEE Marketing, специалист по онлайн-привлечению клиентов
Кому нужен Google Tag Manager
Есть более функциональные платные аналоги, но у большинства сайтов в них нет необходимости — Google Tag Manager прекрасно справляется со своей задачей и при этом прост в использовании. Рекомендую GTM не только владельцам сайтов, которые хотят хранить коды сервисов в одном месте, но и тем, кто хочет облегчить настройку веб-аналитики.
На одностраничных сайтах GTM помогает измерить более точный показатель отказов (как известно, Google Analytics считает, что посетитель провел на сайте 0 секунд, если он открыл его и не совершил больше никаких действий (к примеру, не отправил заявку), а ведь при этом посетитель мог записать номер телефона или другой контакт, почитать отзывы.
На более сложных сайтах (корпоративных, интернет-магазинах), которые хотят отслеживать выполнение целевых действий и учитывать офлайн-конверсии (с GTM удобно настраивать любые цели в Google Analytics самостоятельно), а также передавать идентификатор клиента в CRM.
Есть более функциональные платные аналоги, но у большинства сайтов в них нет необходимости — Google Tag Manager прекрасно справляется со своей задачей и при этом прост в использовании. Рекомендую GTM не только владельцам сайтов, которые хотят хранить коды сервисов в одном месте, но и тем, кто хочет облегчить настройку веб-аналитики.
На одностраничных сайтах GTM помогает измерить более точный показатель отказов (как известно, Google Analytics считает, что посетитель провел на сайте 0 секунд, если он открыл его и не совершил больше никаких действий (к примеру, не отправил заявку), а ведь при этом посетитель мог записать номер телефона или другой контакт, почитать отзывы.
На более сложных сайтах (корпоративных, интернет-магазинах), которые хотят отслеживать выполнение целевых действий и учитывать офлайн-конверсии (с GTM удобно настраивать любые цели в Google Analytics самостоятельно), а также передавать идентификатор клиента в CRM.
Зачем использовать GTM, если есть статистика Google
Google Analytics и Google Tag Manager — взаимодополняющие инструменты, они решают разные задачи: GA — это система веб-аналитики, а GTM — система для настройки передачи данных в аналитику (например, о выполнении целей на сайте). Настроить передачу данных можно и обычным кодом GA, но с GTM это намного быстрее и удобнее.
Преимущества использования GTM для сайта
1
Удобство и экономия времени — функция отладчика позволяет проверить работу контейнера, не меняя ничего на сайте
2
Не нужно каждый раз просить программиста изменить код — можно сделать контейнер самому и проверить на корректность в интерфейсе GTM
3
Легкая отмена изменений — если сделали что-то не так, всегда можно быстро «откатиться» до предыдущей версии
4
Многопользовательский режим — пространство для работы разных команд — в GTM есть возможность настроить три «рабочие области» — например, для параллельной работы аналитиков, маркетологов и рекламщиков.
Режим многопользовательской работы в Google Tag Manager
Павел Кац
Управляющий партнер Агентства интернет-продаж 5 o`click
Google Tag Manager упростил всем работу
Раньше, чтобы установить коды аналитики, требовалось каждый раз лезть в код сайта, просить разработчиков, тратить время. Чем больше было систем аналитики, тем больше надо было лезть в сайт. Плюс устанавливать коды для ремаркетинга от рекламных систем.
Для каждой системы надо было настраивать цели — то есть опять просить разработчиков, править код, ставить события и т. д. Если клиент просил агентство настроить аналитику, приходилось общаться по треугольнику Клиент → Разработчики → Агентство.
С GTM все стало проще — лезть в сайт больше не нужно. Все настраивается на стороне GTM. Можно хоть каждый день перенастраивать цели.
Раньше, чтобы установить коды аналитики, требовалось каждый раз лезть в код сайта, просить разработчиков, тратить время. Чем больше было систем аналитики, тем больше надо было лезть в сайт. Плюс устанавливать коды для ремаркетинга от рекламных систем.
Для каждой системы надо было настраивать цели — то есть опять просить разработчиков, править код, ставить события и т. д. Если клиент просил агентство настроить аналитику, приходилось общаться по треугольнику Клиент → Разработчики → Агентство.
С GTM все стало проще — лезть в сайт больше не нужно. Все настраивается на стороне GTM. Можно хоть каждый день перенастраивать цели.
Подключаем и настраиваем Google Tag Manager
Словарь GTM
Теги — фрагменты кода, которые нужны для установки на сайт сторонних сервисов.
Триггер — тип действия пользователя, при котором активируется тег — начинается работа сервиса. Триггером может быть просмотр страницы, отправка формы и т. п.
Переменные уточняют триггеры и теги. Например, переменная URL к триггеру «Просмотр страницы» определяет, какая именно страница нас интересует — главная, страница контактов, каталог.
В контейнер «зашиты» все теги сторонних сервисов, срабатывающие при определенных условиях (триггерах). Контейнер представляет собой фрагмент кода, который генерируется с помощью GTM и который нужно вставить в код сайта, чтобы установить нужные сервисы.
Триггер — тип действия пользователя, при котором активируется тег — начинается работа сервиса. Триггером может быть просмотр страницы, отправка формы и т. п.
Переменные уточняют триггеры и теги. Например, переменная URL к триггеру «Просмотр страницы» определяет, какая именно страница нас интересует — главная, страница контактов, каталог.
В контейнер «зашиты» все теги сторонних сервисов, срабатывающие при определенных условиях (триггерах). Контейнер представляет собой фрагмент кода, который генерируется с помощью GTM и который нужно вставить в код сайта, чтобы установить нужные сервисы.
Поставить на сайт контейнер GTM вы можете самостоятельно, даже если создаете свой первый сайт. С помощью инструкции вы установите на сайт (в том числе в Тильде) коды Яндекс. Метрики и Гугл Аналитикс и код ретаргетинга в Вконтакте (он позволит отслеживать посетителей нужных страниц сайта, чтобы показывать им потом рекламу в Вк).
Пошаговая инструкция
1
Авторизуйтесь на сайте GTM с помощью аккаунта в Google (если у вас нет аккаунта, сервис предложит сначала создать его, а затем перейти в GTM) и укажите в настройках контейнера адрес сайта, на котором он будет установлен.
2
Для установки диспетчера тегов GTM на сайте укажите идентификатор контейнера в настройках сайта на Тильде (раздел «Аналитика&SEO»).
3
Заполните в интерфейсе GTM контейнер нужными тегами. Для добавления статистики Google Analytics нужно ввести только идентификатор счетчика.
Чтобы добавить теги для других сервисов, выберите тип тега «Пользовательский HTML». Получить код для вставки на сайт можно в интерфейсе нужного вам сервиса.
Код установки пикселя для ретаргетинга ВКонтакте можно взять в разделе «Таргетинг» в рекламном кабинете
Для каждого тега нужно указать триггер: им может быть просмотр определенной страницы или всех страниц сайта, клик по ссылке, отправка формы и любое другое событие, назначенное с помощью переменных.
Используя триггеры, вы сможете отслеживать выполнение целей на сайте и другие интересные вам показатели на одной или нескольких страницах сайта. При этом базовые коды счетчиков (например, Яндекс. Метрики) и ретаргетинга рекламных систем (например, ВКонтакте) обязательно должны быть установлены на каждой странице для мониторинга общих показателей сайта.
Используя триггеры, вы сможете отслеживать выполнение целей на сайте и другие интересные вам показатели на одной или нескольких страницах сайта. При этом базовые коды счетчиков (например, Яндекс. Метрики) и ретаргетинга рекламных систем (например, ВКонтакте) обязательно должны быть установлены на каждой странице для мониторинга общих показателей сайта.
Настройка триггера на просмотр определенной страницы сайта
4
Проверьте корректность контейнера в режиме предварительного просмотра перед публикацией:
Предварительный просмотр показывает возможные ошибки в контейнере и открывает на сайте панель отладки
В режиме отладки видно, если какой-то из тегов установлен неправильно (Tags Not Fired On This Page/Теги на этой странице не выполняются)
Теги настроены правильно — Tags Fired On This Page
5
Опубликуйте контейнер, указав описание версии для себя (в описании лучше перечислить, какие сервисы установлены и при каких событиях они срабатывают):
6
Проверьте корректность размещения контейнера: установите расширение для Хрома Google tag assistant и запустите его во вкладке с нужным сайтом (успешные установки отмечены зеленым флажком).
7
В разделе «Версии» можно посмотреть историю редактирования контейнера и выбрать одну из предыдущих в качестве последней версии:
Советы по настройке GTM для сайта на Тильде
При работе с Тильдой есть свои особенности в настройке GTM, зная которые, можно сэкономить время.
При работе с Тильдой есть свои особенности в настройке GTM, зная которые, можно сэкономить время.
1
Всплывающие окна (попапы) отображаются в адресной строке через символ #:
Этот символ не воспринимается Google Analytics, поэтому хорошим решением будет менять URL, который мы отправляем в GA, меняя # на / или же добавлять его к странице, которую мы отправляем в Google Analytics:
2
Не указывайте в настройках сайта на Тильде одновременно идентификатор Google Analytics и идентификатор контейнера Google Tag Manager. Используйте только Google Tag Manager.
В GTM уже есть тег Universal Analytics, поэтому если указать в настройках и идентификатор GTM, и счетчик Google Analytics, данные в статистике Google Analytics будут учитываться дважды.
Опыт использования GTM на сайтах
Уточняем показатель отказов на одностраничном сайте
Показатель отказов в Google Analytics — это процент посетителей, которые ушли с сайта после посещения одной страницы, а длительность посещения определяется, когда посетитель совершает какое-то действие (отправляет заявку, переходит на другую страницу).
Поэтому на одностраничном сайте данные GA часто некорректны (показатель отказов может доходить до 100%), а, значит, нельзя корректно проанализировать качество трафика и улучшить рекламную кампанию.
Тег в Google Tag Manager может решить эту проблему — мы можем установить время (от 10 секунд), которое не будет считаться отказом.
Как настроить таймер на примере сайта транспортной компании
Показатель отказов в Google Analytics — это процент посетителей, которые ушли с сайта после посещения одной страницы, а длительность посещения определяется, когда посетитель совершает какое-то действие (отправляет заявку, переходит на другую страницу).
Поэтому на одностраничном сайте данные GA часто некорректны (показатель отказов может доходить до 100%), а, значит, нельзя корректно проанализировать качество трафика и улучшить рекламную кампанию.
Тег в Google Tag Manager может решить эту проблему — мы можем установить время (от 10 секунд), которое не будет считаться отказом.
Как настроить таймер на примере сайта транспортной компании
1
Добавляем в GTM тег Universal Analytics
2
Создаем для этого тега триггер типа «Таймер», где задаем интервал в миллисекундах (15 000 мс = 15 с):
Готово! Теперь в Google Analytics показатель отказов будет считываться корректно.
Настраиваем цели и передаем идентификатор клиента из GTM в Google Analytics
Чтобы отслеживать целевые действия на сайте, нужно завести цель в Google Analytics и разместить нужный скрипт в коде сайта. Google Tag Manager может передавать данные о целевом действии в Google Analytics без внесения изменений в код сайта.
Как можно отслеживать отправку формы с помощью GTM на примере сайта школы веб-аналитики
Чтобы отслеживать целевые действия на сайте, нужно завести цель в Google Analytics и разместить нужный скрипт в коде сайта. Google Tag Manager может передавать данные о целевом действии в Google Analytics без внесения изменений в код сайта.
Как можно отслеживать отправку формы с помощью GTM на примере сайта школы веб-аналитики
1
В GTM есть триггер «Отправка формы». Он нам подойдет, если на сайте есть только одна форма, потому что при успешном заполнении формы появляется событие gtm.formSubmit.
Если форм больше, лучше в качестве триггера выбирать пользовательское событие (custom event), где в качестве имени события указать идентификатор формы из Tilda.
GTM также можно использовать для отслеживания конверсий по идентификатору клиента. Это нужно, чтобы понимать, какие заявки с сайта превратились в реальные заказы, и оценивать, какой источник рекламы работает более эффективно.
С сайтом на Tilda можно настроить передачу идентификатора клиента (clientID) с формы, по которому в дальнейшем можно интегрировать CRM и Google Analytics. Чтобы это сделать, добавьте в настройках формы в Tilda скрытое поле (cid).
С сайтом на Tilda можно настроить передачу идентификатора клиента (clientID) с формы, по которому в дальнейшем можно интегрировать CRM и Google Analytics. Чтобы это сделать, добавьте в настройках формы в Tilda скрытое поле (cid).
Затем создайте в GTM новый тег типа «Пользовательский HTML» и напишите туда такой код:
<script>
$('[name = "cid"]').val({{cid}})
</script>
В переменной {{cid}} будет лежать нужное нам значение — оно будет передаваться в Google Analytics.
Практика: настраиваем Google Tag Manager на сайте
Разберем настройку контейнера Google Tag Manager с двумя тегами для сайта на Тильде.
Сначала установим тег Google Analytics — для этого создайте аккаунт в GA, скопируйте его идентификатор (он имеет вид UA-XXXXXXXX-X) и создайте в Google Tag Manager тег «Классический Google Analytics» с такими настройками:
Второй тег будет собирать базу ретаргетинга для «ВКонтакте»: ID аккаунтов в ВК из числа посетителей сайта (этим людям можно в дальнейшем показывать напоминающую рекламу или рекламу других товаров/услуг).
Сбор базы ретаргетинга «ВКонтакте»
Из тех, кто совершил целевое действие на сайте — подписался на рассылку, скачал прайс-лист, отправил заявку.
Большие интернет-магазины обычно собирают такую базу, установив специальный код на странице благодарности за действие пользователя (например, за размещение или оплату заказа).
У небольшого сайта не всегда есть необходимость в отдельной странице, на которой можно разместить код ретаргетинга — здесь выручает GTM. Использовать Google Tag Manager удобно еще и тем, что на сайте может быть несколько страниц с аналогичными кнопками призыва к действию (например, подписка на рассылку может дублироваться на всех страницах сайта или в нескольких местах на одностраничном сайте), и теги GTM могут собирать единую базу ретаргетинга для всех кнопок.
Большие интернет-магазины обычно собирают такую базу, установив специальный код на странице благодарности за действие пользователя (например, за размещение или оплату заказа).
У небольшого сайта не всегда есть необходимость в отдельной странице, на которой можно разместить код ретаргетинга — здесь выручает GTM. Использовать Google Tag Manager удобно еще и тем, что на сайте может быть несколько страниц с аналогичными кнопками призыва к действию (например, подписка на рассылку может дублироваться на всех страницах сайта или в нескольких местах на одностраничном сайте), и теги GTM могут собирать единую базу ретаргетинга для всех кнопок.
Пример. Собираем базу посетителей сайта, оформивших предзаказ билета на мероприятие
На сайте прошлогодней конференции размещена форма предзаказа билета на следующее событие.
На сайте прошлогодней конференции размещена форма предзаказа билета на следующее событие.
Настроим сбор базы ретаргетинга оформивших предзаказ. База понадобится для дополнительной рекламы старта продажи билетов и для рекламы других мероприятий.
1
Настраиваем на стороне ВК: создаем в рекламном кабинете пиксель для сайта и получаем код для вставки на сайт.
2
На основе пикселя создаем аудиторию для рекламы — собираем всех посетителей сайта за все время (дальше в GTM настроим условие сбора только тех посетителей, кто заполнил форму заявки).
3
Переходим в Google tag manager и запускаем предварительный просмотр сайта (нажимаем в интерфейсе «Предварительный просмотр» и открываем сайт в новой вкладке браузера).
4
Вводим тестовый адрес почты и нажимаем кнопку «Напомнить мне о РИМ'18».
В Summary диспетчера тегов появляются две новых строчки — pageView и submit_form4126524. Выбираем Variables (Переменные) и последнюю строчку — нужное нам событие (заполнение формы).
5
Значение переменной _event (submit_form4126524) используем при создании триггера типа «Пользовательское событие».
6
Cоздаем тег типа «Пользовательский HTML» с триггером «Предзаказ билетов РИМ'18»
7
Проверяем работоспособность созданного тега в предварительном просмотре: заполняем форму, нажимаем кнопку «Напомнить мне о РИМ'18»; если все настроено правильно, мы увидим, что тег «Предзаказ РИМ'18» сработал.
Google Tag Manager облегчает работу со сторонними сервисами на сайте и уточняет веб-аналитику, заменяя одним контейнером десяток разных скриптов. Используйте интеграцию GTM с сайтом на Тильде — это сэкономит ваше время и исключит ошибки при добавлении кодов на сайт.
Текст: Юлия Иванова
Иллюстрации, дизайн и верстка: Юлия Засс
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также:
