| Предыдущая версия |
| — | gtm [2025/07/06 12:38] (текущий) – внешнее изменение 127.0.0.1 |
|---|
| | ====== Как настроить Google Tag Manager для эффективного отслеживания сайта ====== |
| |
| | ~~Title: Настройка и использование Google Tag Manager: пошаговое руководство ~~ |
| | {{htmlmetatags> |
| | metatag-keywords=(Google Tag Manager, GTM) |
| | metatag-description=(Узнайте, как самостоятельно настроить Google Tag Manager на вашем сайте WordPress WooCommerce. В этом руководстве мы подробно рассмотрим процесс добавления кода Facebook Pixel, Яндекс Метрики, Google Analytics и TripAdvisor, чтобы вы могли эффективно отслеживать действия пользователей и оптимизировать рекламные кампании.) |
| | }} |
| | {{ ::analytics_gtm_wiki.dieg.info.jpg?nolink&400 |}} |
| | |
| | Google Tag Manager (GTM) — это бесплатный инструмент от Google, который позволяет легко добавлять сторонние аналитические теги, теги отслеживания конверсий, пиксели ремаркетинга на вашем веб-сайте или в мобильном приложении без необходимости редактирования кода вашего сайта. Цель Google Tag Manager — упростить и ускорить процесс управления и развертывания аналитики на сайте или в приложении, обеспечивая при этом гибкость, контроль и повышение эффективности работы. GTM позволяет маркетологам и аналитикам быстро адаптироваться к изменениям и запускать новые кампании без необходимости вовлекать разработчиков. Код GTM нужно добавить на сайт только один раз. В дальнейшем маркетолог или владелец бизнеса самостоятельно сможет установить коды других служб без участия программиста или веб-мастера. |
| | |
| | С помощью GTM можно легко добавлять на сайты коды таких популярных сервисов и платформ, как: |
| | |
| | * [[google_analytics|Google Analytics]] |
| | * [[adwords|Google Ads]] |
| | * [[jandeks.metrika|Яндекс.Метрика]] |
| | * [[piksel_facebook|Facebook Pixel]] |
| | * TripAdvisor |
| | * LinkedIn |
| | * Pinterest |
| | * [[remarketing|Как добавить на сайт тег для ремаркетинга]] |
| | Вы можете как пользоваться готовыми тегами из библиотеки GTM, так и добавлять собственные через HTML. |
| | |
| | Все изменения тегов GTM сохраняются в виде версий, что позволяет легко откатить изменения или отслеживать историю изменений. Теги GTM загружаются асинхронно, что снижает нагрузку на сайт. Ну да конечно, а сторонний код аналитики тоже асинхронный? Но в любом случае GTM это удобно. |
| | |
| | ===== Как подключить Google Tag Manager (GTM) на сайт ===== |
| | <panel type="info">Если у вас сайт на Wordpress, в первую очередь изучите плагин [[Site Kit]] и если он вам не подойдет используйте инструкции ниже. </panel> |
| | |
| | Чтобы настроить Google Tag Manager, войдите в свой аккаунт Google и перейдите к Tag Manager. Нажмите “Создать аккаунт”, чтобы создать аккаунт для вашей компании или организации. |
| | <alert type="success">Google рекомендует, чтобы каждая компания создавала только одну учетную запись независимо от того, есть ли у вас один или несколько веб-сайтов. Название вашей компании может служить названием вашей учетной записи.</alert> |
| | |
| | Добавьте название контейнера. Ваш контейнер – это фрагмент кода, который вы добавите на свой веб-сайт, чтобы GTM работал. Обычно используют один контейнер для одного сайта. Поэтому название контейнера может быть названием или URL-адресом вашего веб-сайта. После этого выберите нужную "Целевую платформу". |
| | |
| | После ввода всех необходимых данных активируется кнопка “Создать”. Нажмите ее, чтобы получить аккаунт Google Tag Manager и свой первый контейнер. |
| | |
| | Код для вставки Google Tag Manager на ваш сайт находится: заходим в Ваш аккаунт GTM-> Администрирование (вкладка "КОНТЕЙНЕР") -> "Установить Google Менеджер тегов". |
| | <panel type="success">Исходный код контейнера GTM разделен на две части: |
| | |
| | Первая часть представляет собой фрагмент кода JavaScript, который добавляется в <head>раздел каждой страницы веб-сайта. Эта часть имеет решающее значение для включения всех функций GTM, и этот плагин помогает правильно разместить эту часть на вашем сайте. |
| | |
| | Вторая часть — это фрагмент iframe, который действует как отказоустойчивый/резервный вариант, если JavaScript пользователя отключен. Google рекомендует – для лучшей производительности – размещать этот фрагмент кода непосредственно после открывающего <body>тега на каждой странице.</panel> |
| | |
| | * Универсальный способ. Первую часть кода нужно вставить в тег <head>. Вторую – после тега <body>. |
| | * [[Wordpress|Wordpress]] и GTM: |
| | Для добавления кода в [[Wordpress|Wordpress]], я обычно использую плагин [[https://wow2.top/clearfy-pro/|Clearfy Pro]], как вариант существует плагин [[https://wordpress.org/plugins/duracelltomi-google-tag-manager/|GTM4WP – A Google Tag Manager (GTM) plugin for WordPress]] с поддержкой Contact Form 7, [[WooCommerce|WooCommerce]], Google Optimize (проект закрыт), Accelerated Mobile Pages (AMP страниц), Cookiebot (при необходимости режим автоматической блокировки файлов cookie). |
| | |
| | На мой взгляд самая корректная установка кода GTM или на прямую через редактирование темы Wordpress или через плагин [[https://wow2.top/clearfy-pro/|Clearfy Pro]]. В плагине Clearfy перейдите на страницу "Код", найдите раздел "Код в <head>" включите его и вставьте первый блок кода GTM. Ниже найдите раздел "Код перед </body>", включите его и вставьте второй блок кода GTM. Нажмите кнопку внизу "Сохранить изменения". |
| | * [[DokuWiki|DokuWiki]] и GTM. [[dokuwiki#sposoba_dobavit_google_tag_manager_v_dokuwiki|2 способа добавит Google Tag Manager в движок Dokuwiki]] |
| | ===== Базовая настройка GTM: Подключение Google Analytics ===== |
| | - Cоздание переменной (тип Константа) для хранения ID [[google_analytics|Google Analytics]]. Переменной присваиваем Идентификатор потока данных (Который вы можете найти во вкладке "Сведения о веб-потоке" Google Аналитики.) |
| | - Добавляем Тег Google, в поле "Идентификатор тега" добавляем нашу созданную переменную. В пункте Триггеры выбираем All Pages и нажимаем кнопку "сохранить", чтобы новый тег появился в вашей рабочей области. |
| | - Добавить переменные для отслеживание кликов и форм, переходим в раздел GTM "Рабочая область" -> "Переменные" -> Кнопка "Настроить". Ставим галочки напротив всех событий в разделах "Страницы", "Клики", "Формы". |
| | - После этого нужно добавить тэг на ваш сайт. Для этого следует внести изменения, воспользовавшись кнопкой "Отправить" в вашей рабочей области. |
| | |
| | Готово! Google Analytics собирает данные с вашего сайта. |
| | |
| | <panel type="success">После внесения изменений и их проверки всегда нажимайте кнопку "Отправить" в вашей рабочей области Google Тег Менеджера. В новом окне добавляйте название новой версии и нажмите "Опубликовать". Только после этого новые настройки заработают на вашем сайте.</panel> |
| | |
| | ===== Как установить код Facebook Pixel, Яндекс Метрику, VK через Google Tag Manager ===== |
| | Для того чтобы установить [[https://wiki.dieg.info/piksel_facebook|Facebook Pixel]] через Google Tag Manager зайдите в раздел: «Теги» и нажмите кнопку «Создать». Выберите тег «Пользовательский HTML». Напишите название и добавьте код Facebook Pixel. Последний шаг — выбрать триггер активации (All Pages). Сохраните. Готово! |
| | |
| | По этому принципу вы можете создавать и другие пользовательские теги, для которых не предусмотрены готовые шаблоны в библиотеке тегов GTM. К примеру, этот способ используется для добавления на сайты кодов из [[jandeks.metrika|Яндекс.Метрики]] или 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: |
| | * [[https://chromewebstore.google.com/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm|Google Tag Assistant]] |
| | * Google Analytics Debugger |
| | * Data Layer Inspector+ |
| | ===== GTM: Как отслеживать переходы по внешним ссылкам с сайта Wordpress WooCommerce ===== |
| | Задача: Сайт на Wordpress WooCommerce с партнерскими ссылками. Нужно создать конверсии (цели) для анализа переходов по партнерским ссылками. |
| | |
| | Решение этой задачи достаточно не тривиально, потому что кнопка "В корзину" на странице рубрик товаров WooCommerce и кнопка "В корзину" на странице карточки товаров сверстаны по разному. В первом случае это обычная ссылка, во втором случае кнопка ([[html5#teg_button|тег button]]) обернута в тег формы ([[html5#teg_form_teg_label|тег form]]). Поэтому в предлагаемом решении я сделаю 2 триггера для этих случаев, но Категорию (AffLinkClick) цели задам одну и на выходе получу одну микроконверсию в Google Аналитика для обоих вариантов. |
| | |
| | <note>Первый триггер - это универсальный триггер по отслеживанию переходов по внешним ссылкам, он подходит для вариантов партнерских ссылок на любом сайте Wordpress.</note> |
| | |
| | **Этапы настройки первого триггера для ссылок:** |
| | - Предварительно установлена Google Аналитика и Яндекс.Метрика |
| | - Добавить переменные событий в разделах "Страницы", "Клики", "Формы". |
| | - **Добавляем триггер**: Только ссылки. Ставим галочки "Ждать теги" (чтобы не срабатывал впустую), "Проверка ошибок". Включить триггер при выполнении всех этих условий: Page URL содержит "впишите домен вашего сайта".Условия активации триггера: Click URL содержит "впишите часть партнерской ссылки - общей для всех партнерских URL". Жмем "Сохранить". Эти действия привели к отслеживанию события gtm.linkClick, уже на этом этапе, конечно после публикации изменений, вы можете его увидеть в GTM дебаггере. |
| | - **Создать тег события**. Создаем новый тег на основе Universal Analytics: Тип отслеживания= Событие ([[google_analytics#otslezhivanie_sobytij_v_ga|Читать подробно о событиях в GA]]). Параметры отслеживания событий: вписываем свои значения в параметры Категория = AffLinkClick, Действия выбираем переменную Click URL, Ярлык выбираем переменную Page Path. Добавляем ID GA. Включаем на срабатывание нашего триггера. Сохраняем. |
| | - Проверяем данные о событие в Google Аналитика, для этого переходим Google Аналитика -> "Отчет в реальном времени" -> "События". Вы должны увидеть ваше событие, если его нет, возможно вы не опубликовали контейнер GTM. |
| | - Создать цель на событие в Google Analitycs: Установка цели выбираем "Собственная". Описание цели выбираем "Событие". Условия события: задаем только категорию, вписываем то же самое что и в GTM категории: все остальные поля Действие, Ярлык, Ценность оставляем пустыми. |
| | |
| | Всё! Можете перейти в отчет GA->"Источники трафика"->"Источник/канал" и посмотреть статистику по вашей цели. Не забудьте выбрать сегодняшнюю дату в GA LOL. |
| | |
| | Частично настройку можно посмотреть в этом видео: |
| | {{ youtube>jyNPABEYuBc?medium }} |
| | |
| | **Этапы настройки второго триггера для кнопки в товарной карточки WooCommerce:** |
| | - **Добавляем триггер**: Клик - все элементы. Включить триггер при выполнении всех этих условий: Page URL содержит "впишите домен вашего сайта", Form Classes содержит имя класса cart (имя класса вы можете посмотреть в дебаггере вашего браузера). Сохраняем. |
| | - **Создать тег события**. Создаем новый тег на основе Universal Analytics: Тип отслеживания= Событие ([[google_analytics#otslezhivanie_sobytij_v_ga|Читать подробно о событиях в GA]]). Параметры отслеживания событий: вписываем свои значения в параметры Категория = AffLinkClick, Действия выбираем переменную Page Path (так как в Form URL WooCommerce не передает значение, к сожалению), Ярлык выбираем переменную Page Path. Добавляем ID GA. Включаем на срабатывание нашего триггера. Сохраняем. |
| | - Создавать новую цель на событие в Google Analitycs НЕ нужно, будет отрабатывать созданная ранее. |
| | |
| | ===== Отслеживаем отправку форм в Google Tag Manager ===== |
| | Рассмотрим как отслеживать отправку [[html5#teg_form_teg_label|форм <form>]] в [[google_analytics|Google Analytics]] и [[jandeks.metrika|Яндекс Метрику]] с помощью Диспетчера тегов. |
| | * [[https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ru|Справка по dataLayer.push]] |
| | * [[https://support.google.com/tagmanager/answer/7182738|Встроенные переменные для веб-контейнеров (в том числе атрибуты форм)]] |
| | |
| | **Этапы настройки тега отслеживания отправки формы:** |
| | - В GTM есть готовый шаблон триггера, который так и называется "Отправка формы". Выбираем его. Настройки оставляем по умолчанию (Условия активации триггера: Все формы). Сохранили. |
| | - Перешли в режим "Предварительный просмотр" и убедились, что НЕ правильно заполненная форма не создает событие gtm.fromSubmit. Событие должно появляться только при отсылке правильно заполненной формы. |
| | - Создаем новый тег на основе Universal Analytics: Тип отслеживания= Событие. Параметры отслеживания событий: Категория = form, Действие = submit. Добавляем ID GA. Включаем на срабатывание нашего триггера. Сохраняем. |
| | - Все! |
| | |
| | {{ youtube>SJQWQV7Ct5s?medium }} |
| | |
| | ===== Возможные проблемы, ошибки в 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.** |
| | |
| | {{ ::facebook-pixel-gtm.jpg?direct&600 |}} |
| | |
| | * **Решение 1**: для решения этой проблемы вам нужно отключить "Использовать расширенное совпадение" в настройках пикселя и вставить новый код в Google Tag Manager. |
| | * **Решение 2**: ваш программист должен настроить переменную em: 'insert_email_variable' для передачи дополнительных сведениях о ваших посетителях сайта, подробнее [[https://developers.facebook.com/docs/facebook-pixel/pixel-with-ads/conversion-tracking#advanced_match|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 тестирования и мониторинга использования элементов сайта, таких как фильтры и формы. |
