Google Tag Manager: руководство по установке и настройке для новичков

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

Google Tag Manager — это только начало. Самые эффективные инструменты автоматизации уже разбирают на курсе по контекстной рекламе в школе интернет-маркетинга GUSAROV EDU. Жизнь слишком коротка, чтобы все делать вручную.

Что такое Google Tag Manager?

Диспетчер тегов Google Tag Manager — бесплатный инструмент, который дает возможность добавлять и обновлять теги без участия веб-разработчиков, не внося изменений в код сайта. Управление скриптами и все необходимые настройки производятся через пользовательский интерфейс инструмента и не требуют участия программистов, кроме установки кода GTM на сайте.

Задачи, которые можно решать с помощью Google Tag Manager

• Установка кода ретаргетинга и ремаркетинга
• Установка кнопок шаринга
• Мониторинг внутренних переходов
• Отслеживание переходов по всем внешним ссылкам
• Отслеживание переходов по конкретной внешней ссылке
• Уточнение показателя отказов
• Мониторинг отправки форм
• Отслеживание кликов по социальным кнопкам и виджетам
• Отслеживание кликов по элементам с тем или иным текстом
• Мониторинг конкретных источников внешнего трафика
• Мониторинг всех источников внешнего трафика
• Подмена номера на сайте

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

Чтобы начать настройку Google Tag Manager, необходимо зайти на страницу сервиса tagmanager.google.com и авторизоваться или зарегистрироваться.

Как и для остальных сервисов от Google для использования Tag Manager потребуется уже созданный аккаунт в их системе. При первом заходе в Google Tag Manager откроется окно “Добавления нового аккаунта”. Здесь надо указать произвольное Название аккаунта и выбрать страну, согласиться или нет с отправкой данных в Google и нажать кнопку “Далее”.
Попадаем в окно с “Настройкой Контейнера”. Здесь указываем название контейнера, к примеру, адрес сайта для которого он создается. И выбрать, где будет использоваться для большинства падёт выбор на Веб-сайт или AMP, второй вариант используется для установки различных тегов на AMP-страницы от Google. В настройках контейнера укажите, где он будет использоваться. После того, как создали контейнер, принимаете Соглашение об Условиях использования Диспетчера тегов Google.

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

Установка Google Tag Manager на сайт

Для 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

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

• Встроенные.
• Пользовательские.

Для начала нам потребуется только первый тип. Зайдем в настройки переменных. Выбираем пункт меню Переменные и в меню “Встроенные переменные” нажимаем на кнопку “Настроить” Переменные подразделяются на следующие типы:

• Страницы.
• Утилиты.
• Ошибки.
• Клики.
• Формы.
• История.
• Видео.
• Прокрутка.
• Видимость.

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

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

После сохранения настроек переменных перейдем в пункт триггеры.
Жмём по кнопке создать. В открывшемся окне нажимаем на “Настройку триггера” Далее требуется выбрать нужный тип триггера. Триггеры делятся на 4 типа:

• Просмотр страницы.
• • Модель DOM готова — отслеживание происходит при загрузке объектной модели документа DOM т.е. структуры страницы.
  • Окно загружено — Просмотр фиксируется при полной загрузке страницы и всех ее элементов.
  • Просмотр страницы — в данном подтипе триггер срабатывает при переходе на страницу, когда браузер только начинает загружать ее.
• Клик.
• • Все элементы — действие по любому кликабельному элементу сайта
  • Только ссылки — действие засчитывается по клику на ссылку.
• Взаимодействие пользователей.
• • Видео YouTube — триггер будет срабатывать при просмотре видео
  • Глубина прокрутки — с помощью данного триггера можно определить на сколько далеко пользователь проскролил страницу в вертикальной или горизонтальной прокрутке.
  • Доступность элемента — триггер срабатывает в зависимости от видимости элемента, выбрать отслеживание можно либо по id элемента, либо по CSS селектору.
  • Отправка формы — триггер запускается при отправке форм, при этом срабатывание можно настроить только на успешную отправку формы.
• Другие события.
• • Изменение в истории — триггер отслеживает изменения в хэше URL страницы
  • Ошибка JavaScript — триггер срабатывает при появлении ошибки в JavaScript, также можно настроить триггер на ошибку в определенном номер строки кода.
  • Пользовательские события — лучшим примером пользовательского события является установка кода Яндекс Метрики и Google Analytics для отслеживания формы, если стандартный тип триггера “Отправка формы” не сработал.
  • Таймер — специальный триггер для срабатывания события через определенный отрезок времени, обычно данный подтип используется вместе с другими триггерами. Примером может служить срабатывание таймера каждые 25 минут для продления отслеживания сеанса Google Analytics (так как по стандарту сеанс прекращается через 30 минут).

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

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

Основные параметры в GTM

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

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

• Изначально как и для Google Analytics требуется создать триггер для “просмотра страниц” процесс полностью описан в начале предыдущего пункта
• Далее Заходим в создание Тега, нажимаем на “Конфигурацию тега” и выбираем тип тега “Пользовательский HTML”.
  В открывшемся окне требуется вставить код метрики. Код для установки Яндекс Метрики находится в настройках счетчика

Подключение Google Analytics через GTM

Заключение