Как настроить Google Tag Manager для эффективного отслеживания сайта

Google Tag Manager (GTM) — это бесплатный инструмент от Google, который позволяет легко добавлять сторонние аналитические теги, теги отслеживания конверсий, пиксели ремаркетинга на вашем веб-сайте или в мобильном приложении без необходимости редактирования кода вашего сайта. Цель Google Tag Manager — упростить и ускорить процесс управления и развертывания аналитики на сайте или в приложении, обеспечивая при этом гибкость, контроль и повышение эффективности работы. GTM позволяет маркетологам и аналитикам быстро адаптироваться к изменениям и запускать новые кампании без необходимости вовлекать разработчиков. Код GTM нужно добавить на сайт только один раз. В дальнейшем маркетолог или владелец бизнеса самостоятельно сможет установить коды других служб без участия программиста или веб-мастера.

С помощью GTM можно легко добавлять на сайты коды таких популярных сервисов и платформ, как:

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

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

Как подключить Google Tag Manager (GTM) на сайт

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

Добавьте название контейнера. Ваш контейнер – это фрагмент кода, который вы добавите на свой веб-сайт, чтобы GTM работал. Обычно используют один контейнер для одного сайта. Поэтому название контейнера может быть названием или URL-адресом вашего веб-сайта. После этого выберите нужную "Целевую платформу".

После ввода всех необходимых данных активируется кнопка “Создать”. Нажмите ее, чтобы получить аккаунт Google Tag Manager и свой первый контейнер.

Код для вставки Google Tag Manager на ваш сайт находится: заходим в Ваш аккаунт GTM→ Администрирование (вкладка "КОНТЕЙНЕР") → "Установить Google Менеджер тегов".

Исходный код контейнера GTM разделен на две части:

Первая часть представляет собой фрагмент кода JavaScript, который добавляется в <head>раздел каждой страницы веб-сайта. Эта часть имеет решающее значение для включения всех функций GTM, и этот плагин помогает правильно разместить эту часть на вашем сайте.

Вторая часть — это фрагмент iframe, который действует как отказоустойчивый/резервный вариант, если JavaScript пользователя отключен. Google рекомендует – для лучшей производительности – размещать этот фрагмент кода непосредственно после открывающего <body>тега на каждой странице.

  • Универсальный способ. Первую часть кода нужно вставить в тег <head>. Вторую – после тега <body>.
  • Wordpress и GTM:

Для добавления кода в Wordpress, я обычно использую плагин Clearfy Pro, как вариант существует плагин GTM4WP – A Google Tag Manager (GTM) plugin for WordPress с поддержкой Contact Form 7, WooCommerce, Google Optimize (проект закрыт), Accelerated Mobile Pages (AMP страниц), Cookiebot (при необходимости режим автоматической блокировки файлов cookie).

На мой взгляд самая корректная установка кода GTM или на прямую через редактирование темы Wordpress или через плагин Clearfy Pro. В плагине Clearfy перейдите на страницу "Код", найдите раздел "Код в <head>" включите его и вставьте первый блок кода GTM. Ниже найдите раздел "Код перед </body>", включите его и вставьте второй блок кода GTM. Нажмите кнопку внизу "Сохранить изменения".

Базовая настройка GTM: Подключение Google Analytics

  1. Cоздание переменной (тип Константа) для хранения ID Google Analytics. Переменной присваиваем Идентификатор потока данных (Который вы можете найти во вкладке "Сведения о веб-потоке" Google Аналитики.)
  2. Добавляем Тег Google, в поле "Идентификатор тега" добавляем нашу созданную переменную. В пункте Триггеры выбираем All Pages и нажимаем кнопку "сохранить", чтобы новый тег появился в вашей рабочей области.
  3. Добавить переменные для отслеживание кликов и форм, переходим в раздел GTM "Рабочая область" → "Переменные" → Кнопка "Настроить". Ставим галочки напротив всех событий в разделах "Страницы", "Клики", "Формы".
  4. После этого нужно добавить тэг на ваш сайт. Для этого следует внести изменения, воспользовавшись кнопкой "Отправить" в вашей рабочей области.

Готово! Google Analytics собирает данные с вашего сайта.

После внесения изменений и их проверки всегда нажимайте кнопку "Отправить" в вашей рабочей области Google Тег Менеджера. В новом окне добавляйте название новой версии и нажмите "Опубликовать". Только после этого новые настройки заработают на вашем сайте.

Как установить код Facebook Pixel, Яндекс Метрику, VK через Google Tag Manager

Для того чтобы установить Facebook Pixel через Google Tag Manager зайдите в раздел: «Теги» и нажмите кнопку «Создать». Выберите тег «Пользовательский HTML». Напишите название и добавьте код Facebook Pixel. Последний шаг — выбрать триггер активации (All Pages). Сохраните. Готово!

По этому принципу вы можете создавать и другие пользовательские теги, для которых не предусмотрены готовые шаблоны в библиотеке тегов GTM. К примеру, этот способ используется для добавления на сайты кодов из Яндекс.Метрики или VK.

Как тестировать работу GTM

Для тестирования и отладки корректности работы тегов перед их развертыванием на живом сайте существуют различные инструменты и методы. В контексте Google Tag Manager (GTM) наиболее часто используются следующие инструменты и функции:

  • Встроенные инструменты GTM. Режим предварительного просмотра и отладки (Preview Mode). Позволяет увидеть, как теги будут срабатывать на вашем сайте перед их развертыванием. Можно увидеть последовательность срабатывания тегов, причины их активации или деактивации, а также данные переменных.
  • Консоль JavaScript в браузере. GTM выводит отладочные сообщения в консоль браузера, например, Chrome DevTools, что позволяет проверить работу тегов и переменных. Консольные команды для проверки тегов и переменных, введите в консоль браузера команду для проверки значений переменных и состояния тегов, например, dataLayer для просмотра содержимого слоя данных или window.google_tag_manager['GTM-XXXXXX'].dataLayer.get('variableName') для получения значений переменных GTM. Также вкладка "Network" в Chrome DevTools позволяет отслеживать сетевые запросы и убедиться, что данные отправляются корректно.
  • Внешние инструменты. Расширение для браузера Chrome:

GTM: Как отслеживать переходы по внешним ссылкам с сайта Wordpress WooCommerce

Задача: Сайт на Wordpress WooCommerce с партнерскими ссылками. Нужно создать конверсии (цели) для анализа переходов по партнерским ссылками.

Решение этой задачи достаточно не тривиально, потому что кнопка "В корзину" на странице рубрик товаров WooCommerce и кнопка "В корзину" на странице карточки товаров сверстаны по разному. В первом случае это обычная ссылка, во втором случае кнопка (тег button) обернута в тег формы (тег form). Поэтому в предлагаемом решении я сделаю 2 триггера для этих случаев, но Категорию (AffLinkClick) цели задам одну и на выходе получу одну микроконверсию в Google Аналитика для обоих вариантов.

Первый триггер - это универсальный триггер по отслеживанию переходов по внешним ссылкам, он подходит для вариантов партнерских ссылок на любом сайте Wordpress.

Этапы настройки первого триггера для ссылок:

  1. Предварительно установлена Google Аналитика и Яндекс.Метрика
  2. Добавить переменные событий в разделах "Страницы", "Клики", "Формы".
  3. Добавляем триггер: Только ссылки. Ставим галочки "Ждать теги" (чтобы не срабатывал впустую), "Проверка ошибок". Включить триггер при выполнении всех этих условий: Page URL содержит "впишите домен вашего сайта".Условия активации триггера: Click URL содержит "впишите часть партнерской ссылки - общей для всех партнерских URL". Жмем "Сохранить". Эти действия привели к отслеживанию события gtm.linkClick, уже на этом этапе, конечно после публикации изменений, вы можете его увидеть в GTM дебаггере.
  4. Создать тег события. Создаем новый тег на основе Universal Analytics: Тип отслеживания= Событие (Читать подробно о событиях в GA). Параметры отслеживания событий: вписываем свои значения в параметры Категория = AffLinkClick, Действия выбираем переменную Click URL, Ярлык выбираем переменную Page Path. Добавляем ID GA. Включаем на срабатывание нашего триггера. Сохраняем.
  5. Проверяем данные о событие в Google Аналитика, для этого переходим Google Аналитика → "Отчет в реальном времени" → "События". Вы должны увидеть ваше событие, если его нет, возможно вы не опубликовали контейнер GTM.
  6. Создать цель на событие в Google Analitycs: Установка цели выбираем "Собственная". Описание цели выбираем "Событие". Условия события: задаем только категорию, вписываем то же самое что и в GTM категории: все остальные поля Действие, Ярлык, Ценность оставляем пустыми.

Всё! Можете перейти в отчет GA→"Источники трафика"→"Источник/канал" и посмотреть статистику по вашей цели. Не забудьте выбрать сегодняшнюю дату в GA LOL.

Частично настройку можно посмотреть в этом видео:

Этапы настройки второго триггера для кнопки в товарной карточки WooCommerce:

  1. Добавляем триггер: Клик - все элементы. Включить триггер при выполнении всех этих условий: Page URL содержит "впишите домен вашего сайта", Form Classes содержит имя класса cart (имя класса вы можете посмотреть в дебаггере вашего браузера). Сохраняем.
  2. Создать тег события. Создаем новый тег на основе Universal Analytics: Тип отслеживания= Событие (Читать подробно о событиях в GA). Параметры отслеживания событий: вписываем свои значения в параметры Категория = AffLinkClick, Действия выбираем переменную Page Path (так как в Form URL WooCommerce не передает значение, к сожалению), Ярлык выбираем переменную Page Path. Добавляем ID GA. Включаем на срабатывание нашего триггера. Сохраняем.
  3. Создавать новую цель на событие в Google Analitycs НЕ нужно, будет отрабатывать созданная ранее.

Отслеживаем отправку форм в Google Tag Manager

Рассмотрим как отслеживать отправку форм <form> в Google Analytics и Яндекс Метрику с помощью Диспетчера тегов.

Этапы настройки тега отслеживания отправки формы:

  1. В GTM есть готовый шаблон триггера, который так и называется "Отправка формы". Выбираем его. Настройки оставляем по умолчанию (Условия активации триггера: Все формы). Сохранили.
  2. Перешли в режим "Предварительный просмотр" и убедились, что НЕ правильно заполненная форма не создает событие gtm.fromSubmit. Событие должно появляться только при отсылке правильно заполненной формы.
  3. Создаем новый тег на основе Universal Analytics: Тип отслеживания= Событие. Параметры отслеживания событий: Категория = form, Действие = submit. Добавляем ID GA. Включаем на срабатывание нашего триггера. Сохраняем.
  4. Все!

Возможные проблемы, ошибки в Google Tag Manager

Ошибки GTM, которые встречались в моей практике и способы их устранения.

1. Facebook Pixel invalid email address was specified for 'em'

Facebook Pixel добавлен на сайт при помощи Google Tag Manager.

В консоли браузера наблюдаю ошибку: An invalid email address was specified for 'em'. This data will not be sent with any events for this Pixel.

  • Решение 1: для решения этой проблемы вам нужно отключить "Использовать расширенное совпадение" в настройках пикселя и вставить новый код в Google Tag Manager.
  • Решение 2: ваш программист должен настроить переменную em: 'insert_email_variable' для передачи дополнительных сведениях о ваших посетителях сайта, подробнее Advanced Matching with the Pixel

2. Установили код Google Tag Manager и не убрали код Google Analytics

Если вы решили работать с Google Analytics через GTM, то обязательно проверьте, удалили ли вы ранее установленный код Google Analytics.

Заключение: задачи, решаемые Google Tag Manager

Google Tag Manager (GTM) упрощает установку и управление маркетинговыми тегами, а также отслеживание действий на сайте. Ранее разработчикам приходилось программировать коды аналитики для каждой страницы отдельно и обновлять их вручную. С GTM все теги хранятся в одном месте и управляются без участия программистов.

GTM помогает выявлять ошибки в тегах, показывая, какие теги активны и какие данные содержат, что упрощает их устранение. Инструмент полезен для настройки ремаркетинга, A/B тестирования и мониторинга использования элементов сайта, таких как фильтры и формы.

PQ VPS сервера в 38+ странах.

📌 Для тестирования скриптов, установщиков VPN, Python ботов рекомендуем использовать надежные VPS на короткий срок. Если вам нужна помощь с более сложными задачами, вы можете найти фрилансера, который поможет с настройкой. Узнайте больше о быстрой аренде VPS для экспериментов и о фриланс-бирже для настройки VPS, WordPress. 📌

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Китайский VPN Shadowsocks простая установка и настройка
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  2. Обзор Cloudways: Управляемый хостинг WordPress без головной боли
  3. Обзор и отзывы о PQ Hosting в 2024 году
  4. Хостинг в России
  5. Хостинг в Европе
  6. Обзор браузера Dolphin {anty} для мультиаккаунтинга
  7. Хостинг в Турции