Google Tag Manager или попросту GTM, это официальный сервис от Google для упрощения работы с установкой и внесения различных изменений в сторонние коды аналитики для сайта.
Tag Manager представляет из себя контейнер в котором хранятся все дополнительные коды аналитики,
С помощью GTM можно избавиться от постоянной помощи web-специалиста для установки различных кодов на сайт, таких как:
- Яндекс Метрика
- Google Analytics
- Тег ретаргетинга AdWords
- Pixel Facebook
- Пиксель Вконтакте
- Различные сервисы обратного звонка
- И многие другие.
Всё что потребуется, если у вас нет навыков по установке кодов, это установить с помощью вебмастера код самого Tag Manager’а на сайт.
Все последующие теги вы сможете установить и изменять уже сами используя сервис GTM.
Этот инструмент с легкостью расширяет возможности Интернет-маркетологов, PPC и SEO специалистов, а также всех кто занимается аналитикой сайтов.
В данной статье разберем структуру сервиса и его возможности и как их использовать.
Создание тега Google Tag Manager
Как и для остальных сервисов от Google для использования Tag Manager потребуется уже созданный аккаунт в их системе.
При первом заходе в Google Tag Manager откроется окно “Добавления нового аккаунта”
Здесь надо указать произвольное Название аккаунта и выбрать страну, согласиться или нет с отправкой данных в Google и нажать кнопку “Далее”
Попадаем в окно с “Настройкой Контейнера”.
Здесь указываем название контейнера, к примеру адрес сайта для которого он создается.
И выбрать где будет использоваться для большинства падёт выбор на Веб-сайт или AMP, второй вариант используется для установки различных тегов на AMP-страницы от Google.
После создания тега и контейнера, сервис выдаст код диспетчера тегов Google,
Именно этот код потребуется установить на сайт вручную.
Установка Google Tag Manager на сайт
Как указано в описанию к коду, первый фрагмент требуется установить в раздел <head>, вторую часть кода поместить после открывающего тега <body>.
Для большинства CMS существуют специальные плагины с помощью которых можно установить Google Tag Manager на сайт.
Плагины:
Для Worpress это плагины:
1.DuracellTomi's Google Tag Manager for WordPress
2.Head, Footer and Post Injections
Для Modx отлично с задачей справляется плагин: GoogleTagManagerMODX
Для Joomla плагин можно скачать по этой ссылке
Зачастую код GTM можно достаточно легко установить на сайт зная лишь где найти файл header.
Расположение файла header в CMS.
В Opencart нужно найти файл header.tpl
Стандартный путь файла: /view/theme/ваш_шаблон/template/common/
В Bitrix файл находится в /bitrix/templates/ваш_шаблон/
Также в битриксе можно вставить код из админки изменив шаблон.
Либо его можно изменить из панели администратора ваш-сайт.ру/bitrix/admin/template_admin.php?lang=ru
По такой же аналогии файл располагается и в других CMS, что не составит сложности найти его и установить Tag Manager вручную.
Базовая настройка Google Tag Manager
Основные параметры в GTM
При первом входе в интерфейс Google Tag Manager,
мы видим в левом меню есть 3 пункта:
- Теги
- Триггеры
- Переменные
В каждом аккаунте есть как минимум один основной контейнер.
В контейнере располагаются теги, к примеру тег Google Analytics или Яндекс Метрики.
Для каждого тега определяется триггер.
Триггер определяет условия срабатывания тега и соответственно отправки им данных, например отработка цели в яндекс метрике, или Google Analytics.
Для того чтобы триггер сработал, он считывает определенную переменную на сайте, например просмотр страницы, или клик по элементу.
Базовая настройка GTM начинается именно с настройки переменных.
Настройка переменных в Google Tag Manager
Переменные делятся на 2 типа:
- Встроенные
- Пользовательские
Для начала нам потребуется только первый тип.
Зайдем в настройки переменных.
Выбираем пункт меню Переменные, и в меню “Встроенные переменные” нажимаем на кнопку “Настроить”
Переменные подразделяются на следующие типы:
- Страницы
- Утилиты
- Ошибки
- Клики
- Формы
- История
- Видео
- Прокрутка
- Видимость
Для Google Analytics и Яндекс Метрики может хватить и стандартных переменных включенных по умолчанию.
Также можно включить все доступные переменные.
Отмечаем что требуется и выходим, здесь настройки сохранятся автоматически.
Настройка триггеров в Google Tag Manager.
После сохранения настроек переменных перейдем в пункт триггеры.
Жмём по кнопке создать.
В открывшемся окне нажимаем на “Настройку триггера”
Далее требуется выбрать нужный тип триггера.
Триггеры делятся на 4 типа:
- Просмотр страницы
- Модель DOM готова - отслеживание происходит при загрузке объектной модели документа DOM т.е. структуры страницы.
- Окно загружено - Просмотр фиксируется при полной загрузке страницы и всех ее элементов.
- Просмотр страницы - в данном подтипе триггер срабатывает при переходе на страницу, когда браузер только начинает загружать ее.
- Клик
- Все элементы - действие по любому кликабельному элементу сайта
- Только ссылки - действие засчитывается по клику на ссылку.
- Взаимодействие пользователей
- Видео YouTube - триггер будет срабатывать при просмотре видео
- Глубина прокрутки - с помощью данного триггера можно определить на сколько далеко пользователь проскролил страницу в вертикальной или горизонтальной прокрутке.
- Доступность элемента - триггер срабатывает в зависимости от видимости элемента, выбрать отслеживание можно либо по id элемента, либо по CSS селектору.
- Отправка формы - триггер запускается при отправке форм, при этом срабатывание можно настроить только на успешную отправку формы.
- Другие события.
- Изменение в истории - триггер отслеживает изменения в хэше URL страницы
- Ошибка JavaScript - триггер срабатывает при появлении ошибки в JavaScript, также можно настроить триггер на ошибку в определенном номер строки кода.
- Пользовательские события - лучшим примером пользовательского события является установка кода Яндекс Метрики и Google Analytics для отслеживания формы, если стандартный тип триггера “Отправка формы” не сработал.
- Таймер - специальный триггер для срабатывания события через определенный отрезок времени, обычно данный подтип используется вместе с другими триггерами. Примером может служить срабатывание таймера каждые 25 минут для продления отслеживания сеанса Google Analytics (так как по стандарту сеанс прекращается через 30 минут).
При выборе типа триггера, в большинстве триггеров потребуется задать дополнительные параметры для его активации.
К примеру для просмотра страницы можно задать Переменную Page_url для отслеживания определенной страницы допустим “Контакты”
Для каждого триггера требуется задать его название и не забыть затем его сохранить.
С помощью дополнительных параметров триггера, можно настроить более точное их срабатывание.
Настройка Тегов в GTM.
Все созданные ранее триггеры с настроенными переменными требуется отследить внешними системами аналитики и службами.
Для этого триггеры требуется связаться с определенным тегом этих систем и служб.
Настройки тега начинается с его создания.
Для этого переходим в меню Теги и нажимаем кнопку “Создать”
Меню в настройки тега делится на 2 части:
Первая: Конфигурация тега
Вторая: Триггеры
В конфигурации тега нужно выбрать один из предложенных тегов который соответствует нужному сервису, либо добавить свой тег, к примеру тег Яндекс Метрики.
Он задается в подтипе “Пользовательский HTML”.
Каждому из выбранных тегов требуется задать ранее созданные триггеры при которых будет происходить вызов этого тега и передача события.
После выбора нужных триггеров для тега, даем название тегу и сохраняем его
После всех настроек тега, остается только разместить его на сайте.
Публикация контейнера с тегами.
Для внесения изменений на сайт и публикации контейнера с созданными тегами требуется в главном меню нажать на кнопку “Отправить”
В открывшемся меню указываем название версии - к примеру “Установка счетчика Google Analytics”
В описании указываем подробней что сделали, для того чтобы потом было легко понять какая из версий нужна, если при публикации контейнера что-то не будет работать.
Здесь же в изменениях можно посмотреть список, того что будет изменено в контейнере если он был уже ранее опубликован.
Также можно создать отдельный контейнер с внесенными изменениями чтобы не затрагивать ранее созданный.
После всех настроек жмем кнопку “Опубликовать”
Для проверки правильно ли опубликован контейнер нужно воспользоваться пунктом “Предварительный просмотр”.
После включения этого пункта нужно зайти на сайт.
При правильно установленном Google Tag Manager и опубликованом контейнере отобразится контекстное меню GTM поверх сайта.
После подтверждения, что контейнер опубликован правильно, нужно отключить предварительный просмотр в GTM, а также проверить его работоспособность в тех сервисах для которых мы его создавали.
Подробное описание и примеры применения GTM
Установка счетчика Google Analytics через Google Tag Manager
Первым делом создаем триггер
1. Для этого переходим в меню Триггеры
2. Нажимаем на кнопку “Создать”
3. В открывшемся меню нажимаем по “Настройке триггера”
4. Выбираем тип триггера “Просмотр страницы”
5. В условиях активации триггера оставляем по умолчанию “Все просмотры страниц”.
6. Изменяем название тега
7. Нажимаем “Сохранить”.
Следующим шагом переходим к настройки тега
Открываем пункт Теги и нажимаем “Создать”
Открываем “Конфигурацию тега” и выбираем тип тега Universal Analytics (Google Analytics).
Далее в конфигурациях тега открываем Настройки Google Analytics и нажимаем по пункту “Новая переменная”
В настройках переменной требуется указать Идентификатор отслеживания Google Analytics, а также дать название переменной и нажать кнопку “Сохранить”.
Узнать идентификатор можно в Настройках Google Analytics в столбце Ресурсы, пункт Код отслеживания.
Далее нужно выбрать ранее созданный триггер
Для завершения настройки тега даём ему название и нажимаем сохранить.
Далее требуется опубликовать тег, жмем по клавише “Отправить” в главном меню.
Даем название для версии контейнера в который будет помещен тег.
Заполняем описание что заключается в теге.
И нажимаем на кнопку “Опубликовать”.
Далее запускаем “Предварительный просмотр”.
Заходим на сайт и проверяем есть ли в контейнер наш тег.
Далее снова заходим в Google Analytics на страницу с кодом отслеживания и нажимаем кнопку “Отправить тестовый трафик”.
Либо заходим в отчет “В режиме реального времени” и смотрим в источниках трафик количество человек на сайте т.е. как раз ваш визит.
Не забудьте выключить предварительный просмотр в GTM.
Установка счетчика Яндекс Метрики с помощью Google Tag Manager
1. Изначально как и для Google Analytics требуется создать триггер для “просмотра страниц” процесс полностью описан в начале предыдущего пункта (1-7 действия по скриншотам.)
2. Далее Заходим в создание Тега, нажимаем на “Конфигурацию тега” и выбираем тип тега “Пользовательский HTML”.
В открывшемся окне требуется вставить код метрики.
Код для установки Яндекс Метрики находится в настройках счетчика.
Вставляем код метрики, выбираем созданный ранее триггер “Просмотр страницы”, даем название Тегу и сохраняем его.
Далее жмем отправить и опубликовываем контейнер.
Также как и Google Analytics узнать правильно ли опубликован тег, можно нажав предварительный просмотр и зайдя на сайт просмотреть отобразившиеся теги.
Проверить работоспособность со стороны сервиса метрики можно двумя способами: Первый: Зайти в Яндекс Метрику и посмотреть доступность счетчика по иконке рядом с ним.
Второй. Более медленный - просто зайти чуть позже на Яндекс Метрику и посмотреть трафик.
Настройка Ремаркетинга Adwords с помощью Google Tag Manager.
Для настройки ремаркетинга AdWords требуется узнать Идентификатор конверсии.
Найти его можно в интерфейсе Google AdWords в настройках.
В столбце Общая библиотек нужно выбрать пункт “Менеджер аудиторий”.
Далее нужно зайти в “Источники аудиторий” и в пункте Тег AdWords нажать на текст “Настроить Тег”
Далее выбираем тип ремаркетинга который требуется установить, также в общих параметрах отмечаем идентификатор пользователя и нажимаем “Сохранить и продолжить”
В открывшемся окне находим код Global Site Tag, и копируем из него Идентификатор конверсии.
И завершаем настройку источника аудиторий.
В Google Tag Manager, создаем новый тег в конфигурации тега выбираем тип Ремаркетинг AdWords.
Вставляем в поле идентификатор конверсии, который скопировали с AdWords.
В триггере указываем Просмотр страниц.
Называем и сохраняем созданный тег.
Остается только опубликовать его в контейнер на сайте.
Установка пикселя Facebook и Вконтакте а также счетчика MyTarget.
Все три соцсети устанавливаются в Google Tag Manager через Тег с типом “Пользовательский HTML” в меню создания тега.
В открывшемся окне потребуется лишь вставить код из нужной социальной сети.
В триггерах выбрать уже созданный “Просмотр страниц”.
Дать понятное название тегу и сохранить его.
После настройки тега, его опять же следует опубликовать.
Более подробно можно посмотреть на примере Яндекс Метрики выше в статье.
Отслеживание кликов с помощью Google Tag Manager.
Зачастую на сайте требуется отследить определенный клик по элементу.
С помощью Google Tag Manager такой тип отслеживание сделать очень просто.
1. Чтобы отследить определенный клик нас сайте с помощью Google Tag Manager, сначало нужно включить отслеживание переменных - Кликов.
Для этого заходим в настройки переменных и активируем все переменные данного типа.
2. Следующим шагом требуется включить Предварительный просмотр
3. Далее заходим на сайт и кликаем по элементу с которого потребуется отследить клик, с помощью отслеживание GTM определяем параметры клика.
В левой части меню должны отражаться клики как отдельный элемент gtm.click
Выбираем нужный из кликов и заходим во вкладку Variables, здесь мы видим все параметры клика, из всего множества находим Click Classes и копируем его значение из столбца Value.
1. Далее переходим к созданию триггера определенного клика.
Настройка триггера:
- Тип триггера Клик - Все элементы
- Условия активации - Некоторые клики
- В переменных выбираем Click Classes “содержит” “Вставляем скопированное ранее значение”
- Называем триггер
- Сохраняем
1. Далее потребуется создать тег для отправки события в Google Analytics
Настройки Тега:
1. В конфигурациях - Universal Analytics
2. Тип отслеживания - Событие
3. В параметрах отслеживания прописываем произвольные значения в Категории и действии, по которым Google Analytics определит событие.
4. В пункте “Настройках Google Analytics” выбираем заранее созданную переменную с идентификатором отслеживания или ставим галочку напротив фразы “Включить переопределение настроек в этом теге” и выбиваем его в появившееся поле. Подробнее об идентификаторе читайте в пункте “Установка счетчика Google Analytics”.
5. В триггере выбираем ранее созданный триггер с переменной
6. Даем название тегу
7. Сохраняем
Не забудьте опубликовать Тег
Настройка события в Google Analytics
1. Заходим в настройки Администратора
2. В столбце представления выбираем пункт Цели
3. Нажимаем на кнопку добавить цель
4. В установке цели выбираем “Собственная”
5. Нажимаем “Далее”
6. В описании цели называем цель
7. Выбираем тип: Событие
8. Нажимаем “Далее”
9. В подробных сведениях о цели прописываем категорию и действие которые указали в GTM в пункте 5.3
10. Обязательно выставляем “Регулярное выражение”
11. Нажимаем “Сохранить”
Проверка события в Google Analytics
1. Переходим в Отчеты в режиме реального времени.
2. Открываем Отчет Конверсии.
3. И здесь видим срабатывает ли созданная цель.
Готово!
Отслеживание отправки формы на сайте
C помощью Google Tag Manager
Одним из самых важных моментов для интернет рекламы ведущей на сайт является отслеживания конверсий, настроить конверсию по странице благодарности после совершения заказа проще всего, а вот если конверсия совершается по всплывающей форме без переадресации?
Для этого и потребуется отследить отправку формы. Именно событие отправки, а не клика по кнопке дает реальную картину совершения заказа.
Настройка Google Tag Manager
Настройка переменных
1. Заходим в пункт переменные
2. Нажимаем кнопку настроить
3. Листаем список и находим тип Формы
4. Включаем все элементы этого типа
С настройкой переменных закончили.
Отправляем их в контейнер на сайте.
Далее с помощью включенных переменных мы должны определить значения формы на сайте.
Определение параметров формы
1. Включаем Предварительный просмотр и переходим на сайт
2. Находим нужную форму
3. Заполняем форму
4. Отправляем ее
5. В контекстном меню Tag Manager находим элемент gtm.formSubmit
6. Переходим во вкладку Variables
7. Находим Строчку Form Classes или Form ID (главное что бы параметры не были пустыми)
8. Копируем значение из колонки Value
Настройка триггера отправки определенной формы
1. Открываем меню создания триггера в GTM
2. Нажимаем кнопку “Создать”
3. Заходим в настройки триггера
4. Выбираем Тип триггера - Отправка формы
5. В условиях активации триггера выбираем пункт - Некоторые формы
6. Далее выбираем переменную Form Classes
7. Соответствие - содержит
8. И вставляем скопированное с сайта значение.
9. Называем триггер
10. Нажимаем - Сохранить
Таким образом мы создали тег для отслеживание только нужной формы.
Осталось только передать событие в Google Analytics.
Для этого потребуется создать тег
Настройка тега отслеживания формы
1. Заходим в меню Теги
2. Нажимаем кнопку - Создать
3. Заходим в конфигурацию тега
4. Выбираем Universal Analytics (Google Analytics)
5. В типе отслеживания выбираем Событие
6. Заполняем Категорию и Действие, которые потом нужно будет задать в аналитике
7. Также указываем Идентификатор отслеживания Google Analytics
8. Выбираем созданный триггер для отслеживания отправки формы
9. Называем тег
10. Сохраняем его
Осталось только опубликовать контейнер и настроить цели в Google Analytics.
Про это подробней можно прочитать выше в пункте Отслеживание кликов в GTM.
Заключение
В заключении хочется сказать, что многим данный сервис до сих пор не известен и кажется сложным, но это не так.
Сервис имеет огромный потенциал и может очень неплохо разгрузить вашего программиста, так как ему нужно будет установить лишь его, а цели и всё остальное может сделать уже специалисту, которому все инструменты и настройки нужны.
В данной статье я разобрал только базовые вещи, которые чаще всего требуются для большинства контекстологов, таргетологов и SEO-специалистов.
Но в Google Tag Manager возможностей гораздо больше, при том они более узкоспециализированные.
Присоединяйтесь к обсуждению статьи на нашем блоге:
Настройка Google Tag Manager в 2018
