Основные понятия
Аккаунт — высший уровень иерархии в Диспетчере тегов. Как правило, для управления всеми рекламными тегами компании достаточно одного аккаунта.
Аккаунт содержит один или несколько контейнеров, по одному для каждого типа ресурсов: обычная или AMP-страница, приложение iOS или Android.
Контейнер — управляющий JavaScript-код, который вставляется на все страницы сайта.
Тег — размещенный на страницах сайта JavaScript- или HTML-код обеспечивающий выполнение необходимых функции: отслеживание трафика, поведения посетителей, анализ эффективности рекламы на сайте и т.д.
Если вы не используете специальный инструмент для работы с тегами, например, Диспетчер тегов Google, эти фрагменты нужно вручную вставить в исходный код сайта. С Диспетчером тегов Google все становится гораздо проще: исходный код менять не требуется, достаточно лишь указать в интерфейсе, какие теги вы хотите использовать и когда их нужно активировать.
Триггер — условие, определяющее, при каких обстоятельствах будут выполняться созданные теги.
Переменная — поле, используемое для хранения и передачи данных, необходимых для работы триггеров и тегов.
Задачи, которые можно решать с помощью GTM
- Установка кода ретаргетинга и ремаркетинга
- Установка кнопок шаринга
- Мониторинг внутренних переходов
- Отслеживание переходов по всем внешним ссылкам
- Отслеживание переходов по конкретной внешней ссылке
- Уточнение показателя отказов
- Мониторинг отправки форм
- Отслеживание кликов по социальным кнопкам и виджетам
- Отслеживание кликов по элементам с тем или иным текстом
- Мониторинг конкретных источников внешнего трафика
- Мониторинг всех источников внешнего трафика
- Подмена номера на сайте
Создание аккаунта и установка Google Tag Manager
Чтобы начать настройку Google Tag Manager, необходимо зайти на страницу сервиса tagmanager.google.com и авторизоваться или зарегистрироваться.
1. После регистрации попадаете на экран создания контейнера.
В настройках контейнера укажите, где он будет использоваться.
После того, как создали контейнер, принимаете Соглашение об Условиях использования Диспетчера тегов Google.
2. Скопируйте код и вставьте его на сайт. Первую часть кода вставьте в хедер, как можно ближе к открывающему тегу, а вторую – в тело страницы сразу после тега <body>.
Вы можете сделать это как сразу, так и после настройки контейнера.
3. На этом создание аккаунта и установка Google Tag Manager на сайт завершены. Можно приступать к настройкам.
Рассмотрим самые востребованные функции Google Tag Manager.
Подключение Google Analytics через GTM 2-умя способами
Первый способ
Для начала необходимо создать переменную, которая будет соответствовать вашему идентификатору отслеживания Google Analytics. Для этого открываем раздел «Переменные» и создаем новую переменную.
Указываем имя переменной и нажимаем на кнопку для редактирования. Выбираем тип переменной «Константа».
В поле «Значение» нужно вписать ваш идентификатор отслеживания Google Analytics. Для этого войдите в аккаунт GA и выберите путь «Администратор → Отслеживание → Код отслеживания», скопируйте его и вставьте в поле «Значение». Нажимаем «Сохранить» — переменная создана.
Переходим к размещению кода Google Analytics на вашем сайте. Для этого нужно создать соответствующий тег.
Называем тег и жмем на кнопку редактирования. Выбираем тип Universal Analytics.
Активируем галочку «Включить переопределение настроек в этом теге» и нажимаем на значок, как показано на скриншоте.
Выбираем переменную, созданную ранее.
Следующий шаг – выбрать условие, при котором будет срабатывать этот тег. Т.к. код отслеживания GA должен быть вставлен в код каждой страницы, выбираем в настройках триггера All Pages.
Вот так будут выглядеть настройки после всех изменений:
Необходимо сохранить изменения.
После всех настроек необходимо опубликовать изменения.
Готово. Код активирован. Это можно проверить в режиме предварительного просмотра.
Зайдите на свой сайт. Снизу всплывет диагностическое окно, в котором будет показана активация тегов на разных страницах сайта.
Выйти из предварительного просмотра можно нажав на эту кнопку.
Второй способ
Создаем новый тег. Называем его и нажимаем на кнопку редактирования. Выбираем, как и в предыдущем способе, тип переменной Universal Analytics.
Затем указываем идентификатор отслеживания ресурса.
Следующий шаг – выбрать условие, при котором будет срабатывать этот тег. Т.к. код отслеживания GA должен быть вставлен в код каждой страницы, выбираем в настройках триггера All Pages.
Необходимо сохранить изменения.
После всех настроек необходимо опубликовать изменения.
Подключение Яндекс.Метрики через GTM
Создаем новый тег для добавления кода отслеживания Яндекс.Метрики на страницы сайта. Называем, нажимаем на кнопку ведактирования и выбираем тип переменной «Пользовательский HTML».
В разделе «Настройки» в Яндекс.Метрике находим код счетчика Метрики и вставляем его в соответствующее поле. Выбираем условие, при котором будет срабатывать этот тег. Т.к. код отслеживания GA должен быть вставлен в код каждой страницы, выбираем в настройках триггера All Pages.
Сохраняем. Публикуем.
Отправка событий по таймеру в GTM
Например, мы хотим настроить событие, которое будет отправляться, если пользователь провел на странице не менее 30 секунд.
Добавляем триггер типа «Таймер».
В поле «Интервал» указываем время в миллисекундах, спустя которое должно активироваться событие. В поле «Ограничение» указываем максимальное число активаций события. Для того, чтобы таймер срабатывал на всех страницах, добавляем соответствующее регулярное выражение .*. Выбираем все таймеры.
Сохраняем. Следующий шаг – создание тега.
Добавляем новый тег типа Universal Analytics.
Выбираем тип отслеживания «Событие». Указываем обязательные параметры «Категория» и «Действие».
Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение False для этого параметра. В противном случае устанавливайте значение True.
Не забываем заполнить поле «Идентификатор отслеживания GA».
Сохраняем и Публикуем.
Отслеживание кликов в GTM
Первым делом активируем все переменные «Клики» и «Формы» во вкладке «Переменные».
Создаем триггер типа «Клики».
При настройке триггера можно выбрать цель «Все элементы» либо «Только ссылки». При выборе типа «Все элементы» тег будет активироваться при клике на любой элемент, при выборе «Только ссылки» – только при клике на ссылку.
Далее задаем условие активации триггера. Выбираем «Некоторые клики» и уточняем, по какому элементу хотим отслеживать клик, установив правило сопоставления с идентифицирующим этот элемент атрибутом (Click Classes, Click ID и т.д.).
Включаем «Предварительный просмотр».
Далее заходим на сайт и кликаем по элементу, с которого потребуется отследить клик, с помощью отслеживания GTM определяем параметры клика.
В левой части меню должны отражаться клики как отдельный элемент gtm.click.
Выбираем нужный из кликов и заходим во вкладку Variables, здесь мы видим все параметры клика, из всего множества находим Click Classes и копируем его значение из столбца Value.
Если есть кнопка с таким же Click Classes на других страницах, но нам нужно активировать этот тег только на определенной странице, добавляем к Click Classes – Page Path.
Так выглядит настройка триггера:
Сохраняем.
Создаем тег для отправки события в Google Analytics.
Тип тега – Universal Analytics.
Тип отслеживания – «Событие».
В параметрах отслеживания прописываем произвольные значения в «Категории» и «Действии», по которым Google Analytics определит событие.
В пункте «Настройка Google Analytics» выбираем заранее созданную переменную с идентификатором отслеживания или ставим галочку напротив фразы «Включить переопределение настроек в этом теге» и вставляем его в появившееся поле.
В триггере выбираем ранее созданный триггер с переменной.
Называем тег и сохраняем. Публикуем.
Настроим событие в GA.
Заходим в настройки «Администратора». В столбце представления выбираем пункт «Цели». Нажимаем на кнопку «Добавить цель».
Называем цель.
Тип – «Событие».
В подробных сведениях о цели прописываем «Категорию» и «Действие», которые указали в GTM.
Сохраняем.
Проверим событие в GA.
Переходим в «Отчеты в режиме реального времени». Открываем «Отчет Конверсии». И здесь можем увидеть срабатывает ли созданная цель.
Создаем тег для отправки события в Яндекс.Метрика.
Тип тега – «Пользовательский HTML».
В поле вставляем этот фрагмент:
<script>
yaCounterXXXXXXXX.reachGoal(‘click’);
</script
Вместо XXXXXXXX – номер счетчика Яндекс.Метрики.
Вместо click – называем действие, как в настройке тега для GA, в нашем случае – more.
В триггере выбираем ранее созданный триггер с переменной.
Называем тег и сохраняем. Публикуем.
Настроим событие в Яндекс.Метрике.
Заходим в «Настройки» – «Цели» и создаем цель.
Выбираем JavaScript-событие. В сведениях о цели прописываем «Идентификатор цели», который указали в GTM, – more.
Сохраняем. Цель создана.
В случае когда необходимо настроить отслеживание клика по какому-либо элементу на веб-странице, а у этого элемента нет идентифицирующих его атрибутов, таких как, например, ID, class или URL, задачу отслеживания можно решить с помощью селекторов CSS.
Как использовать селекторы CSS в Google Tag Manager
Cелектор CSS — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
Применять селекторы CSS в GTM можно для определения условий в триггерах, а также в пользовательских переменных типа «Элемент DOM» и «Собственный код JavaScript». Для того чтобы использовать селекторы CSS в триггерах, в настройках необходимо выбрать Click Element или Form Element.
Селектор CSS помогает не только, когда у этого элемента нет идентифицирующих его атрибутов, но и если один и тот же Click Classes используется в нескольких элементах на одной странице.
Узнать CSS-селектор можно с помощью просмотра кода элемента. Кликните на нужном элементе правой кнопкой мыши и выберите пункт «Просмотреть код»:
После этого кликаем по коду нужного элемента правой клавишей и выберите пункт Copy > Copy selector.
Копируем селектор и вставляем в Click Classes триггера. Обратите внимание, необходимо выбрать — «Соответствует селектору CSS». Сохраняем.
Создаем тег по аналогии с предыдущими инструкциями. В «Триггере» выбираем ранее созданный триггер с переменной. Публикуем.
Отслеживание отправки форм в GTM
Отправить данные с формы можно с помощью метода submit или же в фоновом режиме через ajax. В первом случае будет происходить перезагрузка страницы, во втором – нет.
Отслеживание форм, отправляющих данные посредством submit
Если данные отправляются через submit, то для отслеживания такого события можно привязаться к классу или идентификатору формы. Настройка осуществляется аналогично настройке отслеживания кликов.
Создаем новый триггер, в качестве типа события триггера выбираем «Отправка формы» вместо «Клик».
При активации опции «Ждать теги» происходит задержка отправки формы, пока не будут активированы все связанные с этим событием теги или пока не истечет указанное время ожидания (в зависимости от того, что произойдет раньше).
При активации опции «Проверка ошибок» тег не будет срабатывать, если для отслеживаемой формы не было выполнено действие по умолчанию (отправка формы).
Если активировать хотя бы одну из опций «Ждать теги», «Проверка ошибок», появится дополнительный шаг создания триггера «Условия включения». «Условие включения» позволяет указать, в каких случаях триггер должен быть доступен, то есть при каких условиях должны прослушиваться отправки форм. Распространенным условием включения триггера типа «Форма» является указание только тех страниц, на которых есть формы.
Привязываемся к атрибуту, идентифицирующему нужную нам форму (Form ID, Form Classes и т.д.). Как узнать параметр элемента, описывалось выше.
В данном случае Form ID копируем и вставляем в триггер.
Сохраняем.
Создаем тег, который будет отправлять событие в аналитику. В качестве условия активации выбираем ранее созданный триггер.
Сохраняем. Публикуем.
Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью AJAX
Используем jQuery для проверки, и если jQuery не стоит, то можно сделать отдельный тег типа «Пользовательский HTML» и вставить туда код:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script>
– где правилом активации этого тега будет All Pages.
Проверить наличие jQuery можно через консоль: нажимаем правой кнопкой мыши на сайте и выбираем пункт «Посмотреть код», затем в появившимся окне выбираем вкладку console и пишем туда: jQuery.
Если в ответ будет вот такая строчка: function (a,b){return new r.fn.init(a,b)}, значит установлен на сайте.
Создаем новую переменную типа «Собственный код JavaScript». Пишем туда следующий код:
function(){
var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var ContactForm = jQuery(‘#contact’);
if(ContactForm.find(«#data_contact»).val().length>0
&& emailReg.test((ContactForm.find(«#data_email»).val()))
&& ContactForm.find(«#data_comments»).val().length>0)
{
return true;
}
else
{
return false;
}
}
Разберем скрипт — первая значимая строчка:
var ContactForm = jQuery(‘#online-connection-services-wrapper’); //указываем id формы
Мы создаем переменную, которая работает с нашей формой, но, чтобы определить нужную форму, нам нужно указать ее идентификатор, класс или другой атрибут, что и делаем в кавычках:
‘#online-connection-services-wrapper’
В следующем значимом для нас коде, происходит валидация:
ContactForm.find(«#data_contact»).val().length>0
&& emailReg.test((ContactForm.find(«#data_email»).val()))
&& ContactForm.find(«#data_comments»).val().length>0
Тут логика такая же: нажимаем «Посмотреть код» нужного элемента и копируем id, class или другой атрибут.
Данная переменная возвращает true, если валидация пройдена, и false, если нет.
Скрипт с id:
function(){
var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var ContactForm = jQuery(‘#online-connection-services-wrapper’);
if(ContactForm.find(«#data_contact»).val().length>0
&& emailReg.test((ContactForm.find(«#data_email»).val()))
&& ContactForm.find(«#data_comments»).val().length>0)
{
return true;
}
else
{
return false;
}
}
Не забывайте ставить # перед id!
Скрипт c селектором:
function(){
var ContactForm = jQuery(‘#online-connection > form’);
if(ContactForm.find(jQuery(‘#sec-four > div > div.form-two > div > form > input[type=»text»]’)).val().length>0)
{
return true;
}
else
{
return false;
}
}
Не забывайте менять “ на ‘ в названии селектора!
Скрипт с class:
function(){
var ContactForm = jQuery(‘. hiddenpc’);
if(ContactForm.find(«.name «).val().length>1
&& ContactForm.find(«.tel_order_monia»).val().length>0)
{
return true;
}
else
{
return false;
}
}
Не забывайте ставить точки перед class!
Так как проверку мы реализовали самостоятельно, то триггером у нас будет «Клик» – «Все элементы», куда мы добавляем проверку с id или class нужного элемента, нажатие на которы отправляет форму, нашу новую переменную и значение true и при необходимости другие правила.
Код элемента:
Триггер с Classes:
Триггер с селектором CSS:
Сохраняем. Создаем тег по принципу, указанному выше — в п.4.
Сохраняем и публикуем.
Подмена номера телефона на Landing Page на сайте через GTM
Нам необходимо показать другой номер телефона при переходе посетителя с рекламы AdWords.
Нам нужно определить содержимое параметра utm_source и, если в нем google, заменить телефонные номера на сайте.
Создадим переменную, которая будет получать значение параметра utm_source. Тип переменной — «URL», тип компонента — «Запрос».
Сохраняем.
Создадим еще одну переменную, которая будет меняться в зависимости от значения utm_source. Для этого используем таблицу поиска:
Получилось два номера — один по умолчанию и второй для Google. Но если нам потребуется еще одна замена, например, для Директа, то достаточно добавить еще одно значение в таблицу.
Теперь сделаем триггер, который будет активироваться по готовности DOM страницы, если в utm_source что-то есть:
По этому триггеру создаем тег, который и будет нам менять номер телефона на странице. В качестве значения указываем имя нашей переменной — таблицы поиска.
Для нужного элемента просто указываем его CSS селектор.
Таким же способом можно менять заголовки, подставляя в них ключ или меняя их в зависимости от объявления.
Установка кодов ремаркетинга и ретаргетинга разных социальных платформ и рекламных систем
Происходит по сходному алгоритму.
Чтобы добавить код ретаргетинга/ремаркетинга нужно создать новый тег типа «Пользовательский HTML» и добавить в предложенное поле код ретаргетинга, созданный в рекламном кабинете или интерфейсе рекламных систем. В качестве триггера активации в данном случае используется вариант «Все страницы».
Google Tag Manager приобретает все большую популярность. В современном бизнесе скорость имеет значение. С помощью Диспетчера тегов Google можно быстро создавать и обновлять теги для веб-сайта или мобильного приложения.
Все больше и больше задач необходимо и можно решать с его помощью. Этот инструмент избавляет владельца сайта или маркетолога от трудностей при интеграции со сторонними сервисами. Достаточно один раз установить контейнер, чтобы забыть о необходимости вставлять код на сайт вручную.
Что важно: диспетчер тегов позволяет при необходимости вернуться к предыдущим настройкам, а значит, ошибки при работе с ним будут не столь болезненны.
Кому пригодится Google Tag Manager? Владельцам сайта, маркетологам и всем IT-специалистам. Если у вас уходит много времени на установку новых тегов, ваш сайт стал медленным и громоздким из-за обилия тегов или вы не уверены в эффективности сбора данных, то Диспетчер тегов Google облегчит вашу работу.
Автор: Анастасия Хаховская
ВКонтакте
