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

• Что такое Google Tag Manager
• Кому и зачем нужен Google Tag Manager
• Как создать аккаунт в Google Tag Manager
• Как установить Google Tag Manager на WordPress
  • Как добавить код без плагинов
  • Как вставить код с плагином WPCode
• Как подключить Google Analytics 4 к GTM
• Зачем нужен режим предварительного просмотра
• Как отслеживать клики по ссылкам на сайте
• Как настроить Ecommerce-события на WooCommerce
• Что вы получаете после настройки Google Tag Manager

Новички часто существенно упрощают возможности Google Tag Manager, сводя их к банальной вставке кода GA4, или наоборот — теряются в большом функционале и бросают настройки на полдороги. GTM тем временем позволяет управлять не только аналитикой, но и рекламными пикселями, конверсиями, кастомными событиями и ecommerce-трекингом — все из одной панели. Я протестировал инструмент в своей тестовой песочнице, чтобы подробно показать вам, что такое Google Tag Manager, как установить и подключить его к сайту, и настроить отслеживание событий для интернет-магазина.

Что такое Google Tag Manager

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

Google Tag Manager состоит из трех компонентов:

• тег (Tag) — код, который выполняет действие, например, отправляет данные в GA4;
• триггер (Trigger, в украиноязычном интерфейсе «активатор») — условие, при котором тег должен сработать: клик, просмотр страницы, отправка формы;
• переменная (Variable) — значение, которое подставляется в тег или триггер: URL страницы, текст ссылки, цена товара;
• контейнер (Container) — «коробка», которая объединяет все теги, триггеры и переменные для сайта, и именно его код вы один раз вставляете на веб-ресурс.

Несмотря на огромные возможности, GTM не способен анализировать данные, предоставлять доступ к готовым отчетам или формировать собственные. В этом главная отличительная черта Google Tag Manager от Google Analytics 4: первый лишь доставляет код на сайт и решает, когда его запустить, а второй — анализирует полученные данные и формирует отчеты.

Кому и зачем нужен Google Tag Manager

Этот инструмент является чрезвычайно полезным любому бизнесу, онлайн-проекту и специалисту, который хочет отслеживать данные о целевой аудитории, привлекать клиентов и считать прибыль. Маркетологам и аналитикам он помогает упростить запуск рекламных кампаний и отслеживание их эффективности, владельцам бизнеса и сайтов — сэкономить деньги на услугах программистов, а разработчикам — сэкономить время, которое обычно уходит на рутинное добавление мелкого кода.

Если говорить именно о онлайн-проектах, Google Tag Manager нужен:

• интернет-магазинам — отслеживание покупок, анализ поведения новых и постоянных покупателей, упрощенная передача данных в рекламные сети для запуска рекламы и динамического ретаргетинга;
• корпоративным сайтам — добавление аналитики, пикселя для рекламы в соцсетях, конверсии Google Ads, чат-виджета без постоянного вмешательства в код;
• SaaS-сервисам — отслеживание регистрации в продукте, прохождения пробного периода, оформления платной подписки и передача этих данных в рекламные кабинеты;
• информационным сайтам — отслеживание различной глубины прокрутки, взаимодействия с медиаконтентом, переходы по партнерским ссылкам;
• одностраничным сайтам — анализ небольших конверсий, например, клик по кнопке «Узнать цену» или просмотр именно блока «Услуги», плюс подключение сторонних сервисов для тестирования различных дизайнов и заголовков.

Вместе с тем владельцу небольшого блога, которому не хочется ничего дополнительно подключать, достаточно Google Analytics 4 с настройками по умолчанию. Тем более аналитику можно подключить через встроенные интеграции тем на кшталт Blocksy: просто переходите в Customizer → General → Visitor Engagement и вставляете ID GA4. То же самое касается простых портфолио и небольших сайтов, которые просто созданы для представления в интернете без планов на развитие.

Как создать аккаунт в Google Tag Manager

Зарегистрировать аккаунт может каждый пользователь за несколько минут. Вам нужно пройти регистрацию, выбрать платформу (Web, iOS или Android) и добавить код системы на свой онлайн-проект.

Для примера рассмотрим, как создать аккаунт в Google Tag Manager владельцу сайта:

1. Перейдите на официальный сайт Google Tag Manager и войдите в свой Google аккаунт, после чего нажмите «Создать учетную запись».

2. Добавьте название аккаунта и выберите страну.

3. Добавьте название контейнера и выберите платформу, например, Web для сайта.
4. Нажмите «Создать» и согласитесь с «Terms of Service Agreement», после чего мгновенно откроется форма с фрагментами кода — это разберем позже.

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

Как установить Google Tag Manager на WordPress

Добавить код Google Tag Manager на WordPress сайт можно с помощью плагинов или вручную через редактирование темы. Из плагинов наиболее эффективными и стабильными являются Google Tag Manager for WordPress или специализированное расширение для добавления любого кода WPCode.

Чтобы показать процесс регистрации, настройки и использования Google Tag Manager с нуля, я создал тестовый интернет-магазин через TasteWP. На него установил обновление WordPress 7.0, тему Twenty Twenty-Three, плагин электронной коммерции WooCommerce. В магазин добавил 4 тестовых товара для дальнейшего отслеживания событий: лучший хостинг, регистрация домена, аренда виртуального и выделенного сервера с Cityhost.

Как добавить код без плагинов

Нужно скопировать оба фрагмента кода из рабочей области GTM и вставить в шаблон сайта: первый — сразу после <head>, второй — сразу после тега <body>. Если тема поддерживает редактирование шаблона, можете сделать это прямо в админпанели, если нет — понадобится FTP клиент, например, FileZilla.

На тестовом сайте установлена современная блочная тема, поэтому для этого способа пришлось изменить ее на GeneratePress. Так что если у вас тоже эта или другая классическая тема с Theme File Editor, тогда добавьте код Google Tag Manager следующим образом:

1. Перейдите в админпанель WordPress → «Внешний вид» (Appearance) → «Редактор тем» (Theme File Editor).

2. Найдите header.php.

3. Вернитесь в GTM → нажмите на код → скопируйте первый фрагмент кода.

4. В header.php сразу после тега <head> вставьте код.

5. Повторите то же самое со вторым фрагментом и тегом <body> — обычно он в том же файле.

Если ваша тема поддерживает Theme File Editor и имеет понятный код, где легко найти <head> и <body>, или вы готовы потратить немного времени на подключение через FTP клиент — можете использовать этот способ. Но всегда делайте резервные копии перед такими серьезными изменениями на сайте.

Читайте также: 31 марта — день резервного копирования. Почему важно не забывать о бэкапах и как сделать резервную копию своего сайта (инструкция)

Как вставить код с плагином WPCode

Если ваша тема не позволяет редактировать код через админпанель WordPress или вам не хочется самостоятельно изменять шаблон, тогда лучшим выбором является бесплатная версия плагина WPCode. Вы можете установить и активировать его прямо из каталога WordPress, добавить код в header и body, и он автоматически будет работать на всем сайте.

Давайте пошагово рассмотрим, как добавить код Google Tag Manager с WPCode:

1. Перейдите в админпанель WordPress → Plugins → Add Plugin и найдите WPCode.

2. После установки и активации перейдите в WPCode → Header & Footer.

3. В поле Header вставьте первый фрагмент кода GTM, в поле Body — второй, и сохраните изменения.

Проверить, правильно ли вы установили код, можете через просмотр страницы: перейдите на сайт → правая кнопка мыши → «Просмотреть код страницы» → найдите строку с «GTM-». Или еще проще: вернитесь в Google Tag Manager и под двумя фрагментами кода введите адрес своего сайта и нажмите «Проверить».

Важно! В интернете «Google Tag Manager for WordPress» (GTM4WP) часто называют официальным решением Google — это популярный, хорошо поддерживаемый, но сторонний продукт. Единственный плагин, который действительно выпускает сама компания — Site Kit by Google. С ним тоже можно подключить GTM, но на бюджетном общем хостинге он иногда создает сразу несколько параллельных запросов к Google API при загрузке дашборда, что на ограниченных тарифах может приводить к временным ошибкам сервера.

Как подключить Google Analytics 4 к GTM

Для подключения Google Analytics 4 к Google Tag Manager нужно создать аккаунт в системе аналитики. Вы можете найти пошаговую инструкцию с Google Analytics 4 в блоге Cityhost. После этого потребуется добавить тег Google (ранее — GA4 Configuration) в GTM, что займет несколько минут.

Предлагаю пошагово рассмотреть процесс подключения Google Analytics 4 к Google Tag Manager:

1. Перейдите в GA4 → Admin → Data collection and modification → Data Streams, нажмите на название нужного потока данных (вашего сайта) из списка → скопируйте Measurement ID.

2. Перейдите в GTM → Add tag прямо на главной странице или Tags → Create через меню.

3. Нажмите Tag Configuration → Google Tag (не путать с Google Analytics — это для событий).

4. Вставьте Measurement ID, Triggering не изменяйте, добавьте название тега и сохраните.

Вы подключили Google Analytics 4 к Google Tag Manager, но теперь нужно проверить, все ли корректно работает. И тут часто возникает огромная путаница между двумя кнопками — Preview и Publish — которые находятся рядом.

Зачем нужен режим предварительного просмотра

Preview в Google Tag Manager — это режим тестирования контейнера перед публикацией. Он автоматически помечает вашу текущую сессию в браузере параметром _dbg, в отличие от параметра debug_mode, который пришлось бы добавлять вручную. Реальные посетители сайта никогда не появляются в DebugView, что позволяет не портить собственную статистику.

Так что нажмите Preview в правом верхнем углу GTM, вставьте доменное имя и нажмите Connect. В новой вкладке откроется ваш сайт, и вам нужно перейти на несколько страниц, но не закрывайте то новое окно со своим веб-ресурсом, просто сверните. Если вы все правильно настроили, то увидите в Google Tag Manager Debug — Tags Fired (ваш тег) и Tags Not Fired — None.

После проверки в Preview изменения нужно публиковать через Submit → Publish — только тогда контейнер становится «живым» и теги срабатывают для реальных посетителей автоматически. При этом публикация касается конкретной версии контейнера на момент нажатия Publish: если добавить новый тег и забыть опубликовать, он продолжит работать только в вашем Preview и никогда не сработает для реальных посетителей, хотя в интерфейсе GTM будет выглядеть полностью готовым.

Важно! Для полного корректного получения данных на новом аккаунте Google Analytics 4 может понадобиться от 24 до 48 часов. Однако вы уже можете перейти на дашборд и посмотреть отчет в реальном времени (Realtime). Например, у меня показывает 1 пользователь из Украины: все работает, мы успешно подключили Google Analytics 4 к сайту через Google Tag Manager.

Как отслеживать клики по ссылкам на сайте

Отслеживать клики по внешним ссылкам умеет и сама GA4, но внутренние клики она вообще не фиксирует. Вместо этого Google Tag Manager позволяет настроить полное отслеживание и внутренних, и внешних ссылок, видеть сам линк и анкор. Для этого достаточно лишь добавить соответствующие переменные и триггеры.

Для понимания разницы сначала посмотрим на обычное отслеживание кликов в Google Analytics 4:

1. Зайдите в Analytics → Admin → Data collection and modification → Data Streams → выберите свой веб-поток → нажмите на шестеренку рядом с Enhanced measurement → убедитесь, что переключатель Outbound clicks включен.

2. Создайте на сайте страницу или добавьте на существующую два типа ссылок: внешние и внутренние. Например, я добавил на «Hello World» одно внутреннее (Shop) и 4 внешних (виртуальный хостинг, VPS, аренда физического сервера, доменное имя).

3. Откройте эту страницу и кликните по очереди на ссылки, после чего перейдите в Analytics → Reports → Realtime overview, найдите блок «Event count by Event name» — должна появиться событие click. Нажмите на нее и посмотрите link_url. Например, я несколько раз кликал по всем ссылкам, но Google Analytics 4 зачислил только клики на cityhost.ua/uk, а на мою страницу Shop ни разу.

Теперь разберем, как настроить отслеживание кликов в Google Tag Manager:

1. Перейдите в GTM → Variables → Configure → отметьте встроенные переменные Click URL, Click Text, Click Classes.

2. Перейдите в Triggers → New → Trigger Configuration → Just Links → добавьте название → Save.

3. Перейдите в Tags → New → Tag Configuration → Google Analytics → GA4 Event и снова укажите ID и добавьте Event Name link_click.

4. Тут же нажмите на Event Parameters и добавьте параметры: link_url = {{Click URL}}, link_text = {{Click Text}}.

5. Внизу в Triggering добавьте созданный триггер, добавьте название всему тегу и нажмите Save.

6. Нажмите Preview, подключитесь к сайту, кликните на внешнее и внутреннее ссылку на своем сайте, а затем в Tag Assistant → Summary проверьте, сработал ли тег link_click на обоих кликах.

7. Перейдите в GA4 → DebugView → кликните на каждое событие и посмотрите link_url и link_text. Как видите, все сработало, и теперь мы можем отслеживать и внешние, и внутренние ссылки, чего в GA4 не было.
8. Завершите Preview → вернитесь в GTM → нажмите «Отправить» (Submit) → добавьте название версии, например, «v2 – link click tracking» и нажмите Publish.

Для финальной проверки так же перейдите в GA4 → DebugView → Event count by Event name → link_click → link_url. Например, у меня отображаются 2 перехода на страницу Shop (внутренние ссылки), 2 — Cityhost (внешние ссылки) и еще одно на мой сайт на тот запись Hello World, где мы все тестировали.

Важно! Не перепутайте в отчетах два разные события: click с параметром outbound: true — это автоматический трекинг самой GA4, а link_click — ваше собственное событие с GTM. Они существуют параллельно и не заменяют друг друга, если вы не отключили Enhanced measurement вручную.

Как настроить Ecommerce-события на WooCommerce

Для отслеживания таких событий как просмотр карточки товара, добавление в корзину, покупка нам тоже нужно осуществить настройки в GTM, так как сам Google Analytics 4 их не отслеживает. Сначала устанавливаем дополнительный плагин GTM Kit, потом уже создаем кастомные события в Google Tag Manager.

Особенность работы сайтов на WordPress WooCommerce — GA4 и GTM сами по себе не знают ничего о WooCommerce, ведь они читают лишь то, что появилось в dataLayer браузера, а этот Ecommerce плагин по умолчанию не выводит туда данные о товаре, цене или ID заказа. Соответственно нам нужно построить мост с помощью собственного PHP-кода, или еще проще — установить плагин GTM Kit:

1. Перейдите в админпанель WordPress → Plugins → Add Plugin → установите и активируйте.

2. В настройках плагина укажите GTM Container ID и потом просто нажимайте Save and Continue, не изменяя настройки по умолчанию.

В GTM Kit есть удобный мастер Template Assistant (Dashboard → Open Template Assistant), который обещает сгенерировать готовый файл с тегами, триггерами и переменными для импорта в GTM. Вам нужно лишь выбрать тип сайта (E-commerce), сервисы (GA4) и указать Measurement ID. В теории это намного быстрее, чем настраивать каждый тег отдельно.

Однако во время тестирования я получил ошибку «Error generating template. Please check your connection and try again», а в консоли браузера (F12 → Console) было сообщение: запрос к api.gtmkit.com заблокирован CORS-политикой — сервер плагина не дал разрешение на запрос именно с домена моего тестового сайта. Это, скорее всего, особенность временного домена песочницы, а не системная проблема плагина. Но учитывайте этот момент: если у вас появится такая же ошибка, не стоит тратить на нее время — просто переходите к ручному настройке.

Для каждой из трех событий (view_item, add_to_cart, purchase) последовательность одинаковая. Я покажу, как создать Ecommerce событие в Google Tag Manager на примере view_item:

1. Перейдите в Google Tag Manager → Triggers → New → Trigger Configuration → Custom Event.

2. Добавьте Event Name — view_item, другие данные оставьте по умолчанию, добавьте название, например, «CE — View Item» и нажмите Save.

3. Перейдите в Tags → New → Tag Configuration → Google Analytics: GA4 Event → вставьте Measurement ID из GA4 и view_item в Event Name, а в настройках Ecommerce выберите «Send Ecommerce data» → Data source «Data Layer».

4. В Triggering выберите созданный нами триггер, например, в меня это «CE — View item», добавьте название и нажмите Save.

Точно по такой же схеме создайте триггер и тег для add_to_cart, а потом — для purchase. Меняйте лишь Event Name и название триггера/тега на каждом шаге. Настройки Ecommerce, Data Layer, Measurement ID остаются такими же, как и для view_item.

Триггер для add_to_cart

Тег для add_to_cart

Триггер для purchase

Тег для purchase

Когда все три триггера и теги будут готовы, вернитесь в Google Tag Manager, нажмите «Отправить» (Submit) и опубликуйте изменения (Publish).

Что вы получаете после настройки Google Tag Manager

Все, что мы настраивали в этой статье — от подключения GA4 до отслеживания кликов и ecommerce-событий — существует ради конкретных отчетов. С Google Tag Manager вы получаете возможность анализировать поведение пользователей, отслеживать переходы по внешним и внутренним ссылкам, этапы оформления покупки, прибыль с каждого источника трафика, списки отдельных заказов, и конечно подключать новые инструменты к своему онлайн-проекту без вмешательства в код сайта.

Рассмотрим конкретные данные из Google Analytics 4 через Google Tag Manager:

• Reports → Business objectives → View user engagement and retention → Events — таблица со всеми событиями сайта и их количеством.
• Explorations → Free Form — построение собственных отчетов, например, сопоставление событий с устройством, страной или источником трафика.
• Business objectives → Drive sales → Ecommerce purchases — просмотры, добавления в корзину, покупки и доход по каждому товару отдельно.
• Business objectives → Drive sales → Purchase journey — воронка из пяти шагов с процентом отказа на каждом этапе.
• Business objectives → Drive sales → Transactions — список отдельных заказов с детализацией, например, ID транзакции, сумма и другие данные.
• Business objectives → Generate leads → Traffic acquisition — продолжительность сессии, события за сессию, доход разрезе каждого источника трафика.
• Realtime overview — отображение всех за секунды, еще до появления в отчетах выше.

Google Tag Manager позволяет получать все вышеуказанные отчеты, которых нет при стандартных настройках GA4. Но GA4 — не единственный сервис, который можно подключить через тот же контейнер: так же просто добавляются Facebook Pixel, конверсии Google Ads, TikTok Pixel или любой другой рекламный и аналитический скрипт. И главное — GTM постоянно развивается, добавляя новые возможности и сервисы, которые вы теперь сможете подключать самостоятельно, понимая основы работы с тегами, триггерами и переменными.