Что такое Google Tag Manager (GTM) и зачем он нужен?
Google Tag Manager (GTM) – это система управления тегами, разработанная Google. Она позволяет добавлять и обновлять теги веб-сайта (фрагменты кода для отслеживания аналитики, ремаркетинга, конверсий и т. д.) без необходимости редактировать код сайта вручную. Для WordPress это означает, что вы можете управлять всеми вашими маркетинговыми и аналитическими инструментами из одного места, не прибегая к помощи разработчика каждый раз, когда нужно добавить новый пиксель или изменить настройки.
Преимущества использования GTM без плагина WordPress
Использование GTM без плагина WordPress имеет несколько ключевых преимуществ:
- Производительность: Избегаете установки лишних плагинов, которые могут замедлять работу сайта.
- Контроль: Полный контроль над кодом и тегами, отсутствие зависимости от разработчиков плагина.
- Гибкость: Большая гибкость в настройке и управлении тегами по сравнению с использованием плагинов.
- Актуальность: Нет необходимости ждать обновления плагина для поддержки новых функций GTM.
Необходимые условия: учетная запись Google, GTM и доступ к WordPress
Прежде чем начать, убедитесь, что у вас есть следующее:
- Учетная запись Google: Для доступа к Google Tag Manager.
- Учетная запись Google Tag Manager: Созданный контейнер для вашего сайта WordPress.
- Доступ к административной панели WordPress: Для редактирования файлов темы.
- Рекомендуется: Знакомство с основами HTML, CSS и PHP.
Создание и настройка контейнера Google Tag Manager
Создание учетной записи Google Tag Manager
- Перейдите на сайт Google Tag Manager (https://tagmanager.google.com/).
- Войдите в свою учетную запись Google.
- Нажмите «Создать аккаунт».
- Введите название компании или сайта.
- Укажите страну.
Создание контейнера для вашего сайта WordPress
- После создания аккаунта нажмите «Создать контейнер».
- Введите название контейнера (например, «Мой WordPress сайт»).
- Выберите целевую платформу «Веб-сайт».
- Нажмите «Создать».
- Примите условия использования Google Tag Manager.
Получение кода контейнера GTM (GTM ID)
После создания контейнера вам будет предоставлен код GTM. Он состоит из двух частей: один фрагмент кода должен быть помещен в секцию <head>, а другой – сразу после открывающего тега <body>. Запишите ваш GTM ID (например, GTM-XXXXXXX).
Добавление кода Google Tag Manager в WordPress без плагина
Редактирование файла functions.php вашей темы WordPress (рекомендуется использовать дочернюю тему)
Внимание: Редактирование файла functions.php основной темы может привести к потере изменений при обновлении темы. Настоятельно рекомендуется использовать дочернюю тему. Если у вас ее нет, создайте её.
Вставка кода GTM в секцию <head> и <body> с использованием PHP
Добавьте следующий код в файл functions.php вашей дочерней темы:
<?php
/**
* Добавляет код Google Tag Manager в секцию <head> и <body>.
*
* @param string $gtm_id ID контейнера Google Tag Manager.
*/
function add_gtm_to_wordpress(string $gtm_id): void {
?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<?php echo esc_attr( $gtm_id ); ?>');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action( 'wp_head', function() { add_gtm_to_wordpress('GTM-XXXXXXX'); }, 1);
/**
* Добавляет код Google Tag Manager в <body>.
*
* @param string $gtm_id ID контейнера Google Tag Manager.
*/
function add_gtm_body(string $gtm_id): void {
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo esc_attr( $gtm_id ); ?>"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}
add_action( 'wp_body_open', function() { add_gtm_body('GTM-XXXXXXX'); });
Замените GTM-XXXXXXX на ваш фактический ID контейнера Google Tag Manager.
add_gtm_to_wordpress(string $gtm_id): void— функция, которая добавляет код GTM в секцию<head>. Она принимает ID контейнера GTM в качестве аргумента типа string и не возвращает никакого значения (void).add_gtm_body(string $gtm_id): void— функция, которая добавляет код GTM в<body>. Она также принимает ID контейнера GTM в качестве аргумента string и не возвращает никакого значения.add_action( 'wp_head', function() { add_gtm_to_wordpress('GTM-XXXXXXX'); }, 1);— добавляет функциюadd_gtm_to_wordpressв хукwp_head, который выполняется в секции<head>. Параметр1указывает на приоритет выполнения (чем меньше число, тем выше приоритет).add_action( 'wp_body_open', function() { add_gtm_body('GTM-XXXXXXX'); });— добавляет функциюadd_gtm_bodyв хукwp_body_open, который выполняется сразу после открывающего тега<body>(в WordPress версии 5.2+). Если у вас более старая версия WordPress, необходимо использовать другие способы вставки кода в<body>.
Альтернативные способы вставки кода (через FTP, файловый менеджер хостинга)
Если у вас нет доступа к административной панели WordPress, вы можете редактировать файл functions.php через FTP-клиент или файловый менеджер, предоставляемый вашим хостинг-провайдером. Механизм редактирования остается тем же: скачиваете файл, редактируете, загружаете обратно на сервер.
Как избежать ошибок при редактировании кода темы
- Создавайте резервные копии: Перед любыми изменениями создавайте резервные копии файлов темы.
- Используйте дочернюю тему: Это предотвратит потерю изменений при обновлении основной темы.
- Проверяйте синтаксис PHP: Убедитесь, что ваш код PHP не содержит ошибок синтаксиса, иначе сайт может перестать работать.
- Используйте редактор кода: Используйте текстовый редактор с подсветкой синтаксиса PHP для облегчения поиска ошибок.
Проверка установки Google Tag Manager
Использование режима предварительного просмотра в GTM
- В Google Tag Manager нажмите кнопку «Предварительный просмотр».
- Перейдите на свой сайт WordPress.
- В нижней части экрана появится панель отладки GTM, показывающая, какие теги активируются на каждой странице.
Использование расширения Google Tag Assistant
Установите расширение Google Tag Assistant для Chrome. Оно покажет, установлен ли GTM на странице и правильно ли он работает.
Поиск распространенных ошибок и способы их исправления
- GTM не установлен: Убедитесь, что код GTM правильно добавлен в секцию
<head>и<body>вашего сайта. - Ошибки синтаксиса PHP: Проверьте файл
functions.phpна наличие ошибок синтаксиса PHP. - Конфликты с плагинами: Отключите другие плагины по очереди, чтобы выявить возможные конфликты.
- Неправильный GTM ID: Убедитесь, что вы правильно указали ID контейнера GTM в коде.
Настройка базовых тегов в Google Tag Manager
Настройка тега Google Analytics (базовый просмотр страниц)
- В Google Tag Manager перейдите в раздел «Теги».
- Нажмите «Создать».
- Выберите тип тега «Google Analytics: Universal Analytics».
- Выберите тип отслеживания «Просмотр страницы».
- Укажите ваш ID отслеживания Google Analytics.
- В разделе «Триггеры» выберите триггер «All Pages».
- Сохраните тег с названием «GA — Просмотр страницы».
Создание триггеров для активации тегов
Триггеры определяют, когда должен активироваться тег. Для базового тега Google Analytics используйте триггер «All Pages», который активируется на каждой странице сайта.
Публикация контейнера GTM
После настройки тегов и триггеров необходимо опубликовать контейнер GTM, чтобы изменения вступили в силу. Нажмите кнопку «Отправить» в правом верхнем углу экрана и выберите «Опубликовать». После публикации контейнера GTM начнет собирать данные.