+7 (495) 532-45-69

График работы: с 9-00 до 19-00

Получите доступ к пошаговым видео-инструкциям Получить Восстановить
Настройка Google Tag Manager в 2018

Голосов: 2, Рейтинг: 5

27.03.2018

Настройка Google Tag Manager в 2018



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 и нажать кнопку “Далее”


Создание аккаунта Google Tag Manager


Попадаем в окно с “Настройкой Контейнера”.
Здесь указываем название контейнера, к примеру адрес сайта для которого он создается.

И выбрать где будет использоваться для большинства падёт выбор на Веб-сайт или AMP, второй вариант используется для установки различных тегов на AMP-страницы от Google.


Настройка контейнера Google Tag Manager


После создания тега и контейнера, сервис выдаст код диспетчера тегов Google,
Именно этот код потребуется установить на сайт вручную.


код Google Tag Manager

Установка 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 Tag Manager


В каждом аккаунте есть как минимум один основной контейнер.

В контейнере располагаются теги, к примеру тег Google Analytics или Яндекс Метрики.

Для каждого тега определяется триггер.
Триггер определяет условия срабатывания тега и соответственно отправки им данных, например отработка цели в яндекс метрике, или Google Analytics.

Для того чтобы триггер сработал, он считывает определенную переменную на сайте, например просмотр страницы, или клик по элементу.

Базовая настройка GTM начинается именно с настройки переменных.

Настройка переменных в Google Tag Manager

Переменные делятся на 2 типа:

  • Встроенные

  • Пользовательские


Для начала нам потребуется только первый тип.

Зайдем в настройки переменных.
Выбираем пункт меню Переменные, и в меню “Встроенные переменные” нажимаем на кнопку “Настроить”

Настройка переменных в Google Tag Manager


Переменные подразделяются на следующие типы:


  • Страницы

  • Утилиты

  • Ошибки

  • Клики

  • Формы

  • История

  • Видео

  • Прокрутка

  • Видимость


Для Google Analytics и Яндекс Метрики может хватить и стандартных переменных включенных по умолчанию.

Также можно включить все доступные переменные.

Отмечаем что требуется и выходим, здесь настройки сохранятся автоматически.

Конфигурация встроенных переменных


Настройка триггеров в Google Tag Manager.

После сохранения настроек переменных перейдем в пункт триггеры.
Жмём по кнопке создать.

Создание триггера в GTM


В открывшемся окне нажимаем на “Настройку триггера”
Настройка триггера в Google Tag Manager


Далее требуется выбрать нужный тип триггера.

Триггеры делятся на 4 типа:

  • Просмотр страницы

    • Модель DOM готова - отслеживание происходит при загрузке объектной модели документа DOM т.е. структуры страницы.

    • Окно загружено - Просмотр фиксируется при полной загрузке страницы и всех ее элементов.

    • Просмотр страницы - в данном подтипе триггер срабатывает при переходе на страницу, когда браузер только начинает загружать ее.

  • Клик

    • Все элементы - действие по любому кликабельному элементу сайта

    • Только ссылки - действие засчитывается по клику на ссылку.

  • Взаимодействие пользователей

    • Видео YouTube - триггер будет срабатывать при просмотре видео

    • Глубина прокрутки - с помощью данного триггера можно определить на сколько далеко пользователь проскролил страницу в вертикальной или горизонтальной прокрутке.

    • Доступность элемента - триггер срабатывает в зависимости от видимости элемента, выбрать отслеживание можно либо по id элемента, либо по CSS селектору.

    • Отправка формы - триггер запускается при отправке форм, при этом срабатывание можно настроить только на успешную отправку формы.

  • Другие события.

    • Изменение в истории - триггер отслеживает изменения в хэше URL страницы

    • Ошибка JavaScript - триггер срабатывает при появлении ошибки в JavaScript, также можно настроить триггер на ошибку в определенном номер строки кода.

    • Пользовательские события - лучшим примером пользовательского события является установка кода Яндекс Метрики и Google Analytics для отслеживания формы, если стандартный тип триггера “Отправка формы” не сработал.

    • Таймер - специальный триггер для срабатывания события через определенный отрезок времени, обычно данный подтип используется вместе с другими триггерами. Примером может служить срабатывание таймера каждые 25 минут для продления отслеживания сеанса Google Analytics (так как по стандарту сеанс прекращается через 30 минут).


Типы триггеров в Google Tag Manager

При выборе типа триггера, в большинстве триггеров потребуется задать дополнительные параметры для его активации.

К примеру для просмотра страницы можно задать Переменную Page_url для отслеживания определенной страницы допустим “Контакты”
Для каждого триггера требуется задать его название и не забыть затем его сохранить.

Настройка триггера для просмотра страниц


С помощью дополнительных  параметров триггера, можно настроить более точное их срабатывание.

Настройка Тегов в GTM.

Все созданные ранее триггеры с настроенными переменными требуется отследить внешними системами аналитики и службами.


Для этого триггеры требуется связаться с определенным тегом этих систем и служб.

Настройки тега начинается с его создания.
Для этого переходим в меню Теги и нажимаем кнопку “Создать”

Создание тега в Google Tag Manager


Меню в настройки тега делится на 2 части:

Первая: Конфигурация тега
Вторая: Триггеры

Настройка тега в GTM


В конфигурации тега нужно выбрать один из предложенных тегов который соответствует нужному сервису, либо добавить свой тег, к примеру тег Яндекс Метрики.

Он задается в подтипе “Пользовательский HTML”.

Типы тега в Google Tag Manager


Каждому из выбранных тегов требуется задать ранее созданные триггеры при которых будет происходить вызов этого тега и передача события.

Назначение триггера для тега в Google Tag Manager


После выбора нужных триггеров для тега, даем название тегу и сохраняем его


Сохранение тега в GTM


После всех настроек тега, остается только разместить его на сайте.

Публикация контейнера с тегами.

Для внесения изменений на сайт и публикации контейнера с созданными тегами требуется в главном меню нажать на кнопку “Отправить”


Публикация контейнера в Google Tag Manager


В открывшемся меню указываем название версии - к примеру “Установка счетчика Google Analytics”

В описании указываем подробней что сделали, для того чтобы потом было легко понять какая из версий нужна, если при публикации контейнера что-то не будет работать.


Здесь же в изменениях можно посмотреть список, того что будет изменено в контейнере если он был уже ранее опубликован.

Также можно создать отдельный контейнер с внесенными изменениями чтобы не затрагивать ранее созданный.

После всех настроек жмем кнопку “Опубликовать”

Настройки перед публикацией контейнера в GTM



Для проверки правильно ли опубликован контейнер нужно воспользоваться пунктом “Предварительный просмотр”.


Предварительный просмотр в GTM


После включения этого пункта нужно зайти на сайт.
При правильно установленном Google Tag Manager и опубликованом контейнере отобразится контекстное меню GTM поверх сайта.


Контейнер Google Tag Manager на сайте


После подтверждения, что контейнер опубликован правильно, нужно отключить предварительный просмотр в GTM, а также проверить его работоспособность в тех сервисах для которых мы его создавали.

Подробное описание и примеры применения GTM

Установка счетчика Google Analytics через Google Tag Manager

Первым делом создаем триггер

Для этого переходим в меню Триггеры и нажимаем на кнопку “Создать”


Создание триггера в GTM


В открывшемся меню нажимаем по “Настройке триггера”
Выбираем тип триггера “Просмотр страницы”


Настройка триггера на просмотр страницы


В условиях активации триггера оставляем по умолчанию “Все просмотры страниц”.

Изменяем название тега и нажимаем “Сохранить”.


Настройка условий активации триггера


Следующим шагом переходим к настройки тега


Открываем пункт Теги и нажимаем “Создать”

Создание нового тега в Tag Manager


Открываем “Конфигурацию тега” и выбираем тип тега Universal Analytics (Google Analytics).

Конфигурация тега для Google Analytics


Далее в конфигурациях тега открываем Настройки Google Analytics и нажимаем по пункту “Новая переменная”


Настройка тега Google Analytics


В настройках переменной требуется указать Идентификатор отслеживания Google Analytics, а также дать название переменной и нажать кнопку “Сохранить”.

Настройка идентификатора отслеживания в GTM


Узнать идентификатор можно в Настройках Google Analytics в столбце Ресурсы, пункт Код отслеживания.

Код отслеживания в Google Analytics



Идентификатор отслеживания в Google Analytics


Далее нужно выбрать ранее созданный триггер

Настройка триггера для тега Google Analytics


Выбор тега Просмотр страницы


Для завершения настройки тега даём ему название и нажимаем сохранить.

Сохранения тега Google Analytics


Далее требуется опубликовать тег, жмем по клавише “Отправить” в главном меню.

Публикация тега Google Analytics


Даем название для версии контейнера в который будет помещен тег.
Заполняем описание что заключается в теге.

И нажимаем на кнопку “Опубликовать”.

Внесение изменений в контейнер на сайте


Далее запускаем “Предварительный просмотр”.

Предварительный просмотр контейнера на сайте


Заходим на сайт и проверяем есть ли в контейнер наш тег.

Проверка наличии тега в контейнере GTM


Далее снова заходим в Google Analytics на страницу с кодом отслеживания и нажимаем кнопку “Отправить тестовый трафик”.

Проверка трафика в Google Analytics


Либо заходим в отчет “В режиме реального времени” и смотрим в источниках трафик количество человек на сайте т.е. как раз ваш визит.

Источники трафика в режиме реального времени в GA


Не забудьте выключить предварительный просмотр в GTM.

Установка счетчика Яндекс Метрики с помощью Google Tag Manager

1.Изначально как и для Google Analytics требуется создать триггер для “просмотра страниц” процесс полностью описан в начале предыдущего пункта (1-7 действия по скриншотам.)

2.Далее Заходим в создание Тега, нажимаем на “Конфигурацию тега” и выбираем тип тега “Пользовательский HTML”.

Тег с типом Пользовательский HTML


В открывшемся окне требуется вставить код метрики.
Код для установки Яндекс Метрики находится в настройках счетчика

Код счетчика в Яндекс Метрике


Вставляем код метрики, выбираем созданный ранее триггер “Просмотр страницы”, даем название Тегу и сохраняем его.

Создание тега Яндекс Метрики в Google Tag Manager


Далее жмем отправить и опубликовываем контейнер.


Установка Яндекс Метрики с помощью Google Tag Manager


Также как и Google Analytics узнать правильно ли опубликован тег, можно нажав предварительный просмотр и зайдя на сайт просмотреть отобразившиеся теги.

Проверка счетчиков Google Analytics и Яндекс Метрики


Проверить работоспособность со стороны сервиса метрики можно двумя способами:
Первый: Зайти в Яндекс Метрику и посмотреть доступность счетчика по иконке рядом с ним.

Проверка работы Яндекс Метрики

Второй. Более медленный - просто зайти чуть позже на Яндекс Метрику и посмотреть трафик.

Настройка Ремаркетинга Adwords с помощью Google Tag Manager.

Для настройки ремаркетинга AdWords требуется узнать Идентификатор конверсии.
Найти его можно в интерфейсе Google AdWords в настройках.
В столбце Общая библиотек нужно выбрать пункт “Менеджер аудиторий”.

Менеджер аудиторий в Google AdWords

Далее нужно зайти в “Источники аудиторий” и в пункте Тег AdWords нажать на текст “Настроить Тег”

Тег Google AdWords

Далее выбираем тип ремаркетинга который требуется установить, также в общих параметрах отмечаем идентификатор пользователя и нажимаем “Сохранить и продолжить”

Создание тега Google AdWords

В открывшемся окне находим код Global Site Tag, и копируем из него Идентификатор конверсии.

Идентификатор конверсии Google AdWords

И завершаем настройку источника аудиторий.


В Google Tag Manager, создаем новый тег в конфигурации тега выбираем тип Ремаркетинг AdWords.

Ремаркетинг AdWords в Google Tag Manager

Вставляем в поле идентификатор конверсии, который скопировали с AdWords.

В триггере указываем Просмотр страниц.

Называем и сохраняем созданный тег.

Создание тега AdWords

Остается только опубликовать его в контейнер на сайте.


Установка пикселя Facebook и Вконтакте а также счетчика MyTarget.

Все три соцсети устанавливаются в Google Tag Manager через Тег с типом “Пользовательский HTML” в меню создания тега.

Создание пользовательского тега в GTM


В открывшемся окне потребуется лишь вставить код из нужной социальной сети.
В триггерах выбрать уже созданный “Просмотр страниц”.

Дать понятное название тегу и сохранить его.

Настройка пикселя Facebook через Google Tag Manager

После настройки тега, его опять же следует опубликовать.

Более подробно можно посмотреть на примере Яндекс Метрики выше в статье.

Отслеживание кликов с помощью Google Tag Manager.

Зачастую на сайте требуется отследить определенный клик по элементу.
С помощью Google Tag Manager такой тип отслеживание сделать очень просто.

  1. Чтобы отследить определенный клик нас сайте с помощью Google Tag Manager, сначало нужно включить отслеживание переменных - Кликов.

    Для этого заходим в настройки переменных и активируем все переменные данного типа.

    Настройка кликов в переменных Google Tag Manager


  2. Следующим шагом требуется включить Предварительный просмотр

    Предварительный просмотр кликов в GTM


  3. Далее заходим на сайт и кликаем по элементу с которого потребуется отследить клик, с помощью отслеживание GTM определяем параметры клика.

    В левой части меню должны отражаться клики как отдельный элемент gtm.click
    Выбираем нужный из кликов и заходим во вкладку Variables, здесь мы видим все параметры клика, из всего множества находим Click Classes и копируем его значение из столбца Value


Определение класса клика с помощью Google Tag Manager


  1. Далее переходим к созданию триггера определенного клика.

    Настройка триггера:

    1. Тип триггера Клик - Все элементы

    2. Условия активации - Некоторые клики

    3. В переменных выбираем Click Classes “содержит” “Вставляем скопированное ранее значение”

    4. Называем триггер

    5. Сохраняем


Настройка отслеживания клика через Google Tag Manager


  1. Далее потребуется создать тег для отправки события в Google Analytics

    Настройки Тега:

    1. В конфигурациях - Universal Analytics

    2. Тип отслеживания - Событие

    3. В параметрах отслеживания прописываем произвольные значения в Категории и действии, по которым Google Analytics определит событие.

    4. В пункте “Настройках Google Analytics” выбираем заранее созданную переменную с идентификатором отслеживания или ставим галочку напротив фразы “Включить переопределение настроек в этом теге” и выбиваем его в появившееся поле. Подробнее об идентификаторе читайте в пункте “Установка счетчика Google Analytics”.

    5. В триггере выбираем ранее созданный триггер с переменной

    6. Даем название тегу

    7. Сохраняем


Настройка тега Google Analytics для клика

Сохранение изменений в теге GTM


  1. Не забудьте опубликовать Тег

  2. Настройка события в Google Analytics

    1. Заходим в настройки Администратора

    2. В столбце представления выбираем пункт Цели

Цели в Google Analytics

  1. Нажимаем на кнопку добавить цель

Создание цели в Google Analytics

  1. В установке цели выбираем “Собственная”

  2. Нажимаем “Далее”

Собственная цель в Google Analytics

  1. В описании цели называем цель

  2. Выбираем тип: Событие

  3. Нажимаем “Далее”

Настройка цели в Google Analytics

  1. В подробных сведениях о цели прописываем категорию и действие которые указали в GTM в пункте 5.3

  2. Обязательно выставляем “Регулярное выражение”

  3. Нажимаем “Сохранить”

Настройка события в Google Analytics


  1. Проверка события в Google Analytics

    1. Переходим в Отчеты в режиме реального времени

    2. Открываем Отчет Конверсии

    3. И здесь видим срабатывает ли созданная цель.


Отслеживание конверсии в Google Analytics

Готово!


Отслеживание отправки формы на сайте
C помощью Google Tag Manager

Одним из самых важных моментов для интернет рекламы ведущей на сайт является отслеживания конверсий, настроить конверсию по странице благодарности после совершения заказа проще всего, а вот если конверсия совершается по всплывающей форме без переадресации?

Для этого и потребуется отследить отправку формы. Именно событие отправки, а не клика по кнопке дает реальную картину совершения заказа.


Настройка Google Tag Manager


  1. Настройка переменных

    1. Заходим в пункт переменные

    2. Нажимаем кнопку настроить

Настройка переменных для отслеживания форм через GTM


  1. Листаем список и находим тип Формы

  2. Включаем все элементы этого типа

Настройки переменных форм в Google Tag Manager


С настройкой переменных закончили.

Отправляем их в контейнер на сайте.

Отправка контейнера GTM


Далее с помощью включенных переменных мы должны определить значения формы на сайте.


  1. Определение параметров формы

    1. Включаем Предварительный просмотр и переходим на сайт

Предварительный просмотр менеджера тегов

  1. Находим нужную форму

  2. Заполняем форму

  3. Отправляем ее

Форма обратной связи на сайте

  1. В контекстном меню Tag Manager находим элемент gtm.formSubmit

  2. Переходим во вкладку Variables

  3. Находим Строчку Form Classes или Form ID (главное что бы параметры не были пустыми)

  4. Копируем значение из колонки Value


Отслеживание формы обратной связи с помощью GTM


  1. Настройка триггера отправки определенной формы

    1. Открываем меню создания триггера в GTM

    2. Нажимаем кнопку “Создать”

Создание триггера для отслеживания форм


  1. Заходим в настройки триггера

  2. Выбираем Тип триггера - Отправка формы


Выбор типа триггера формы


  1. В условиях активации триггера выбираем пункт - Некоторые формы

  2. Далее выбираем переменную Form Classes

  3. Соответствие - содержит

  4. И вставляем скопированное с сайта значение.

  5. Называем триггер

  6. Нажимаем - Сохранить


Настройка триггера для отслеживания форм


Таким образом мы создали тег для отслеживание только нужной формы.

Осталось только передать событие в Google Analytics.


Для этого потребуется создать тег

  1. Настройка тега отслеживания формы

    1. Заходим в меню Теги

    2. Нажимаем кнопку - Создать


Создание тега отслеживание форм


  1. Заходим в конфигурацию тега

  2. Выбираем Universal Analytics (Google Analytics)

Настройка события отправки формы для GA

  1. В типе отслеживания выбираем Событие

  2. Заполняем Категорию и Действие, которые потом нужно будет задать в аналитике

  3. Также указываем Идентификатор отслеживания Google Analytics


Настройка события в Google Tag Manager


  1. Выбираем созданный триггер для отслеживания отправки формы

  2. Называем тег

  3. Сохраняем его

Настройка цели Google Analytics в Google Tag Manager

Осталось только опубликовать контейнер и настроить цели в Google Analytics.

Про это подробней можно прочитать выше в пункте Отслеживание кликов в GTM.

Заключение

В заключении хочется сказать, что многим данный сервис до сих пор не известен и кажется сложным, но это не так.

Сервис имеет огромный потенциал и может очень неплохо разгрузить вашего программиста, так как ему нужно будет установить лишь его, а цели и всё остальное может сделать уже специалисту, которому все инструменты и настройки нужны.


В данной статье я разобрал только базовые вещи, которые чаще всего требуются для большинства контекстологов, таргетологов и SEO-специалистов.


Но в Google Tag Manager возможностей гораздо больше, при том они более узкоспециализированные.

Хотелось бы вам видеть такие небольшие статьи по GTM?



Получите бесплатные фишки по Google Tag Manager

Комментарии



Разделы сайта


+7 (495) 532-45-69

График работы: с 9-00 до 19-00


Оставьте email и мы пришлем вам статью

Видеоролики